diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue index 806313ab9..3da68a294 100644 --- a/src/components/modal/modal.vue +++ b/src/components/modal/modal.vue @@ -7,6 +7,12 @@
+ + + + + @@ -59,7 +65,7 @@ name: 'Modal', mixins: [ Locale, ScrollbarMixins ], components: { Icon, iButton }, - emits: ['on-cancel', 'on-ok', 'on-hidden', 'on-visible-change', 'update:modelValue'], + emits: ['on-cancel', 'on-ok', 'on-hidden', 'on-visible-change', 'on-fullscreen', 'update:modelValue', 'update:fullscreenValue'], provide () { return { ModalInstance: this @@ -129,7 +135,11 @@ return !global.$VIEWUI || global.$VIEWUI.transfer === '' ? true : global.$VIEWUI.transfer; } }, - fullscreen: { + fullscreenValue: { + type: Boolean, + default: false + }, + showFullscreenIcon: { type: Boolean, default: false }, @@ -170,6 +180,7 @@ showHead: true, buttonLoading: false, visible: this.modelValue, + fullscreen: this.fullscreenValue, dragData: deepCopy(dragData), modalIndex: this.handleGetModalIndex(), // for Esc close the top modal isMouseTriggerIn: false, // #5800 @@ -253,6 +264,17 @@ return style; }, + fullscreenIconStyles () { + let style = {}; + + const styleRight = { + right: this.closable ? '44px' : '14px' + }; + + Object.assign(style, styleRight); + + return style; + }, localeOkText () { if (this.okText === undefined) { return this.t('i.modal.okText'); @@ -272,6 +294,11 @@ } }, methods: { + handleFullscreen () { + this.fullscreen = !this.fullscreen; + this.$emit('update:fullscreenValue', this.fullscreen); + this.$emit('on-fullscreen', this.fullscreen); + }, close () { if (!this.beforeClose) { return this.handleClose(); @@ -473,6 +500,11 @@ this.dragData = deepCopy(dragData); } }, + fullscreenValue (val) { + if (val === this.fullscreen) return; + this.fullscreen = val; + this.$emit('on-fullscreen', this.fullscreen); + }, loading (val) { if (!val) { this.buttonLoading = false; diff --git a/src/styles/components/modal.less b/src/styles/components/modal.less index 29deab95d..ab2d04af1 100644 --- a/src/styles/components/modal.less +++ b/src/styles/components/modal.less @@ -61,6 +61,20 @@ .content-header; } + &-fullscreen-icon { + z-index: 1; + font-size: 18px; + position: absolute; + top: 10px; + overflow: hidden; + cursor: pointer; + color: @legend-color; + transition: color @transition-time ease; + &:hover { + color: #444; + } + } + &-close { z-index: 1; .content-close(1px, 31px);