|
|
@ -37,20 +37,13 @@
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
import ACol from 'ant-design-vue/es/grid/Col'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
name: 'JModal',
|
|
|
|
name: 'JModal',
|
|
|
|
components: { ACol },
|
|
|
|
|
|
|
|
props: {
|
|
|
|
props: {
|
|
|
|
title: String,
|
|
|
|
title: String,
|
|
|
|
// 可使用 .sync 修饰符
|
|
|
|
// 可使用 .sync 修饰符
|
|
|
|
visible: Boolean,
|
|
|
|
visible: Boolean,
|
|
|
|
// 是否在弹出时禁止 body 滚动
|
|
|
|
|
|
|
|
lockScroll: {
|
|
|
|
|
|
|
|
type: Boolean,
|
|
|
|
|
|
|
|
default: true
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
// 是否全屏弹窗,当全屏时无论如何都会禁止 body 滚动。可使用 .sync 修饰符
|
|
|
|
// 是否全屏弹窗,当全屏时无论如何都会禁止 body 滚动。可使用 .sync 修饰符
|
|
|
|
fullscreen: {
|
|
|
|
fullscreen: {
|
|
|
|
type: Boolean,
|
|
|
|
type: Boolean,
|
|
|
@ -66,11 +59,8 @@
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
// 内部使用的 slots ,不再处理
|
|
|
|
// 内部使用的 slots ,不再处理
|
|
|
|
usedSlots: ['title'],
|
|
|
|
usedSlots: ['title'],
|
|
|
|
|
|
|
|
// 实际控制是否全屏的参数
|
|
|
|
// 缓存 body 的 overflow
|
|
|
|
|
|
|
|
bodyOverflowCache: '',
|
|
|
|
|
|
|
|
innerFullscreen: this.fullscreen,
|
|
|
|
innerFullscreen: this.fullscreen,
|
|
|
|
fullscreenButtonIcon: 'fullscreen-exit',
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
computed: {
|
|
|
@ -98,24 +88,16 @@
|
|
|
|
allSlotsKeys() {
|
|
|
|
allSlotsKeys() {
|
|
|
|
return this.slotsKeys.concat(this.scopedSlotsKeys)
|
|
|
|
return this.slotsKeys.concat(this.scopedSlotsKeys)
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// 是否锁定body滚动
|
|
|
|
// 切换全屏的按钮图标
|
|
|
|
lockBodyScroll() {
|
|
|
|
fullscreenButtonIcon() {
|
|
|
|
return this.lockScroll || this.innerFullscreen
|
|
|
|
return this.innerFullscreen ? 'fullscreen' : 'fullscreen-exit'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
watch: {
|
|
|
|
visible() {
|
|
|
|
visible() {
|
|
|
|
if (this.visible) {
|
|
|
|
if (this.visible) {
|
|
|
|
this.innerFullscreen = this.fullscreen
|
|
|
|
this.innerFullscreen = this.fullscreen
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (this.lockBodyScroll) {
|
|
|
|
|
|
|
|
if (this.visible) {
|
|
|
|
|
|
|
|
this.bodyOverflowCache = document.body.style.overflow
|
|
|
|
|
|
|
|
document.body.style.overflow = 'hidden'
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
document.body.style.overflow = this.bodyOverflowCache
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
innerFullscreen(val) {
|
|
|
|
innerFullscreen(val) {
|
|
|
|
this.$emit('update:fullscreen', val)
|
|
|
|
this.$emit('update:fullscreen', val)
|
|
|
@ -134,12 +116,8 @@
|
|
|
|
this.close()
|
|
|
|
this.close()
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** 切换全屏 */
|
|
|
|
toggleFullscreen() {
|
|
|
|
toggleFullscreen() {
|
|
|
|
if (this.innerFullscreen) {
|
|
|
|
|
|
|
|
this.fullscreenButtonIcon = 'fullscreen'
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
this.fullscreenButtonIcon = 'fullscreen-exit'
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
this.innerFullscreen = !this.innerFullscreen
|
|
|
|
this.innerFullscreen = !this.innerFullscreen
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|