轮子-按钮防多次点击。Vue封装一个button组件
项目全局都有button,为了统一风格,方便使用,封个组件。此外还有好多组件要疯的。。。。基本的 绑定点击事件 还有一些状态判定<template><div class="button"><button :disabled="clickState"@click="onclick&
·
项目全局都有button,为了统一风格,方便使用,封个组件。此外还有好多组件要疯的。。。。
基本的 绑定点击事件 还有一些状态判定
<template>
<div class="button">
<button :disabled="clickState"
@click="onclick"
class="butt"
:class="{'butts' : !state}"
>{{title}}</button>
</div>
</template>
一些方法
<script>
export default {
name: 'Butt',
props: {
clickState: {
type: Boolean,
default: false
},
title: {
type: String,
required: true
},
state: {
type: Boolean,
default: true
}
},
data() {
return {
buttonStatus: true,
stopTime: null
}
},
methods: {
onclick() {
if (this.buttonStatus) {
this.buttonStatus = false;
this.$emit('onclick')
}
this.setButton();
},
setButton() { //添加一个定时器,点击之后延时1.5s,防二次点击后台报错
clearTimeout(this.stopTime);
this.stopTime = setTimeout(() => {
this.buttonStatus = true
}, 1500)
}
}
};
</script>
还有一些样式,自己写写
更多推荐
已为社区贡献3条内容
所有评论(0)