鼠标禁用样式(cursor: not-allowed)&鼠标禁用事件(pointer-events: none)

---

前言

当一个按钮禁用的时候，我们需要展示禁用样式，使用cursor: not-allowed，同时我们需要在禁用状态下点击按钮，是不应该触发事件的，但是我们知道只使用cursor: not-allowed，实际上我们点击按钮时还是触发了事件。接下来我们就来讨论如何实现禁用样式且无法触发事件的实现

---

一、使用cursor: not-allowed，并且使用js代码去阻止事件的触发

代码如下：

  <span class="eib-sms__suffix">
    <span class="eib-sms__suffix-inner" :class="{
            'is-disabled': timeBuild,
            'is-click': msg === '获取验证码' || msg === '重新发送',
          }" @click="getSms">
      {{ msg }}
    </span>
  </span>

  data() {
    return {
      timeBuild: false,
      msg: '获取验证码',
      timer: 60,
    }
  },
  methods:{
      getSms() {
       //使用js代码去阻止事件的触发
	    if (this.timeBuild) return
	    this.timeBuild = true
	    let time = this.timer
		let timeCodeFinish = setInterval(() => {
	      if (time == 0) {
	        this.timeBuild = false
	        this.msg = '重新发送'
	        clearInterval(timeCodeFinish)
	        return
	      }
	      time--
	      this.msg = '重新获取(' + time + 's)'
	    }, 1000)
	  },
  }

  .eib-sms__suffix {
    position: absolute;
    height: 100%;
    right: 0;
    top: 0;
    text-align: center;
    color: #c0c4cc;
    transition: all 0.3s;
    pointer-events: none;
    width: 114px;

    .eib-sms__suffix-inner {
      pointer-events: all;
      line-height: 32px;
      font-size: 14px;
      font-weight: 400;
    }

    .is-disabled {
      color: #9ba0aa;
      //使用cursor: not-allowed达到禁用样式
      cursor: not-allowed;
    }

    .is-click {
      color: #0053db;
      cursor: pointer;
    }
  }

二、使用pointer-events: none

代码如下：

    .is-disabled {
      color: #9ba0aa;
      pointer-events: none;
      cursor: not-allowed;
    }

    .is-disabled {
      color: #9ba0aa;
      pointer-events: none;
    }

没有展示禁用样式，但并不会触发事件

---

总结

以上就是今天要讲的内容，本文介绍了两种禁用事件方法的使用。