Vue使用自定义指令打开dialog的实现方法

<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="30%"
    @close="handleClose"
  >
    <span>这是一段信息: {{ message }}</span>
  </el-dialog>
</template>

<script>
export default {
  components: {},
  props: {
    message: {
      type: String,
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  watch: {
    visible: {
      handler: function (v) {
        this.dialogVisible = v;
      },
      immediate: true,
    },
  },
  methods: {
    handleClose() {
      this.$emit("close");
    },
  },
};
</script>

<style></style>

import Popup from "../components/Popup.vue";
import Vue from "vue";
/**
 * 打开弹窗
 * @param {Object} binding
 */
const openDialog = (binding) => {
  const popupComponent = Vue.extend(Popup);
  const instance = new popupComponent({
    propsData: {
      visible: true,
      message: binding.value,
    },
  });
  instance.$mount();
  document.body.appendChild(instance.$el);
  instance.$on("close", () => {
    document.body.removeChild(instance.$el);
    instance.$destroy();
  });
};

export default {
  bind(el, binding) {
    const handler = () => {
      openDialog(binding);
    };
    el.addEventListener("click", handler);
    el._clickHandler = handler;
  },
  unbind: function (el) {
    el.removeEventListener("click", el._clickHandler);
  },
};

<template>
  <div id="app">
    <div v-popup="msg">点击打开弹窗</div>
  </div>
</template>

<script>
import popup from "./directives/popup";
export default {
  name: "App",
  directives: {
    popup,
  },
  data() {
    return {
      msg: "传递的消息",
    };
  },
};
</script>