在使用el-drawer过程中我们想要对抽屉进行拉伸, 方便实现产品经理的需求, 可以写一个自定义命令嵌入到vue指令中, 可以全局引用也可以按需引用.
js代码 (前提是引入了vue)
Vue.directive('drawerDrag', {
bind(el, binding, vnode, oldVnode) {
const minWidth = 300
const dragDom = el.querySelector('.el-drawer')
// const dragDom1 = el.querySelector('.el-drawer__container')
// const dragDom2 = el.querySelector('.el-drawer__wrapper')
// dragDom.style.overflow = 'auto'
const resizeElL = document.createElement('div')
const img = new Image(24, 38)
// img.src = require('@/assets/img/apk.png')
// dragDom.appendChild(img)
dragDom.appendChild(resizeElL)
resizeElL.style.cursor = 'w-resize'
resizeElL.style.position = 'absolute'
resizeElL.style.height = '100%'
resizeElL.style.width = '30px'
resizeElL.style.left = '0px'
resizeElL.style.top = '0px'
img.style.position = 'absolute'
img.style.left = '-12px'
img.style.top = '50%'
resizeElL.onmousedown = (e) => {
const elW = dragDom.clientWidth
const EloffsetLeft = dragDom.offsetLeft
console.log(elW, EloffsetLeft)
const clientX = e.clientX
document.onmousemove = function (e) {
// console.log(e.clientX,dragDom.offsetLeft,333333)
e.preventDefault()
// 左侧鼠标拖拽位置
if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) {
// 往左拖拽
if (clientX > e.clientX) {
console.log(e.clientX)
dragDom.style.width = elW + (clientX - e.clientX) + 'px'
console.log(dragDom.style.width)
}
// 往右拖拽
console.log(clientX, e.clientX)
if (clientX < e.clientX) {
console.log(dragDom.clientWidth, 66666)
if (dragDom.clientWidth >= minWidth) {
console.log(elW, e.clientX, clientX)
dragDom.style.width = elW - (e.clientX - clientX) + 'px'
}
}
}
}
// 拉伸结束
document.onmouseup = function (e) {
document.onmousemove = null
document.onmouseup = null
}
}
}
})
页面代码使用: 在 el-drawer 标签内使用指令 v-drawerDrag