JxlDialog 对话框
在保留当前页面状态的情况下，告知用户并承载相关操作。
基于 ElementUI 的 el-dialog 和 el-button 标签封装。
<template>
<el-dialog
:visible="visible"
:width="width"
:top="top"
:center="center"
:modal="modal"
class="jxl-dialog__wrapper"
:fullscreen="fullscreen"
:lock-scroll="lockScroll"
:modal-append-to-body="modalAppendToBody"
:append-to-body="appendToBody"
:custom-class="customClassList"
:close-on-click-modal="closeOnClickModal"
:close-on-press-escape="closeOnPressEscape"
:show-close="showClose"
:destroy-on-close="destroyOnClose"
v-bind="$attrs"
v-on="$listeners"
>
<template v-if="$scopedSlots['title'] || title" v-slot:title>
<div class="jxl-dialog__header" :style="headerStyle" :class="headerCustomClass">
<slot name="title">{{ title }}</slot>
</div>
</template>
<div class="jxl-dialog__body" :style="bodyStyle" :class="bodyCustomClass">
<slot />
</div>
<template v-if="$scopedSlots['footer'] || footer" v-slot:footer>
<div class="jxl-dialog__footer" :style="footerStyle" :class="footerCustomClass">
<slot name="footer">
<el-button v-if="showCancel" @click="cancelHandle">{{ cancelText }}</el-button>
<el-button type="primary" @click="confirmHandle">{{ confirmText }}</el-button>
</slot>
</div>
</template>
</el-dialog>
</template>
<script>
/**
* JxlDialog 对话框
* 在保留当前页面状态的情况下，告知用户并承载相关操作。
* 基于 Element UI 的 el-dialog 组件封装。
*/
export default {
name: 'JxlDialog',
model: {
prop: 'visible'
},
props: {
/**
* 是否显示 Dialog
* 支持 .sync 修饰符
* 可用 v-model 绑定值
*/
visible: {
type: Boolean,
default: false
},
/**
* Dialog 的标题
* 也可通过具名 slot（见下表）传入
*/
title: {
type: String,
default: ''
},
/**
* 是否显示 Dialog 的底部
* 可通过具名 slot（见下表）传入
*/
footer: {
type: [String, Boolean],
default: true
},
/**
* 是否显示取消的文本内容
*/
showCancel: {
type: Boolean,
default: true
},
/**
* 取消的文本内容
*/
cancelText: {
type: String,
default: '取消'
},
/**
* 确定的文本内容
*/
confirmText: {
type: String,
default: '确定'
},
/**
* Dialog 的宽度
*/
width: {
type: String,
default: '50%'
},
/**
* 是否为全屏 Dialog
*/
fullscreen: {
type: Boolean,
default: false
},
/**
* Dialog CSS 中的 margin-top 值
*/
top: {
type: String,
default: '15vh'
},
/**
* 是否对头部和底部采用居中布局
*/
center: {
type: Boolean,
default: false
},
/**
* 是否需要遮罩层
*/
modal: {
type: Boolean,
default: true
},
/**
* 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上
*/
modalAppendToBody: {
type: Boolean,
default: true
},
/**
* Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true
*/
appendToBody: {
type: Boolean,
default: true
},
/**
* 是否在 Dialog 出现时将 body 滚动锁定
*/
lockScroll: {
type: Boolean,
default: true
},
/**
* Dialog 的自定义类名
*/
customClass: {
type: String,
default: ''
},
/**
* Dialog Header 的自定义类名
*/
headerCustomClass: {
type: String,
default: ''
},
/**
* Dialog Body 的自定义类名
*/
bodyCustomClass: {
type: String,
default: ''
},
/**
* Dialog Footer 的自定义类名
*/
footerCustomClass: {
type: String,
default: ''
},
/**
* 是否可以通过点击 modal 关闭 Dialog
*/
closeOnClickModal: {
type: Boolean,
default: true
},
/**
* 是否可以通过按下 ESC 关闭 Dialog
*/
closeOnPressEscape: {
type: Boolean,
default: true
},
/**
* 是否显示关闭按钮
*/
showClose: {
type: Boolean,
default: true
},
/**
* 关闭时销毁 Dialog 中的元素
*/
destroyOnClose: {
type: Boolean,
default: false
},
/**
* 设置 header 的样式
*/
headerStyle: {
type: Object,
default: () => {
return {}
}
},
/**
* 设置 body 的样式
*/
bodyStyle: {
type: Object,
default: () => {
return {}
}
},
/**
* 设置 footer 的样式
*/
footerStyle: {
type: Object,
default: () => {
return {}
}
},
/**
* 关闭前的回调，会暂停 Dialog 的关闭
*/
beforeClose: {
type: Function,
default: () => {}
},
/**
* 设置 弹框取消的回调
*/
cancel: {
type: Function,
default: () => {}
},
/**
* 设置 弹框确认的回调
*/
confirm: {
type: Function,
default: () => {}
},
/**
* Dialog 打开的回调
*/
open: {
type: Function,
default: () => {}
},
/**
* Dialog 打开动画结束时的回调
*/
opened: {
type: Function,
default: () => {}
},
/**
* Dialog 关闭的回调
*/
close: {
type: Function,
default: () => {}
},
/**
* Dialog 关闭动画结束时的回调
*/
closed: {
type: Function,
default: () => {}
}
},
computed: {
/**
* 自定义类列表
* @returns {string}
*/
customClassList() {
const arr = ['jxl-dialog']
if (this.customClass) {
arr.push(this.customClass)
}
return arr.join(' ')
}
},
methods: {
/**
* 取消处理
*/
cancelHandle() {
this.$emit('cancel') // 取消回调
},
/**
* 确定处理
*/
confirmHandle() {
this.$emit('confirm') // 确认回调
}
}
}
</script>
<style lang="less" scoped>
/deep/ .el-dialog {
overflow: hidden;
.el-dialog__header {
padding: 0;
color: #000000d9;
background: transparent;
border-bottom: none;
border-radius: 0;
.jxl-dialog__header {
padding: 16px 24px;
color: #000000d9;
background: #fff;
border-bottom: 1px solid rgba(0, 0, 0, .06);
border-radius: 2px 2px 0 0;
}
.el-dialog__headerbtn {
.el-dialog__close {
color: #909399;
}
&:hover {
.el-dialog__close {
color: #ff4d4f;
}
}
}
}
.el-dialog__body {
padding: 0;
background: transparent;
box-shadow: none;
.jxl-dialog__body {
background-color: #fff;
padding: 24px;
}
}
.el-dialog__footer {
padding: 0;
background: transparent;
border: none;
.jxl-dialog__footer {
text-align: right;
padding: 10px 16px;
background: #fff;
border-top: 1px solid rgba(0, 0, 0, .06);
border-radius: 0 0 2px 2px;
.el-button {
height: 32px;
border-radius: 2px;
}
.el-button + .el-button {
margin-left: 12px;
}
}
}
&.el-dialog--center {
.el-dialog__header {
.jxl-dialog__header {
text-align: center;
}
}
.el-dialog__footer {
.jxl-dialog__footer {
text-align: center;
}
}
}
}
</style>
