<!--
 * @Author: Guanghao
 * @Date: 2022-01-04 17:18:23
 * @LastEditors: Guanghao
 * @LastEditTime: 2022-01-05 15:47:30
 * @Description: 弹框组件，
        直接使用方式：
              <Dialog title="" visible="">
                要写入的内容
              </Dialog>
        当页面不是直接使用时应采取以下方式（比如新建/编辑框）：
              <Dialog v-bind="$attrs" v-on="$listeners" @on-confirm.native="">
                要写入的内容
              </Dialog>
-->

<template>
  <el-dialog :title="title" :visible="visible" :width="width">
    <!-- 内容 -->
    <slot />

    <!-- 底部按钮 -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:visible', false)">取 消</el-button>
      <el-button type="primary" @click="$emit('on-confirm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "Dialog",

  props: {
    visible: { type: Boolean, required: true }, // 是否显示弹框
    title: { type: String, required: true }, // 弹框标题
    width: { type: String, default: "30%" }, // 弹框宽度，格式：30%、30px
  },

  created() {
    console.log(this.$props);
  },
};
</script>

<style>
</style>
