vue中使用了pointer-events: none的蒙层如何阻止点击事件穿透

在vue中，可以使用@click.stop.prevent事件修饰符来阻止点击事件穿透并且阻止默认行为。具体来说，当点击事件触发时，@click.stop.prevent可以阻止事件继续向上传播，并且阻止默认行为，从而避免了事件穿透的问题。

例如，假设有一个蒙层元素，其样式中设置了pointer-events: none，如下所示：

<template>
  <div class="modal" style="pointer-events: none;">
    <div class="modal-dialog">
      <!-- 模态框内容 -->
    </div>
  </div>
</template>

此时，如果我们想要阻止点击事件穿透到模态框下面的元素中，并且阻止默认行为（比如阻止链接跳转），可以在模态框的div元素上添加@click.stop.prevent事件修饰符，如下所示：

<template>
  <div class="modal" style="pointer-events: none;" @click.stop.prevent>
    <div class="modal-dialog">
      <!-- 模态框内容 -->
    </div>
  </div>
</template>

这样，在点击模态框元素时，@click.stop.prevent将阻止事件继续向上传播，并且阻止默认行为，从而避免了点击事件穿透的问题，同时也保证了模态框的正常功能。