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.
82 lines
3.2 KiB
82 lines
3.2 KiB
import { render, nextTick, h } from 'vue'
|
|
//@ts-ignore
|
|
import { FullScreen as IconFullScreen, Close as IconClose } from '@element-plus/icons-vue'
|
|
import { renderIcon } from '@/utils/webutils'
|
|
|
|
export default function useFullscreen(dialogEl: HTMLElement, dialogVnode: any, bindingValue: any) {
|
|
//@ts-ignore
|
|
const dialogHeaderEl: HTMLElement = dialogEl.querySelector('header.el-dialog__header')!
|
|
|
|
let allowDraggable = false
|
|
let widthBeforeFullscreen: number | undefined = undefined
|
|
|
|
function onToggleFullScreen() {
|
|
if (dialogEl.className.includes('is-draggable')) allowDraggable = true
|
|
if (!dialogVnode.props.fullscreen) {
|
|
// 准备切换全屏，记录当前宽度
|
|
widthBeforeFullscreen = dialogHeaderEl.getBoundingClientRect().width
|
|
}
|
|
if (dialogVnode.props.fullscreen) {
|
|
if (!widthBeforeFullscreen) return undefined
|
|
// 准备缩小，恢复记录的宽度
|
|
dialogEl.style.setProperty('--el-dialog-width', `${widthBeforeFullscreen}px`)
|
|
dialogEl.style.width = `${widthBeforeFullscreen}px`
|
|
widthBeforeFullscreen = undefined
|
|
}
|
|
dialogVnode.props.fullscreen = !dialogVnode.props.fullscreen
|
|
if (!dialogVnode.props.fullscreen && allowDraggable) {
|
|
// 从全屏变回窗口，要加上 is-draggable
|
|
nextTick(() => {
|
|
dialogEl.className = `${dialogEl.className} is-draggable`
|
|
})
|
|
}
|
|
}
|
|
|
|
function onCloseDialog() {
|
|
if (bindingValue.closeIsHidden) {
|
|
// 关闭只是隐藏，就抛出 close 事件
|
|
dialogVnode.emit('close')
|
|
|
|
} else {
|
|
dialogVnode.props.modelValue = false
|
|
}
|
|
}
|
|
|
|
dialogHeaderEl.ondblclick = onToggleFullScreen
|
|
const dialogHeaderButtonEl: HTMLElement | null =
|
|
dialogHeaderEl.querySelector('.el-dialog__headerbtn')
|
|
if (dialogHeaderButtonEl) {
|
|
dialogHeaderEl.removeChild(dialogHeaderButtonEl)
|
|
}
|
|
const customDialogHeaderButtonEl = document.createElement('div')
|
|
customDialogHeaderButtonEl.className = 'el-dialog__headerbtn'
|
|
customDialogHeaderButtonEl.style.display = 'flex'
|
|
customDialogHeaderButtonEl.style.alignItems = 'center'
|
|
customDialogHeaderButtonEl.style.width = 'auto'
|
|
customDialogHeaderButtonEl.style.marginRight = '5px'
|
|
|
|
const iconFullscreenContainer = document.createElement('div')
|
|
iconFullscreenContainer.className = 'fullbtn-container'
|
|
iconFullscreenContainer.onclick = onToggleFullScreen
|
|
const iconFullscreenVnode = h(renderIcon('FullScreen'))
|
|
// <IconFullScreen onClick={onToggleFullScreen}/>
|
|
render(iconFullscreenVnode, iconFullscreenContainer)
|
|
customDialogHeaderButtonEl.appendChild(iconFullscreenContainer)
|
|
|
|
const iconCloseContainer = document.createElement('div')
|
|
iconCloseContainer.className = 'closebtn-container'
|
|
iconCloseContainer.onclick = onCloseDialog
|
|
const iconCloseVnode = h(renderIcon('Close'))
|
|
// <IconClose onClick={onCloseDialog}/>
|
|
render(iconCloseVnode, iconCloseContainer)
|
|
customDialogHeaderButtonEl.appendChild(iconCloseContainer)
|
|
|
|
dialogHeaderEl.appendChild(customDialogHeaderButtonEl)
|
|
|
|
// 加入覆盖样式
|
|
const style = document.createElement('style')
|
|
style.type = 'text/css'
|
|
// --el-dialog-width: 100%!important;
|
|
style.innerHTML = '.el-dialog.is-fullscreen {width:100%!important;height:100%!important;}'
|
|
document.querySelector('head')!.appendChild(style)
|
|
}
|