|
@@ -7,16 +7,16 @@ export const dialogResize = {
|
|
|
// 初始化不最大化
|
|
|
el.fullscreen = false
|
|
|
// 弹框可拉伸最小宽高
|
|
|
- const minWidth = 1100
|
|
|
- const minHeight = 570
|
|
|
+ const minWidth = 410
|
|
|
+ const minHeight = 285
|
|
|
// 当前宽高
|
|
|
- let nowWidth = minWidth
|
|
|
+ const nowWidth = minWidth
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
|
- let nowHight = minHeight
|
|
|
+ const nowHight = minHeight
|
|
|
// 当前顶部高度
|
|
|
- let nowMarginTop = 0
|
|
|
+ const nowMarginTop = 0
|
|
|
// 获取弹框头部(这部分可双击全屏)
|
|
|
- let hasSetBodyHight = false
|
|
|
+ const hasSetBodyHight = false
|
|
|
// 弹窗
|
|
|
const dragDom: any = document.querySelector('.can-resize')
|
|
|
const dialogHeaderEl = dragDom.querySelector('.el-dialog__header')
|
|
@@ -25,7 +25,7 @@ export const dialogResize = {
|
|
|
dragDom.className += ' el-drag-dialog'
|
|
|
console.log(el)
|
|
|
// 给弹窗加上overflow auto;不然缩小时框内的标签可能超出dialog;
|
|
|
- dragDom.style.overflow = 'auto'
|
|
|
+ // dragDom.style.overflow = 'auto'
|
|
|
|
|
|
const keyboardPositions = localStorage.getItem('cet-keyboard-positions')
|
|
|
const keyboardResize = localStorage.getItem('cet-keyboard-resize')
|
|
@@ -102,58 +102,58 @@ export const dialogResize = {
|
|
|
}
|
|
|
}
|
|
|
dialogHeaderEl.onmousedown = moveDown
|
|
|
- let bodyHeight = 'auto'
|
|
|
+ // const bodyHeight = 'auto'
|
|
|
|
|
|
- function setMaxMin() {
|
|
|
- if (el.fullscreen) {
|
|
|
- const i: any = maxMin.querySelector('.el-icon-crop')
|
|
|
- i.classList.remove('el-icon-crop')
|
|
|
- i.classList.add('el-icon-full-screen')
|
|
|
- maxMin.innerHTML = '<i class="el-icon-full-screen"></i>'
|
|
|
- maxMin.title = '最大化'
|
|
|
- dragDom.style.height = nowHight + 'px'
|
|
|
- dragDom.style.width = nowWidth + 'px'
|
|
|
- dragDom.style.marginTop = window.innerHeight * 0.07 + 'px'
|
|
|
- el.fullscreen = false
|
|
|
- dialogHeaderEl.style.cursor = 'move'
|
|
|
- dialogHeaderEl.onmousedown = moveDown
|
|
|
- dragDom.querySelector('.el-dialog__body').style.height = bodyHeight
|
|
|
- hasSetBodyHight = false
|
|
|
- } else {
|
|
|
- const i: any = maxMin.querySelector('.el-icon-full-screen')
|
|
|
- i.classList.remove('el-icon-full-screen')
|
|
|
- i.classList.add('el-icon-crop')
|
|
|
- maxMin.title = '还原'
|
|
|
- bodyHeight = dragDom.querySelector('.el-dialog__body').offsetHeight + 'px'
|
|
|
- nowHight = dragDom.clientHeight
|
|
|
- nowWidth = dragDom.clientWidth
|
|
|
- nowMarginTop = dragDom.style.marginTop
|
|
|
- dragDom.style.left = 0
|
|
|
- dragDom.style.top = 0
|
|
|
- dragDom.style.height = window.innerHeight + 'px'
|
|
|
- dragDom.style.width = '100VW'
|
|
|
- dragDom.style.marginTop = 0
|
|
|
- el.fullscreen = true
|
|
|
- dialogHeaderEl.style.cursor = 'initial'
|
|
|
- dialogHeaderEl.onmousedown = null
|
|
|
- if (!hasSetBodyHight) {
|
|
|
- const footerHeight =
|
|
|
- dragDom.querySelector('.el-dialog__footer') && dragDom.querySelector('.el-dialog__footer').offsetHeight
|
|
|
- dragDom.querySelector('.el-dialog__body').style.height =
|
|
|
- 'calc(100% - ' + (dialogHeaderEl.offsetHeight + footerHeight) + 'px)'
|
|
|
- /* dragDom.querySelector('.el-dialog__body').style.height =
|
|
|
- window.innerHeight*0.9
|
|
|
- - (dialogHeaderEl.offsetHeight + footerHeight) + 'px'*/
|
|
|
- hasSetBodyHight = true
|
|
|
- }
|
|
|
- }
|
|
|
- el.dispatchEvent(resizeEvent)
|
|
|
- }
|
|
|
+ // function setMaxMin() {
|
|
|
+ // if (el.fullscreen) {
|
|
|
+ // const i: any = maxMin.querySelector('.el-icon-crop')
|
|
|
+ // i.classList.remove('el-icon-crop')
|
|
|
+ // i.classList.add('el-icon-full-screen')
|
|
|
+ // maxMin.innerHTML = '<i class="el-icon-full-screen"></i>'
|
|
|
+ // maxMin.title = '最大化'
|
|
|
+ // dragDom.style.height = nowHight + 'px'
|
|
|
+ // dragDom.style.width = nowWidth + 'px'
|
|
|
+ // dragDom.style.marginTop = window.innerHeight * 0.07 + 'px'
|
|
|
+ // el.fullscreen = false
|
|
|
+ // dialogHeaderEl.style.cursor = 'move'
|
|
|
+ // dialogHeaderEl.onmousedown = moveDown
|
|
|
+ // dragDom.querySelector('.el-dialog__body').style.height = bodyHeight
|
|
|
+ // hasSetBodyHight = false
|
|
|
+ // } else {
|
|
|
+ // const i: any = maxMin.querySelector('.el-icon-full-screen')
|
|
|
+ // i.classList.remove('el-icon-full-screen')
|
|
|
+ // i.classList.add('el-icon-crop')
|
|
|
+ // maxMin.title = '还原'
|
|
|
+ // bodyHeight = dragDom.querySelector('.el-dialog__body').offsetHeight + 'px'
|
|
|
+ // nowHight = dragDom.clientHeight
|
|
|
+ // nowWidth = dragDom.clientWidth
|
|
|
+ // nowMarginTop = dragDom.style.marginTop
|
|
|
+ // dragDom.style.left = 0
|
|
|
+ // dragDom.style.top = 0
|
|
|
+ // dragDom.style.height = window.innerHeight + 'px'
|
|
|
+ // dragDom.style.width = '100VW'
|
|
|
+ // dragDom.style.marginTop = 0
|
|
|
+ // el.fullscreen = true
|
|
|
+ // dialogHeaderEl.style.cursor = 'initial'
|
|
|
+ // dialogHeaderEl.onmousedown = null
|
|
|
+ // if (!hasSetBodyHight) {
|
|
|
+ // const footerHeight =
|
|
|
+ // dragDom.querySelector('.el-dialog__footer') && dragDom.querySelector('.el-dialog__footer').offsetHeight
|
|
|
+ // dragDom.querySelector('.el-dialog__body').style.height =
|
|
|
+ // 'calc(100% - ' + (dialogHeaderEl.offsetHeight + footerHeight) + 'px)'
|
|
|
+ // /* dragDom.querySelector('.el-dialog__body').style.height =
|
|
|
+ // window.innerHeight*0.9
|
|
|
+ // - (dialogHeaderEl.offsetHeight + footerHeight) + 'px'*/
|
|
|
+ // hasSetBodyHight = true
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // el.dispatchEvent(resizeEvent)
|
|
|
+ // }
|
|
|
|
|
|
// 点击放大缩小效果
|
|
|
- maxMin.onclick = setMaxMin
|
|
|
+ // maxMin.onclick = setMaxMin
|
|
|
// 双击头部效果
|
|
|
- dialogHeaderEl.ondblclick = setMaxMin
|
|
|
+ // dialogHeaderEl.ondblclick = setMaxMin
|
|
|
// 拉伸
|
|
|
const resizeEl = document.createElement('div')
|
|
|
dragDom.appendChild(resizeEl)
|
|
@@ -178,17 +178,17 @@ export const dialogResize = {
|
|
|
const x = e.clientX - disX + (e.clientX - clientX) // 这里 由于elementUI的dialog控制居中的,所以水平拉伸效果是双倍
|
|
|
const y = e.clientY - disY
|
|
|
// 比较是否小于最小宽高
|
|
|
- // dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px'
|
|
|
- // dragDom.style.height = y > minHeight ? `${y}px` : minHeight + 'px'
|
|
|
- dragDom.style.width = `${x}px`
|
|
|
- dragDom.style.height = `${y}px`
|
|
|
- if (!hasSetBodyHight) {
|
|
|
- const footerHeight =
|
|
|
- dragDom.querySelector('.el-dialog__footer') && dragDom.querySelector('.el-dialog__footer').offsetHeight
|
|
|
- dragDom.querySelector('.el-dialog__body').style.height =
|
|
|
- 'calc(100% - ' + (dialogHeaderEl.offsetHeight + footerHeight) + 'px)'
|
|
|
- hasSetBodyHight = true
|
|
|
- }
|
|
|
+ dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px'
|
|
|
+ dragDom.style.height = y > minHeight ? `${y}px` : minHeight + 'px'
|
|
|
+ // dragDom.style.width = `${x}px`
|
|
|
+ // dragDom.style.height = `${y}px`
|
|
|
+ // if (!hasSetBodyHight) {
|
|
|
+ // const footerHeight =
|
|
|
+ // dragDom.querySelector('.el-dialog__footer') && dragDom.querySelector('.el-dialog__footer').offsetHeight
|
|
|
+ // dragDom.querySelector('.el-dialog__body').style.height =
|
|
|
+ // 'calc(100% - ' + (dialogHeaderEl.offsetHeight + footerHeight) + 'px)'
|
|
|
+ // hasSetBodyHight = true
|
|
|
+ // }
|
|
|
}
|
|
|
// 拉伸结束
|
|
|
document.onmouseup = function (e) {
|
|
@@ -198,7 +198,7 @@ export const dialogResize = {
|
|
|
'cet-keyboard-resize',
|
|
|
JSON.stringify({
|
|
|
width: dragDom.style.width || 'auto',
|
|
|
- height: dragDom.style.top || 'auto',
|
|
|
+ height: dragDom.style.height || 'auto',
|
|
|
})
|
|
|
)
|
|
|
el.dispatchEvent(resizeEvent)
|