vue 相关代码
AI-摘要
KunKunYu GPT
AI初始化中...
介绍自己
生成本文简介
推荐相关文章
前往主页
前往tianli博客
本文最后更新于 2024-03-14，文章内容可能已经过时。
配置环境 ： vue-cl4
01style-resources-loader
全局调用less
vue add style-resources-loader
在项目根目录下的vue.config.js(没有需要新建)
const path = require('path');
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
path.resolve(__dirname, './src/styles/style.less'),
],
},
},
};
02配置自动rem换算 postcss-pxtorem和lib-flexibl
npm install postcss-pxtorem --save-dev
npm i -s amfe-flexible
main.js文件引入： import 'amfe-flexible'
在根目录，和package.json同级，创建一个名为postcss.config.js的文件
module.exports = {
plugins: {
'autoprefixer': {
overrideBrowserslist: [
'Android 4.1',
'iOS 7.1',
'Chrome > 31',
'ff > 31',
'ie >= 8'
]
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
03 初始化 less
@charset "utf-8";
/***********************************************************************
******************** 浏览器 初始化 *******************
******************** 移动端 *******************
************************************************************************
/
/* 禁止选中文本（如无文本选中需求，此为必选项） */
// html, body {-webkit-user-select: none;user-select: none;}
/* 禁止长按链接与图片弹出菜单 */
// a, img {-webkit-touch-callout: none;}
/*连续英文，数字换行*/
.wordwrap{word-break: break-all;word-wrap: break-word;}
/* 禁用iPhone中Safari的字号自动调整 */
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
/* 解决IOS默认滑动很卡的情况 */
-webkit-overflow-scrolling : touch;
}
/* 禁止缩放表单 */
input[type="submit"], input[type="reset"], input[type="button"], input {
resize: none;
border: none;
}
/* ios默认盒子模型为content-box；而安卓和谷歌是border-box。 */
input{
box-sizing:border-box;
}
/* 取消链接高亮 */
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* 设置HTML5元素为块 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
/* 图片自适应 */
// img {
// width: 100%;
// height: auto;
// width: auto\9; /* ie8 */
// display: block;
// -ms-interpolation-mode: bicubic;/*为了照顾ie图片缩放失真*/
// }
/*单行溢出*/
.one-txt-cut{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/*多行溢出 手机端使用*/
.txt-cut{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* -webkit-line-clamp: 2; */
-webkit-box-orient: vertical;
}
/* 移动端点击a链接出现蓝色背景问题解决 */
a:link,a:active,a:visited,a:hover {
background: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
// 清除浮动
.clearfix {
*zoom: 1;
/*ie*/
&::after,
&::before {
content: '';
display: table;
}
&::after {
clear: both;
}
}
/***********************************************************************
******************** 样式 初始化 *******************
******************** 移动端 *******************
************************************************************************
*/
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
margin: 0;
padding: 0;
}
// 默认样式
a{
text-decoration: none;
}
li{
list-style: none;
}
// 浮动类
.fl{
float: left;
}
.fr{
float: right;
}
// 双边距类
.margin18{
margin: 0 18px;
}
.margin29{
margin: 0 29px;
}
.padding50{
padding: 0 50px;
}
.margin50{
margin: 0 50px;
}
.margin15{
margin: 15px;
}
.margin25{
margin: 15px;
}
// UI颜色类
// @red:;
@pink:#e5004f;
@pinkwe:#ff4460;
@white:#ffffff;
@gray:#eee;
@gray-bar:#b3b3b3;
// 阴影类
.boxpink{
box-shadow: 1px 3px 9px @pink;
}
.box-gray{
box-shadow: 1px 3px 9px @gray;
}
.box-aw{
box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 20px 5px
}
.tex{
box-shadow: 1px 3px 9px @pink;
}
// 圆角类
.border-r5{
border-radius:5px;
}
.border-r15{
border-radius:15px;
}
.border-r30{
border-radius:30px;
}
.border-r50{
border-radius:50px;
}
//
04vue中wowjs的使用
npm install wowjs --save-dev
在main.js中引入animate.css
import 'animate.css'
在组件需要的地方引入wowjs
import {WOW} from 'wowjs'
mounted() { new WOW().init() }
import WOW from 'wowjs'
mounted() { new WOW.WOW().init() }
<template>
<div class="caselist">
<ul class="clearfix">
<li
class="wow slideInUp"
v-for="(item, index) in cases"
:key="index"
></li>
</ul>
</div>
</template>
<script type="">
import { WOW } from "wowjs";
export default {
props: ["cases"],
watch: {
cases() {
this.$nextTick(() => {
// 在dom渲染完后,再执行动画
var wow = new WOW({
live: false,
});
wow.init();
});
},
},
};
</script>
05 vuex 刷新数据消失
vuex-along
npm install vuex-along --save
export default new Vuex.Store({
plugins: [createVuexAlong()]
});vant 安装
# 通过 npm 安装
npm i vant -S
postcss 配置，
module.exports = {
plugins: {
autoprefixer: {
browsers: ['Android >= 4.0', 'iOS >= 8'],
},
'postcss-pxtorem': {
rootValue: 37.5, // vant的根比例
propList: ['*'],
},
},
};
01--vant组件的引入方式main.js 全局导入所有组件
import 'vant/lib/index.css'
Vue.use(Vant)
按需使用vant组件
import {Row, Col} from 'vant'
Vue.use(Row).use.(Col)
安装babel-plugin-import，它可以让我们按需引入组件模块.babelrc中配置plugins
"plugins": [
"transform-vue-jsx",
"transform-runtime",
["import",{"libraryName":"vant","style":true}]
]
01--vant 主题配置
官网的给的案例
// vue.config.js
module.exports = {
css: {
loaderOptions: {
less: {
// 若使用 less-loader@5，请移除 lessOptions 这一级，直接配置选项。
lessOptions: {
modifyVars: {
// 直接覆盖变量
'text-color': '#111',
'border-color': '#eee',
// 或者可以通过 less 文件覆盖（文件路径为绝对路径）
hack: `true; @import "your-less-file-path.less";`,
},
},
},
},
},
};
安照配置，照猫画虎 vue.config.js
// const myTheme = path.resolve(__dirname, 'src/styles/style.less') // less 覆盖
css: {
extract: IS_PROD,
requireModuleExtension: true, // 去掉文件名中的 .module
loaderOptions: {
// 给 less-loader 传递 Less.js 相关选项
less: {
// `globalVars` 定义全局对象，可加入全局变量
modifyVars: {
// hack: `true; @import "${myTheme}";`
// hack: `true; @import "your-less-file-path.less";`,
hack: `true; @import "${resolve('src/styles/style.less')}";`
}
}
}
},
有小伙伴没有配置vue.config.js添加内容 ,以下是没有这个vue.config.js文件新建文件方式
// const path = require("path");
// const myTheme = path.resolve(__dirname, "src/assets/style/myTheme.less");
// module.exports = {
// css: {
// loaderOptions: {
// less: {
// // 若使用 less-loader@5，请移除 lessOptions 这一级，直接配置选项。
// lessOptions: {
// modifyVars: {
// // 直接覆盖变量
// 'text-color': '#111',
// 'border-color': '#eee',
// // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
// hack: `true; @import "your-less-file-path.less";`,
// },
// },
// },
// },
// },
// pluginOptions: {
// 'style-resources-loader': {
// preProcessor: 'less',
// patterns: [
// path.resolve(__dirname, './src/styles/style.less'),
// ],
// },
// },
// };
更新需要vue.config.js文件
// vue.config.js
const path = require('path')
const CompressionWebpackPlugin = require('compression-webpack-plugin') // 开启gzip压缩， 按需引用
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i // 开启gzip压缩， 按需写入
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin // 打包分析
// const myTheme = path.resolve(__dirname, 'src/styles/style.less') // less 覆盖
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
const resolve = (dir) => path.join(__dirname, dir)
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/site/vue-demo/' : '/', // 公共路径
indexPath: 'index.html', // 相对于打包路径index.html的路径
outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
assetsDir: 'static', // 相对于outputDir的静态资源(js、css、img、fonts)目录
lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
productionSourceMap: !IS_PROD, // 生产环境的 source map
parallel: require('os').cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
pwa: {}, // 向 PWA 插件传递选项。
chainWebpack: config => {
config.resolve.symlinks(true) // 修复热更新失效
// 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中
config.plugin('html').tap(args => {
// 修复 Lazy loading routes Error
args[0].chunksSortMode = 'none'
return args
})
config.resolve.alias // 添加别名
.set('@', resolve('src'))
.set('@assets', resolve('src/assets'))
.set('@components', resolve('src/components'))
.set('@views', resolve('src/views'))
.set('@store', resolve('src/store'))
// 压缩图片
// 需要 npm i -D image-webpack-loader
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
mozjpeg: { progressive: true, quality: 65 },
optipng: { enabled: false },
pngquant: { quality: [0.65, 0.9], speed: 4 },
gifsicle: { interlaced: false },
webp: { quality: 75 }
})
// 打包分析
// 打包之后自动生成一个名叫report.html文件(可忽视)
if (IS_PROD) {
config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
{
analyzerMode: 'static'
}
])
}
},
configureWebpack: config => {
// 开启 gzip 压缩
// 需要 npm i -D compression-webpack-plugin
const plugins = []
if (IS_PROD) {
plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 10240,
minRatio: 0.8
})
)
}
config.plugins = [...config.plugins, ...plugins]
},
css: {
extract: IS_PROD,
requireModuleExtension: true, // 去掉文件名中的 .module
loaderOptions: {
// 给 less-loader 传递 Less.js 相关选项
less: {
// `globalVars` 定义全局对象，可加入全局变量
modifyVars: {
// hack: `true; @import "${myTheme}";`
// hack: `true; @import "your-less-file-path.less";`,
hack: `true; @import "${resolve('src/styles/style.less')}";`
}
}
}
},
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
path.resolve(__dirname, './src/styles/MyStyle.less')
// 'D:\\code\\我的仓库\\blog\\src\\styles\\MyStyle.less'
]
}
},
devServer: {
overlay: { // 让浏览器 overlay 同时显示警告和错误
warnings: true,
errors: true
},
host: 'localhost',
port: 8080, // 端口号
https: false, // https:{type:Boolean}
open: false, // 配置自动启动浏览器
hotOnly: true, // 热更新
// proxy: 'http://localhost:8080' // 配置跨域处理,只有一个代理
proxy: { // 配置多个跨域
'/api': {
target: 'http://172.11.11.11:7071',
changeOrigin: true,
// ws: true,//websocket支持
secure: false,
pathRewrite: {
'^/api': '/'
}
},
'/api2': {
target: 'http://172.12.12.12:2018',
changeOrigin: true,
// ws: true,//websocket支持
secure: false,
pathRewrite: {
'^/api2': '/'
}
}
}
}
}代码块
ios默认盒子模型为content-box；而安卓和谷歌是border-box。
解决方法：给input设置box-sizing:border-box;(或者content-box)
在webapp上使用input:file, 指定capture属性调用默认相机，摄像，录音功能
<input type="file" accept="image/*" capture="camera">
背景居中
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
块居右
display: flex;
justify-content: flex-end;
vuex 的使用store-index.vue
//状态数据
state: {
alldata: [],
},
mutations: {
alldata(state, res) {
state.alldata = res;
console.log(state.alldata.data);
},
},
actions: {
// 全部数据
alldata(context) {
axios
.post("controllers/mainpage_ajax.php", { action: "getCases" })
.then(res => {
context.commit("alldata", res);
});
},
}
在使用的页面进行
created() {
// 方法一
this.$store.dispatch("alldata");
}
//方法二
created() {
this.alldata();
}
methods: {
...mapActions(["alldata"]),
}
// 方法三
// 方法四
vuex刷新消失问题
在mian.js中使用
//刷新保存状态
if (sessionStorage.getItem("store")) {
store.replaceState(
Object.assign(
{},
store.state,
JSON.parse(sessionStorage.getItem("store"))
)
);
sessionStorage.removeItem("store")
}
//监听，在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("store", JSON.stringify(store.state));
});
页面跳转 不记录地址位置，苹果下导航栏与ui图不一同
this.$router.replace("customer_selector");vue 消息组件
CustToast.vue
<!--
* @Descripttion: 消息提醒框
* @version: v0.2
* @@Company: DCIT-SH
* @Author: Oneself
* @Date: 2020-09-28 13:01:39
* @LastEditors: Oneself
* @LastEditTime: 2020-11-16 10:25:43
* @Statu: TODO: 挂载在min.js
-->
<template>
<div class="CustToast" :class="type" v-if="showToast">
<span class="icon">
<img :src="iconSrc" />
</span>
{{ message }}
</div>
</template>
<script>
export default {
/**
* Toast v0.2
* params: showToast Boolean 是否激活toast 默认 false
* params: type String toast提示类型 共normal success，fail，warning 四个选项 默认normal
* params: message String toast消息
* params: duration Number toast显示时间 默认 3000ms
* */
name: "CustToast",
data() {
return {
showToast: true,
type: "normal",
message: "消息提示",
duration: 3000,
};
},
computed: {
iconSrc() {
window.console.log("当前类型", this.type);
let tipType = ["normal", "success", "warning", "fail"];
if (tipType.includes(this.type)) {
return require(`@/assets/heart.png`);
} else {
throw "Toast type数据只允许为 normal, success, warning, fail 四种其中的一种，默认为normal";
}
},
},
};
</script>
<style scoped>
.CustToast {
position: fixed;
left: 50%;
top: 50%;
background: rgb(233, 233, 235);
padding: 10px;
border-radius: 5px;
transform: translate(-50%, -50%);
animation: show-toast 0.2s;
color: #909399;
overflow: hidden;
display: flex;
align-items: center;
}
@keyframes show-toast {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.success {
color: #67c23a;
background: rgb(225, 243, 216);
}
.warning {
color: #e6a23c;
background: rgb(250, 236, 216);
}
.fail {
color: #f56c6c;
background: rgb(253, 226, 226);
}
.icon img {
width: 20px;
height: 20px;
margin-top: 3px;
margin-right: 4px;
}
</style>
index.js
/*
* @Descripttion:
* @version: v.20
* @@Company: DCIT-SH
* @Author: Oneself
* @Date: 2020-09-28 13:05:15
* @LastEditors: Oneself
* @LastEditTime: 2020-11-16 10:30:07
* @Statu: TODO:
*/
import vue from "vue";
// 导入自定义到Toast组件
import CustToast from "./CustToast.vue";
// 生成一个扩展实例构造器
const ToastConstructor = vue.extend(CustToast);
// 定义弹出组件的函数 接收三个参数 消息 toast类型 显示时间
function showToast(message, type = "normal", duration = 2000) {
// 实例化一个 CustToast.vue
const _toast = new ToastConstructor({
data() {
return {
showToast: true,
type: type,
message: message,
duration: duration
};
}
});
// 把实例化的 CustToast.vue 添加到 body 里
let element = _toast.$mount().$el;
document.body.appendChild(element);
// duration时间到了后隐藏
setTimeout(() => {
_toast.showToast = false;
}, duration);
}
// 需要在main.js 里面使用 Vue.use(showToast);
showToast.install = Vue => {
// 将组件注册到 vue 的 原型链里去,
// 这样就可以在所有 vue 的实例里面使用 this.$toast()
Vue.prototype.$toast = showToast;
};
// 导出
export default showToast;
// // message, type="normal", duration = 2000
// this.$toast("测试普通")
// this.$toast("测试成功", "success", 5000)
// this.$toast("测试警告", "warning")
// this.$toast("测试失败", "fail")
vue+element 上传图片并交换位置
<!--
* @Descripttion:
* @version:
* @@Company: DCIT-SH
* @Author: Oneself
* @Date: 2020-11-19 11:45:17
* @LastEditors: Oneself
* @LastEditTime: 2020-11-19 17:28:44
* @Statu: TODO: 上传数据 imges
-->
<!--
-->
<template>
<div id="cs">
<el-upload
list-type="picture-card"
:auto-upload="false"
ref="upload"
action=""
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:on-change="onUploadChange"
>
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{ file }">
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleDownload(file)"
>
<i class="el-icon-download"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</div>
</template>
<script>
// 导入的其他文件 例如：import moduleName from 'modulePath';
export default {
//import所引入的组件注册
name: "cs",
components: {},
props: {},
data() {
return {
fileList: [
{
name: "food.jpeg",
url:
"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
},
],
dialogImageUrl: "",
dialogVisible: false,
disabled: false,
tableData: [1, 2, 3],
};
},
//监听属性
computed: {},
//监控data中的数据变化
watch: {
fl() {},
},
//方法集合
methods: {
// 图片预览
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
// 图片 交换
handleDownload(file, fileList) {
console.log(file,'kkkkkkk');
console.log(this.fileList, "fileList地址");
if (this.fileList.length > 0 && this.fileList.length <= 2) {
this.fileList.splice(
0,
1,
...this.fileList.splice(1, 1, this.fileList[0])
);
}
console.log(this.fileList);
},
submitUpload() {
this.$refs.upload.submit();
},
// 清除图片
handleRemove(file, fileList) {
const tmp_path = file.url;
// console.log(file.url)
const index = this.fileList.findIndex(
(item) => item.fileList === tmp_path
);
// console.log(i)
this.fileList.splice(index, 1);
this.$message({
type: "info",
message: "已删除原有图片",
duration: 1000,
});
},
onUploadChange(file, fileList) {
// console.log(file, "file地址");
var reader = new FileReader();
reader.readAsDataURL(file.raw);
var than = this;
reader.onload = function (e) {
var namedata = file.name;
var indexdata = file.uid++;
than.fileList.push({
url: this.result,
name: namedata,
uid: indexdata,
});
};
// const tmp_path = file.url;
// // console.log(file.url)
// const index = this.fileList.findIndex((item) => item.fileList === tmp_path);
// console.log(index)
// console.log(than.fileList, "fileList地址");
},
handlePreview(file) {
console.log(file);
},
},
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
</style>vue中的ECharts
安装
npm install echarts --save全局注册【mian.js】
import echarts from "echarts";
Vue.prototype.$echarts = echarts;复制官方文档dom
结构
<template>
<div id="home">
<!-- 折线图 -->
<div id="chartmainline"></div>
<!-- 柱状图 -->
<div id="chartmainbar"></div>
</div>
</template>逻辑
<script>
// 导入的其他文件 例如：import moduleName from 'modulePath';
export default {
data() {
return {
optionline: {
title: {
text: "ECharts 数据统计"
},
tooltip: {},
legend: {
data: ["用户来源"]
},
xAxis: {
data: ["Android", "IOS", "PC", "Ohter"]
},
yAxis: {},
series: [
{
name: "访问量",
type: "line", //设置图表主题
data: [500, 200, 360, 100]
}
]
},
optionbar: {
title: {
text: "ECharts 数据统计"
},
tooltip: {},
legend: {
data: ["用户来源"]
},
xAxis: {
data: ["Android", "IOS", "PC", "Ohter"]
},
yAxis: {},
series: [
{
name: "访问量",
type: "bar", //设置图表主题
data: [500, 200, 360, 100]
}
]
}
};
},
mounted() {
this.drawLine();
window.addEventListener("resize", function() {
myChart.resize();
});
},
methods: {
drawLine: function() {
//基于准本好的DOM，初始化echarts实例
let chartmainline = this.$echarts.init(
document.getElementById("chartmainline")
);
let chartmainbar = this.$echarts.init(
document.getElementById("chartmainbar")
);
//绘制图表
chartmainline.setOption(this.optionline);
chartmainbar.setOption(this.optionbar);
}
}
};
</script>样式
<style lang="less" scoped>
#home {
width: 200px;
#chartmainline {
width: 50%;
height: 95px;
}
#chartmainbar {
width: 50%;
height: 95px;
}
}
</style>有个刚毕业的小伙伴说echarts文档写的很垃圾，不知道如何入手，我真的是，唉有吐槽时候不如去多看看那，
首先：我们要将这个数据转化为图表，就是分成数据，和转换方法，chartmainline.setOption: || 绘制图表 （this.optionline）|| 就是数据
01vue动态添加类
<li
class="liImges"
v-for="(item, index) in swiperList"
:key="index"
@click="getliImges(item.id, index)"
>
<img :src="item.imgUrl" />
<div class="icon" :class="{ active: index == isActive }" ></div>
</li>
--data--
isActive: 0,
-- methods--
this.isActive = index
--less--
.active{
background-image: url('../../assets/receive/butom5.png');
background-size: 100% 100%;
}02 vue 蒙版类
<div class="mask" v-show="showmask">
<span class="PopUp">加载中.... </span>
</div>
-- data --
showmask: false,
-- lesss--
.mask {
width: 100%;
height: 100%;
background-color: #000;
z-index: 9999;
position: fixed;
filter: alpha(opacity=60);
opacity: 0.6 !important;
.PopUp {
// position: fixed;
color: #fff;
font-weight: 600;
font-size: 40px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
03 vue 多次点击
<template>
<button @click="submit()" :disabled="isDisable">点击</button>
</template>
<script>
export default {
name: 'TestButton',
data: function () {
return {
isDisable: false
}
},
methods: {
submit() {
this.isDisable = true
setTimeout(() => {
this.isDisable = false
}, 1000)
}
},
}
</script>
阅读建议
评论
匿名评论
隐私政策
你无需删除空行，直接评论以获取最佳展示效果