Preface: In daily development, sometimes a page needs to pop up many different pop-up boxes. If they are all piled up in one page, it will be very cumbersome and not reusable. Need to write a dialog component that can adapt to different display content.
First, look at the location of the file
1. index.vue is the main page, and components and index.vue are juxtaposed;
2. Put component code in components, write some common ones in dialog.vue, and put different display content in dialogForm
Second, the index.vue code:
<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. The two buttons need to pop up the attack and virus dialogs respectively, and the written dialog components need to be introduced
Three, dialog.vue code:
<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. Here you need to introduce the components of different content you want to display (bingdu.vue and gongji.vue)
2. The slot of the footer is not displayed at any time, it can be changed according to the situation
Note : There are get and set methods in computed, and there is only get method by default
1. The get method is to fetch, which is equivalent to that we can assign a value to the variable in this computed attribute in get.
2. The set method is triggered when the change occurs. The change here refers to when the value of the variable we defined in computed changes. , will trigger the set method, so that we can perform some operations we want to do in the set method
Four,
bingdu.vue code:
<template>
<div>
{
{ dialogData.bd2 }}
<div>这是病毒的dialog</div>
</div>
</template>
<script>
export default {
props: {
dialogData: {
type: Object,
default: () => {
return {};
},
},
},
};
</script>
<style>
</style>gongji.vue generation:
<template>
<div>
{
{ dialogData.gj1 }}
<hr />
<div>这是攻击的dialog</div>
</div>
</template>
<script>
export default {
props: {
dialogData: {
type: Object,
default: () => {
return {};
},
},
},
};
</script>
<style>
</style>Five, the final effect:
Click the attack button:
Click the virus button:
