快捷導(dǎo)航

Vue使用自定義指令打開dialog的實現(xiàn)方法

更新時間：2024年07月11日 08:27:40 作者：風(fēng)吹葉不飄被占用了

在web后臺管理項目中,經(jīng)常要用到dialog,就vue來說,使用方式則是引入組件,注冊,在template中使用,試想一下,如果我們需要在項目中的不同.vue文件中使用該dialog,但是又不想每次都在template中寫入組件該如何實現(xiàn)呢？本文我們介紹用指令控制dialog,需要的朋友可以參考下

1. 寫一個dialog

既然要展示一個dialog，那么首先我們需要準(zhǔn)備一個dialog，供展示用，如下：實現(xiàn)了一個簡單的dialog，接收message和visible作為參數(shù)

<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

彈窗有了，接下來實現(xiàn)個自定義指令來打開它

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從外面?zhèn)魅肫鋵崨]什么存在的意義，所以我們將彈窗中的內(nèi)容再改造下,將visible相關(guān)的邏輯刪除，dialogVisible默認(rèn)為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>

效果圖示：