前端工作总结149-封装一个带有对话框的button组件

<!--定义一个有按钮的对话框 相当于dialog和按钮组合使用-->
<template>
  <!-- 有按钮的对话框 这个位置的代码会被包裹过去-->
  <!--close-on-click-modal 是否可以通过点击 modal 关闭 Dialog append-to-body控制不能出现遮挡层-->
  <el-dialog
      :title="title"
      :show-close="ShowClose"
    :fullscreen="fullscreen"
    :close-on-click-modal="closeOnClickModal"
    :visible.sync="visible"
    :width="width"
    :destroy-on-close="destroyOnClose"
    @close="close"
      append-to-body
  >
    <!--向别的位置包裹代码 上面的代码会被包裹过去-->
    <slot />
    <!--定义所在插槽的按钮-->
    <div slot="footer">
      <template v-if="buttonList">
        <el-button
          v-for="(button, index) in buttonList"
          :key="index"
          :type="button.type"
          :icon="button.icon"
          @click="button.onClick"
        >
          {{ button.text }}
        </el-button>
      </template>
      <!--定义其中的确定取消按钮-->
      <template v-else>
       <!-- <el-button @click="cancel">{{ cancelButtonText }}</el-button>-->
        <el-button type="primary" @click="ok" :disabled="disabled">{{ okButtonText }}</el-button>
      </template>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "ButtonDialog",
  /*通过父子组件传值可以通过父子组件传值*/
  props: {
    /*定义一个标题*/
    title: { type: String, required: false }, // 标题
    /*是否为全屏显示*/
    fullscreen: { type: Boolean, default: false, required: false }, // 是否为全屏显示
    /*是否可以通过model关闭*/
    closeOnClickModal: { type: Boolean, default: true, required: false }, // 见 element ui 参数
    /*确定按钮显示文字*/
    okButtonText: { type: String, default: "确 定", required: false }, // 确定按钮显示文字
    /*取消按钮显示文字*/
    /*cancelButtonText: { type: String, default: "取 消", required: false }, // 取消按钮显示文字*/
    /*显示按钮显示文字*/
    buttonList: { type: Array, required: false }, // 显示按钮列表；如果设置了该参数，默认的按钮会被覆盖
    /*设置宽度*/
    width: { type: String, required: false, default: "50%" }, // 宽度
    /*关闭时候销毁dialog里的元素*/
    destroyOnClose: { type: Boolean, default: false, required: false }, // 见 element ui 参数
    /*控制按钮禁用*/
    disabled:{type:Boolean},
    /*控制是否有关闭按钮*/
    ShowClose:{type:Boolean,default:false}
  },
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    /*控制dialog的显示*/
    show() {
      this.visible = true;
    },
    /*控制dialog的关闭*/
    close() {
      this.visible = false;
      this.$emit("close");
    },
    /*控制dialog的调用父组件的方法*/
    ok() {
      this.$emit("ok");
    },
    /*控制组件调用父级的方法*/
    cancel() {
      this.$emit("cancel");
      this.close();
    }
  }
};
</script>
<style scoped></style>