之前写项目经常会碰到某个组件需要禁用的要求,之前一直会用一个变量来代替保存按钮的点击状态,今天才发现css3新出的一个属性,顺便试了试
最近刚好在研究vue,直接以vue为案列吧
以前的的方法:
//html
<div class="btn" @click="click()">快来点击我</div>
//js
data:{
isclick: 0,
}
//通过设置一个变量来判断按钮是否执行点击事件的操作(这种方法实际上按钮是可以点击只是阻止了事件的操作)
click() {
var that = this;
if (that.isclick == 1) return;
setTimeout(() => {
that.isclick = 1;
}, 1000);
}
动态添加属性来设置组件禁用
//html
<div class="btn" @click="click()" :class="isclick==1?'disable':''">快来点击我</div>
//css
.btn.disable {
pointer-events: none;
}
//js
data:{
isclick:0,
}
// 添加属性的方法
click() {
console.log("可点击,1秒之后之后禁止点击");
var that = this;
setTimeout(() => {
that.isclick = 1;
}, 1000);
},