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.
38 lines
1.5 KiB
38 lines
1.5 KiB
import $ from 'jquery'
|
|
import _ from 'lodash'
|
|
|
|
/**
|
|
* el-drawer 拖拽指令
|
|
*/
|
|
export default {
|
|
mounted(el, binding, vnode, oldVnode) {
|
|
const drawerEle = $(el).closest('.el-drawer')[0]
|
|
// 创建触发拖拽的元素
|
|
const dragItem = document.createElement('div')
|
|
// 将元素放置到抽屉的左边边缘
|
|
dragItem.style.cssText = 'height: 100%;width: 5px;cursor: w-resize;position: absolute;left: 0;'
|
|
drawerEle?.append(dragItem)
|
|
|
|
dragItem.onmousedown = (downEvent) => {
|
|
// 拖拽时禁用文本选中
|
|
document.body.style.userSelect = 'none'
|
|
|
|
document.onmousemove = _.debounce(function (moveEvent) {
|
|
// 获取鼠标距离浏览器右边缘的距离
|
|
let realWidth = document.body.clientWidth - moveEvent.pageX
|
|
const width30 = document.body.clientWidth * 0.2
|
|
const width80 = document.body.clientWidth * 0.8
|
|
// 宽度不能大于浏览器宽度 80%，不能小于宽度的 20%
|
|
realWidth = realWidth > width80 ? width80 : realWidth < width30 ? width30 : realWidth
|
|
drawerEle.style.width = realWidth + 'px'
|
|
}, 0)
|
|
|
|
document.onmouseup = function (e) {
|
|
// 拖拽时结束时，取消禁用文本选中
|
|
document.body.style.userSelect = 'initial'
|
|
document.onmousemove = null
|
|
document.onmouseup = null
|
|
}
|
|
}
|
|
}
|
|
}
|