Vue使用自定义指令打开dialog的实现方法
作者：风吹叶不飘被占用了
在web后台管理项目中,经常要用到dialog,就vue来说,使用方式则是引入组件,注册,在template中使用,试想一下,如果我们需要在项目中的不同.vue文件中使用该dialog,但是又不想每次都在template中写入组件该如何实现呢？本文我们介绍用指令控制dialog,需要的朋友可以参考下
完整代码见：https://codesandbox.io/
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>
效果图示：
到此这篇关于Vue使用自定义指令打开dialog的实现方法的文章就介绍到这了,更多相关Vue打开dialog内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！