13-点击页面其它地方触发某个事件

自定义指令实现（通过自定义指令实现对操作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);
    }
  }
}