elementui全局封装Dialog对话框组件

背景

为了更快更加方便的使用elementui的dialog对话框，将对话框进行全局封装

文件夹布局

index.vue代码

<template>
  <div class="">
    <el-dialog
      :width="width || '780px'"
      :title="title"
      :visible.sync="diaVisible"
      v-dialogDrag
      v-if="diaVisible"
      :before-close="close"
      :top="top || '15vh'"
    >
      <!-- 自定义插槽 noFooter为true的时候，不显示footer的插槽-->
      <slot name="dia_Content"></slot>
      <div
        slot="footer"
        class="dialog-footer"
        v-if="noFooter ? false : true"
      >
        <el-button size="mini" @click="cancel"> 取 消 </el-button>
        <el-button type="primary" size="mini" @click="save"> 确 定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["diaVisible", "title", "width", "noFooter","top"],
  data() {
    return {};
  },
  created() {},
  methods: {
    close() {
      this.$emit("close");
    },
    cancel() {
      this.$emit("cancel");
    },
    save() {
      this.$emit("save");
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
/deep/ .el-dialog {
  border-radius: 8px !important;
}
</style>

index.js代码

import Mydialog from './index.vue';
 
const mydialog = {
    install:function(Vue) {
        Vue.component('Mydialog', Mydialog)
    }
}
 
export default mydialog;

main.js

import mydialog from "./components/my_dialog/index";
Vue.use(mydialog);

实例

<template>
  <div class="">
      <Mydialog
      :title="dialog.Title"
      :diaVisible="dialog.isShow"
      @close="close"
      :noFooter="true"
    >
      <template #dia_Content>
		添加的内容
      </template>
    </Mydialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialog: {
        isShow: false,
        Title: "标题",
      },
    }
  }
  methods: {
    // 关闭dialog
    close() {
      this.dialog.isShow = false;
    },
    // 确定dialog
    save() {
      this.dialog.isShow = false;
    },
    // 取消dialog
    cancel() {
      this.dialog.isShow = false;
    },
  }
}
</script>

有哪里不对的地方，欢迎指出，希望对大家有帮助