使用pointer-events控制div元素的禁用状态

需求：
某个div上绑定了点击事件，在不点击button按钮的时候，div处于禁用状态（即点击事件不可触发），只有点击了button这个div才解除禁用状态。
思路：
在button点击前给div一个disabled的状态，点击后把disaled状态去掉。如果是input可以直接使用disabled属性，但是div没有这样的属性，只能另辟蹊径。
解决办法：
使用css属性pointer-events:none;来控制div的禁用状态。

pointer-events指定在什么情况下元素可以成为鼠标事件的 target，当值为none时元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。

示例代码：
style:

.disabledDiv{
  pointer-events: none;
  background-color: #F5F7FA;
}

template:

<div class="box"
  :class="!editable?'disabledDiv':''"
  @click="doSth">
</div>
<button @click="changeState">
</button>

       

script:

data(){
  return{
    editable:false
  }
},
methods:{
  changeState(){
    this.editable = true;
  },
  doSth(){
    ......
  }
}