vue click 穿透

Vue.js的"click穿透"通常是指在使用虚拟DOM（Virtual DOM）技术的框架如Vue中，当一个元素无法直接响应点击事件（例如因为该元素设置了`pointer-events: none`或者其他阻止默认行为的样式），可以通过一层特殊的处理让点击能够传递到其父级元素并触发相应处理的情况。

在Vue中，这通常是通过自定义指令或者组件设计时解决的。比如可以创建一个`@click.capture`或`@touchstart.capture`这样的特殊事件处理器，它会捕获所有子元素的点击事件，并将它们转发给当前元素或者父组件，从而实现点击事件的穿透。

如果想在一个Vue组件内部实现click穿透，你可以这样做：

<template>
  <div class="no-pointer-events">
    <button @click="$emit('clickEvent')">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleParentClick(e) {
      // 在这里处理接收到的点击事件
      console.log('Parent clicked:', e);
    }
  },
  directives: {
    clickable: {
      inserted(el, binding) {
        el.addEventListener('click', this.handleParentClick, { passive: true });
      },
      componentUpdated() {
        el.removeEventListener('click', this.handleParentClick);
        el.addEventListener('click', this.handleParentClick, { capture: true });
      },
      unbind() {
        el.removeEventListener('click', this.handleParentClick);
      }
    }
  }
}
</script>

<style scoped>
.no-pointer-events {
  pointer-events: none;
}
</style>

在这个例子中，`.no-pointer-events`的点击会被`clickable`指令捕获并传递给`handleParentClick`方法。