vue使用自定义指令打开dialog

在web后台管理项目中，经常要用到dialog，就vue来说，使用方式则是引入组件，注册，在template中使用。试想一下，如果我们需要在项目中的不同.vue文件中使用该dialog，但是又不想每次都在template中写入组件该如何实现呢？本文我们介绍用指令控制dialog

完整代码见：codesandbox.io/p/sandbox/a…

1. 写一个dialog

既然要展示一个dialog，那么首先我们需要准备一个dialog，供展示用，如下：实现了一个简单的dialog，接收message和visible作为参数

<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>

2. 用自定义指令来控制dialog

弹窗有了，接下来实现个自定义指令来打开它

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);
  },
};

3. 每次渲染新的dialog

如上述代码，我们每次打开都会是一个新的弹窗，所以visible从外面传入其实没什么存在的意义，所以我们将弹窗中的内容再改造下,将visible相关的逻辑删除，dialogVisible默认为true即可。

4.使用该自定义指令

<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>

效果图示：

原文转自： https://juejin.cn/post/7389225110312468480