diff --git a/CHANGELOG.md b/CHANGELOG.md index 444c53cb0a8a4c554e048a55abd2f530b39dc277..3606025c57a98efea3cd4272d937ac0196481483 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ - 新增支持预置登录视图 - 模态打开视图工具类方法识别平台配置参数 - 更新时间范围选择器适配内容宽度超出后结束时间出省略号 +- 模态弹窗适配弹窗关闭按钮及可通过视图参数配置弹框关闭按钮与弹框遮罩是否显示 ### Change diff --git a/src/util/app-modal/app-modal-component.scss b/src/util/app-modal/app-modal-component.scss index f2492fbfba3ca187c4e3e031fd6ba21aec085969..6b3e2ce711ed34d68149a697a6411ad8d15bd0ff 100644 --- a/src/util/app-modal/app-modal-component.scss +++ b/src/util/app-modal/app-modal-component.scss @@ -10,7 +10,40 @@ $modal: ('z-index': getCssVar('z-index', 'modal'), --van-padding-md: 0; --van-dialog-radius: 0; + @include e(close) { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: getCssVar('font-size', 'header-5'); + left: getCssVar('font-size', 'header-5'); + background-color: transparent; + z-index: 1; + color: getCssVar('color-text', '3'); + font-size: getCssVar('font-size', 'header-3'); + padding: 0; + &.van-button { + border: none; + width: getCssVar('font-size', 'header-3'); + height: getCssVar('font-size', 'header-3'); + &>.van-button__content { + display: flex; + align-items: center; + justify-content: center; + } + } + } + + &.van-dialog { + overflow: visible; + } + .van-dialog__header { + padding-top: 0; + position: relative; + min-height: 1px; + } .van-dialog__content { height: 100%; + overflow: hidden; } -} \ No newline at end of file +} diff --git a/src/util/app-modal/app-modal-component.tsx b/src/util/app-modal/app-modal-component.tsx index 8192c90fc1c9c62f1a4b974c9223bf9150e1feb7..4f36892b9421f84361d2fa1fda8f379311e7c0a3 100644 --- a/src/util/app-modal/app-modal-component.tsx +++ b/src/util/app-modal/app-modal-component.tsx @@ -48,7 +48,14 @@ export const AppModalComponent = defineComponent({ } // 合并options - const options = ref({ footerHide: true, modalClass: '' }); + const options = ref({ + footerHide: true, + modalClass: '', + // 是否显示弹框关闭按钮,默认不显示 + showClose: false, + // 是否显示遮罩,默认显示 + overlay: true, + }); if (props.opts) { Object.assign(options.value, props.opts); } @@ -76,6 +83,12 @@ export const AppModalComponent = defineComponent({ isShow.value = true; }; + // 弹框关闭 + const onDialogClose = () => { + isShow.value = false; + onBeforeClose(); + }; + return { ns, isShow, @@ -86,9 +99,26 @@ export const AppModalComponent = defineComponent({ present, dismiss, onBeforeClose, + onDialogClose, }; }, render() { + const slots: IData = { + default: () => this.$slots.default?.(this.modal), + }; + if (this.options.showClose) { + slots.title = () => { + return ( + + + + ); + }; + } return ( - {this.$slots.default?.(this.modal)} + {slots} ); },