vue中实现element的Popper功能

<template>
  <div class="pop-over">
    <a @click="toggleOpen" class="pop-button" href="javascript: void(0);">
      {{ buttonText }}你好呀
    </a>
    <ul v-clickoutside="close" v-show="open" class="pop-list">
      <slot><li>1</li></slot>
    </ul>
  </div>
</template>
 
<script>
export default {
  name: "PopOver",
  props: ["buttonText"],
  data() {
    return {
      open: false,
    };
  },
  methods: {
    toggleOpen: function () {
      this.open = !this.open;
    },
    close: function (e) {
      console.log("close", e.target);
      if (this.$el.contains(e.target)) return;
      this.open = false;
    },
  },
  directives: {
    clickoutside: {
      bind: function (el, binding, vnode) {
        console.log(el, binding, vnode);
        console.log(vnode.context);
        const documentHandler = function (e) {
          if (!vnode.context || el.contains(e.target)) return;
          binding.value(e);
        };

        setTimeout(() => {
          document.addEventListener("click", documentHandler);
        }, 0);
      },
    },
  },
};
</script>
 
<style scoped>
.pop-over {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: rgb(161, 16, 16);
}
.pop-button {
  position: relative;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.pop-list {
  position: absolute;
  left: 0;
  top: 0;
}
.pop-list li {
  width: 100%;
  height: 100%;
  padding: 8px 3px;
  list-style: none;
}
</style>