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.
131 lines
3.2 KiB
131 lines
3.2 KiB
<template>
|
|
<el-dialog
|
|
:visible.sync="dialogShow"
|
|
:title="title"
|
|
append-to-body
|
|
:width="width"
|
|
:show-close="showCloseButton"
|
|
:before-close="handleClose"
|
|
:class="type == 'center' ?'center' : 'normal'"
|
|
>
|
|
<!-- 自定义内容 -->
|
|
<slot></slot>
|
|
<!-- 底部按钮 -->
|
|
<span slot="footer" :class="[type == 'center' ? 'dialog-footer-center' : 'dialog-footer-normal', 'flex']" style="justify-content: space-between;">
|
|
<GuipButton v-if="showCancelButton" @click="handleCancel" type="ignore" >{{ cancelText }}</GuipButton>
|
|
<GuipButton type="primary" @click="handleConfirm">{{ confirmText }}</GuipButton>
|
|
</span>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import GuipButton from '@/components/GuipButton.vue';
|
|
|
|
export default {
|
|
name: 'CustomDialog',
|
|
props: {
|
|
type:{
|
|
type:String,
|
|
default:'normal'
|
|
},
|
|
// 控制弹框显示
|
|
dialogVisible: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
// 弹框标题
|
|
title: {
|
|
type: String,
|
|
default: '提示',
|
|
},
|
|
// 弹框宽度
|
|
width: {
|
|
type: String,
|
|
default: '599px',
|
|
},
|
|
// 是否显示右上角关闭按钮
|
|
showCloseButton: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
// 是否显示取消按钮
|
|
showCancelButton: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
// 取消按钮文本
|
|
cancelText: {
|
|
type: String,
|
|
default: '取消',
|
|
},
|
|
// 确认按钮文本
|
|
confirmText: {
|
|
type: String,
|
|
default: '确定',
|
|
},
|
|
},
|
|
components:{
|
|
GuipButton
|
|
},
|
|
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 lang="scss">
|
|
.el-dialog{
|
|
/* width: 599px; */
|
|
// min-height: 344px;
|
|
// .el-dialog__header{
|
|
// padding: 32px 32px 12px;
|
|
// }
|
|
// .el-dialog__body{
|
|
// padding: 0 32px 32px;
|
|
// }
|
|
}
|
|
</style>
|