Vue3 - Element Plus 下拉菜单 el-dropdown 阻止冒泡传递到上层触发事件，解决 dropdown 下拉菜单组件被容器元素包裹时点击事件触发，会连带触发外层包裹容器的点击事件

在Vue3中，Element Plus的下拉菜单`el-dropdown`默认情况下，它的点击事件会被冒泡到其父元素，这可能导致外部容器接收到点击事件而误操作。要阻止这种冒泡，你需要利用自定义指令或者阻止事件的默认行为。

1. **使用v-model绑定**: 在`el-dropdown`上添加`@click.stop="handleClick"`，并定义`handleClick`函数来处理点击事件，同时使用`.stop`阻止事件向上冒泡：

<template>
  <el-dropdown v-model="isDropdownOpen" @click.stop>
    <span slot="trigger">点击展开</span>
    <el-dropdown-menu>
      <!-- 下拉菜单内容 -->
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  data() {
    return {
      isDropdownOpen: false,
    };
  },
  methods: {
    handleClick(e) {
      // 如果不需要进一步处理，可以置空或返回false
      e.stopPropagation();
    },
  },
};
</script>

2. **使用自定义指令**: 创建一个自定义指令如`no-bubbling`，然后在需要阻止冒泡的地方应用它：

<template>
  <el-dropdown no-bubbling @click="handleClick">
    <!-- ... -->
  </el-dropdown>
</template>

<script>
Vue.directive('noBubbling', {
  bind(el, binding, vnode) {
    el.addEventListener('click', (e) => {
      e.stopPropagation();
    });
  }
});
// 然后在组件内使用
</script>

以上两种方式都可以有效防止`el-dropdown`的点击事件传播到上一层容器，从而避免意外触发。