鼠标禁用样式（cursor:not-allowed）和鼠标禁用事件（pointer-events: none)

原理

1、 鼠标禁用样式

cursor: not-allowed;
该方法只能实现样式上的不可点击，点击依然会触发相应的点击事件。

2、鼠标禁用事件

pointer-events: none;
该样式会阻止默认事件，但是鼠标样式会变成箭头的样子。

解决方法

解决办法1

外层添加一个盒子将样式分开：
外层盒子使用cursor: not-allowed;
内部盒子使用pointer-events:none;

<div class="right_bottom_disable" v-if="a100pObj.ifBuy == 4">
      <div>已参加</div>
  </div>

.right_bottom_disable {
    width: 275px;
    height: 34px;
    line-height: 34px;
    background: #9BC3FF;
    font-size: 16px;
    color: #FFFFFF;
    text-align: center;
    cursor: not-allowed;
    div {
        pointer-events: none;
    }
}

解决办法2

使用cursor: not-allowed;然后执行点击事件，在点击事件中阻止触发。