使用vue封装一个el-dailog组件

下面是一个简单的示例代码：

<template>
  <div class="dialog-mask" v-show="visible">
    <div class="dialog">
      <div class="dialog-header">{{ title }}</div>
      <div class="dialog-body">
        <slot></slot>
      </div>
      <div class="dialog-footer">
        <button class="cancel-btn" @click="handleCancel">取消</button>
        <button class="confirm-btn" @click="handleConfirm">确认</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '提示'
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleCancel() {
      this.$emit('update:visible', false);
      this.$emit('cancel');
    },
    handleConfirm() {
      this.$emit('update:visible', false);
      this.$emit('confirm');
    }
  }
}
</script>

<style>
.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  background: #fff;
  border-radius: 4px;
}

.dialog-header {
  padding: 10px 20px;
  font-weight: bold;
  font-size: 16px;
  border-bottom: 1px solid #eee;
}

.dialog-body {
  padding: 20px;
}

.dialog-footer {
  padding: 10px 20px;
  text-align: right;
}

.cancel-btn {
  margin-right: 10px;
}

.confirm-btn {
  background: #1890ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
}
</style>

使用示例：

<template>
  <div>
    <button @click="visible = true">打开对话框</button>
    <el-dialog :visible.sync="visible" @confirm="handleConfirm" @cancel="handleCancel">
      <p>这是一个提示对话框</p>
    </el-dialog>
  </div>
</template>

<script>
import ElDialog from './ElDialog.vue'

export default {
  components: {
    ElDialog
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    handleConfirm() {
      console.log('点击了确认按钮')
    },
    handleCancel() {
      console.log('点击了取消按钮')
    }
  }
}
</script>