Vue-Dialog（弹窗）

组件代码：

<!-- 
    * @Descripttion：弹窗组件-->
<template>
  <div class='YxkDialog'>
    <el-dialog :visible.sync="dialogObj.visible" v-bind="dataBind(dialogObj)" v-on="this.$listeners">
      <!-- 头部插槽 -->
      <template slot="title">
        <slot name="title"></slot>
      </template>
      <!-- 内容 -->
      <template>
        <slot></slot>
      </template>
      <!-- 底部 -->
      <template slot="footer">
        <template v-if="!dialogObj.hideButton">
          <el-col>
            <Button v-for="(item, index) in dialogObj.button" :params="item" :key="index">
              <template v-slot:text="scope">{{scope.text}}</template>
            </Button>
          </el-col>
        </template>
        <slot name="footer"></slot>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  // 按钮
  const Button = {
    props: {
      params: {
        type: Object
      }
    },
    render(createElement) {
      const createNode = params => {
        // ele 元素
        let ele = params.ele || 'el-button'
        // 属性
        let attrs = JSON.parse(JSON.stringify(params))
        if (attrs.text) delete attrs.text
        if (attrs.click) delete attrs.click
        let props = {
          attrs: {
            ...attrs
          },
          on: {}
        }
        // 事件
        if (params.click) {
          props.on.click = params.click
        }
        // 子元素
        let childNodes = []
        childNodes.push(this.$scopedSlots.text(params))
        return createElement(ele, props, childNodes)
      }
      return createNode(this.params)
    },
  }
  export default {
    name: 'YxkDialog',
    componentName: 'YxkDialog',
    props: {
      dialogObj: {
        type: Object,
        default: () => {return {}}
      }
    },
    components: {
      Button
    },
    data() {
      return {
        params: {}
      }
    },
    methods: {
      // v-bind
      dataBind(obj) {
        const defaultDialog = {
          width: '600px'
        }
        if (this.$slots && this.$slots.footer) obj.hideButton = true
        if (!obj.hideButton) this.buttonSet(obj)
        return Object.assign(defaultDialog, obj)
      },
      // button set
      buttonSet(obj) {
        if (!obj.button || !obj.button.length) {
          this.dialogObj.button = [{
            text: '取消',
            click: () => this.cancel()
          }, {
            text: '确定',
            type: 'primary',
            click: () => this.confirm()
          }]
          if (obj.hideConfirm) this.dialogObj.button.splice(1, 2)
          if (obj.hideCancel) this.dialogObj.button.splice(0, 1)
        }
      },
      // 提交
      confirm() {
        this.$emit('confirm')
      },
      // 取消
      cancel() {
        this.dialogObj.visible = false
        this.$emit('cancel')
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {}
  }
</script>

<style lang='scss'>
  .YxkDialog{
    .el-dialog__header{
      border-bottom: #efefef solid 1px;
    }
    .el-dialog__footer{
      .el-col{
        display: flex;
        float: none;
        justify-content: center;
        flex-wrap: wrap;
        .el-button{
          margin: 0 10px;
        }
      }
    }
    .YxkForm,.YxkTable{
      padding: 0;
    }
  }
</style>

示例：

 

 参数说明：