前言:在日常开发时有时一个页面需要弹出很多个不同的弹出框,如果全都堆在一个页面里会非常累赘且不可复用。需要写一个可以适应不同展示内容的dialog组件。
一、先看一下文件的位置
1、index.vue是主页面,components与index.vue并列;
2、components里面放组件代码,dialog.vue写一些通用的,dialogForm里面放不同的展示内容
二、上index.vue代码:
<template>
<div style="padding: 30px">
<el-button type="primary" @click="clickFn('gongji')">攻击</el-button>
<el-button type="primary" @click="clickFn('bingdu')">病毒</el-button>
<Dialog
:component-name="componentName"
:dialog-visible="dialogVisibleData"
:dialog-title="dialogTitleEdit"
:dialog-data="dialogData"
@queryList="listQueryFn"
@closeDialog="dialogVisibleData = false"
/>
</div>
</template>
<script>
import Dialog from "./components/dialog.vue";
export default {
components: {
Dialog,
},
data() {
return {
componentName: "",
dialogVisibleData: false,
dialogTitleEdit: "",
dialogData: {},
};
},
methods: {
listQueryFn() {},
clickFn(componentName) {
this.componentName = componentName;
if (componentName == "gongji") {
this.dialogTitleEdit = "攻击";
this.dialogData = {
gj1: 1111,
gj2: 22222,
};
} else if (componentName == "bingdu") {
this.dialogTitleEdit = "病毒";
this.dialogData = {
bd1: 1111,
bd2: 22222,
};
}
this.$nextTick(() => {
this.dialogVisibleData = true;
});
},
},
};
</script>
1、两个按钮分别要弹出攻击和病毒的dialog,需要引入写的dialog组件
三、dialog.vue代码:
<template>
<el-dialog :visible.sync="formVisible" :title="dialogTitle" width="40%" @close="closeDialog">
<component
:is="componentName"
ref="network"
:dialog-data="dialogData"
:dialog-title="dialogTitle"
></component>
<span
v-if="componentName !== 'detail' && dialogTitle != 'hhhhhhhh'"
slot="footer"
class="dialog-footer"
>
<el-button @click="closeDialog">取 消</el-button>
<el-button type="primary" @click.native="sureSubmit">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import bingdu from "./dialogForm/bingdu.vue";
import gongji from "./dialogForm/gongji.vue";
export default {
components: {
bingdu,
gongji,
},
props: {
componentName: {
type: String,
default: "",
},
dialogVisible: {
type: Boolean,
default: false,
},
dialogData: {
type: Object,
default: () => {
return {};
},
},
selectList: {
type: Array,
default: () => {
return [];
},
},
dialogTitle: {
type: String,
default: "",
},
},
computed: {
formVisible: {
get: function () {
return this.dialogVisible;
},
set: function () {
this.closeDialog();
},
},
},
methods: {
sureSubmit() {
this.$emit("queryList");
this.closeDialog();
},
closeDialog() {
this.$emit("closeDialog");
},
},
};
</script>
<style>
</style>
1、这里就需要引入你想要展示的不同内容的组件(bingdu.vue和gongji.vue)
2、footer的插槽不是在任何时候都显示,可以按情况更改
注:computed中有get和set方法,在默认的情况下只有get方法
扫描二维码关注公众号,回复:
15452030 查看本文章
1.get方法是取,相当于我们可以在get中给这个计算属性中的变量赋值
2.set方法是改变时触发,这里的改变指的是当我们在computed中定义的变量的值发生改变是,会触发set方法,这样我们就可以在set方法中进行一些我们想要做的操作
四、
bingdu.vue代码:
<template>
<div>
{
{ dialogData.bd2 }}
<div>这是病毒的dialog</div>
</div>
</template>
<script>
export default {
props: {
dialogData: {
type: Object,
default: () => {
return {};
},
},
},
};
</script>
<style>
</style>
gongji.vue代码:
<template>
<div>
{
{ dialogData.gj1 }}
<hr />
<div>这是攻击的dialog</div>
</div>
</template>
<script>
export default {
props: {
dialogData: {
type: Object,
default: () => {
return {};
},
},
},
};
</script>
<style>
</style>
五、最终效果:
点攻击的按钮:
点病毒的按钮: