css的pointer-events属性（禁⽌div点击）
之前写项⽬经常会碰到某个组件需要禁⽤的要求，之前⼀直会⽤⼀个变量来代替保存按钮的点击状态，今天才发现css3新出的⼀个属性，顺便试了试
最近刚好在研究vue，直接以vue为案列吧
以前的的⽅法：
//html
<div class="btn" @click="click()">快来点击我</div>
//jshtmlbutton属性
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);
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。