在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>
效果图示: