You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
2.7 KiB
114 lines
2.7 KiB
3 months ago
|
<template>
|
||
|
|
<el-dialog
|
||
|
|
:visible.sync="dialogShow"
|
||
|
|
:title="title"
|
||
|
|
:width="width"
|
||
|
|
:show-close="showCloseButton"
|
||
|
|
:before-close="handleClose"
|
||
|
|
>
|
||
|
|
<!-- 自定义内容 -->
|
||
|
|
<slot></slot>
|
||
|
|
|
||
|
|
<!-- 底部按钮 -->
|
||
|
|
<span slot="footer" class="dialog-footer flex">
|
||
|
|
<el-button v-if="showCancelButton" @click="handleCancel">{{ cancelText }}</el-button>
|
||
|
|
<el-button type="primary" @click="handleConfirm">{{ confirmText }}</el-button>
|
||
|
|
</span>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'CustomDialog',
|
||
|
|
props: {
|
||
|
|
// 控制弹框显示
|
||
|
|
dialogVisible: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
// 弹框标题
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
default: '提示',
|
||
|
|
},
|
||
|
|
// 弹框宽度
|
||
|
|
width: {
|
||
|
|
type: String,
|
||
|
|
default: '30%',
|
||
|
|
},
|
||
|
|
// 是否显示右上角关闭按钮
|
||
|
|
showCloseButton: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
// 是否显示取消按钮
|
||
|
|
showCancelButton: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
// 取消按钮文本
|
||
|
|
cancelText: {
|
||
|
|
type: String,
|
||
|
|
default: '取消',
|
||
|
|
},
|
||
|
|
// 确认按钮文本
|
||
|
|
confirmText: {
|
||
|
|
type: String,
|
||
|
|
default: '确定',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
dialogShow: {
|
||
|
|
get() {
|
||
|
|
return this.dialogVisible;
|
||
|
|
},
|
||
|
|
set(newVal) {
|
||
|
|
this.$emit('dialogVisibleChange', newVal);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
// 内部维护一个 visible 状态
|
||
|
|
internalVisible: this.visible,
|
||
|
|
// dialogVisible:false,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
// // 监听 prop 的变化，同步到 internalVisible
|
||
|
|
// visible(newVal) {
|
||
|
|
// this.internalVisible = newVal;
|
||
|
|
// },
|
||
|
|
// // 监听 internalVisible 的变化，通知父组件
|
||
|
|
// internalVisible(newVal) {
|
||
|
|
// this.$emit('update:visible', newVal);
|
||
|
|
// },
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 关闭弹框
|
||
|
|
handleClose(done) {
|
||
|
|
this.$emit('close');
|
||
|
|
this.internalVisible = false; // 关闭弹框
|
||
|
|
if(done){
|
||
|
|
done();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 点击取消按钮
|
||
|
|
handleCancel() {
|
||
|
|
this.$emit('cancel');
|
||
|
|
this.internalVisible = false; // 关闭弹框
|
||
|
|
},
|
||
|
|
// 点击确认按钮
|
||
|
|
handleConfirm() {
|
||
|
|
this.$emit('confirm');
|
||
|
|
this.internalVisible = false; // 关闭弹框
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.dialog-footer {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
</style>
|