自定义指令实现（通过自定义指令实现对操作dom）
<div class="ml-5 select-wrap">
<Button
class="select-button"
type="primary"
icon="md-arrow-dropdown"
v-click-outside="handdleHideOption"
@click="showOption = !showOption"
>已有模板</Button>
<transition name="vertical-toggle">
<ul v-show="showOption" class="select-option">
<li class="select-item" v-for="item in templateList" :key="item.id">
<span>{{ item.name }}</span>
<div
class="select-remove"
@click.stop.prevent="handleRemoveTemplate(item.id)"
>
<Icon type="md-close" />
</div>
</li>
</ul>
</transition>
</div>
directives: {
'click-outside': {
bind: function (el, binding, vnode) {
el.clickOutsideEvent = function (event) {
// 检查点击事件是否发生在元素外部
if (!(el === event.target || el.contains(event.target))) {
// 如果是，调用提供的方法
vnode.context[binding.expression](event);
}
};
document.body.addEventListener('click', el.clickOutsideEvent);
},
unbind: function (el) {
document.body.removeEventListener('click', el.clickOutsideEvent);
}
}
}