vue+elementUI：如何封装dialog来适应不同展示内容

前言：在日常开发时有时一个页面需要弹出很多个不同的弹出框，如果全都堆在一个页面里会非常累赘且不可复用。需要写一个可以适应不同展示内容的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方法

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>

五、最终效果：

点攻击的按钮：

 点病毒的按钮：