css实现鼠标禁止点击事件

pointer-events: none

给元素加此css属性后该元素将不响应指针事件，但它下面的元素可以响应指针事件

//可根据不同场景使用

//说一下我在项目中遇到的案例

在项目已经完善,进入项目后期的情况下,需要在很多操作按钮的地方根据某个条件添加是否要执行某个操作,并且不修改原按钮的操作逻辑

大致思路将原按钮通过插槽的方式包到一个组件中,具体思路参考如下代码

        

 <view @click="showPrivacypolicyDialog" v-if="showPrivacypolicy">
            <view class="" style="pointer-events: none;">
                <slot>
                    <!-- 放原按钮,点击触发的是父组件的事件,原按钮被包到了带有pointer-events: none;属性中,事件不会触发 -->
                </slot>
            </view>
        </view>
        <view v-else>
            <slot>
                <!-- 放原按钮,会正常按逻辑触发原按钮事件 -->
            </slot>
        </view>