1. 使用指令，单个el-drawer设置
- 创建drawer-drag.js文件
import Vue from 'vue'
Vue.directive('drawerDrag', {
bind(el, binding, vnode, oldVnode) {
const minWidth = 400
const dragDom = el.querySelector('.el-drawer')
dragDom.style.overflow = 'auto'
const resizeElL = document.createElement('div')
const img = new Image(24, 38)
img.src = require('@/assets/images/stretch.png')
dragDom.appendChild(img)
dragDom.appendChild(resizeElL)
resizeElL.style.cursor = 'w-resize'
resizeElL.style.position = 'absolute'
resizeElL.style.height = '100%'
resizeElL.style.width = '10px'
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
const clientX = e.clientX
document.onmousemove = function(e) {
e.preventDefault()
// 左侧鼠标拖拽位置
if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) {
// 往左拖拽
if (clientX > e.clientX) {
dragDom.style.width = elW + (clientX - e.clientX) + 'px'
}
// 往右拖拽
if (clientX < e.clientX) {
if (dragDom.clientWidth >= minWidth) {
dragDom.style.width = elW - (e.clientX - clientX) + 'px'
}
}
}
}
// 拉伸结束
document.onmouseup = function(e) {
document.onmousemove = null
document.onmouseup = null
}
}
}
})
- 在main.js中引入
import '@/directives/drawer-drag'
3.使用
<el-drawer
v-drawerDrag
:visible.sync="infoVisible"
size="1200px"
>
</el-drawer>
2. 全局设置所有的抽屉框都可以拉伸
- 由于el-drawer是使用的display:none控制的，在页面一开始就渲染好了，所以采用的是在app.vue中监听路由的变化来获取dom添加拉伸的功能。
其中有个问题：直接console.log
document.getElementsByClassName('el-drawer')有值，但是遍历时没有数据。想到 可能是子组件没有被挂载好，就使用了this.$nextTick，刷新可以能获取到，但是路由切换出现偶然现象，有时有，有时没有。故后又使用的setTimeout ，暂时可以解决。
watch: {
$route: {
handler() {
setTimeout(() => {
const minWidth = 400
const dragDoms = Array.from(document.getElementsByClassName('el-drawer'))
for (let index = 0; index < dragDoms.length; index++) {
const dragDom = dragDoms[index]
dragDom.style.overflow = 'inherit'
const resizeElL = document.createElement('div')
const img = new Image(24, 38)
img.src = require('@/assets/images/stretch.png')
dragDom.appendChild(img)
dragDom.appendChild(resizeElL)
resizeElL.style.cursor = 'w-resize'
resizeElL.style.position = 'absolute'
resizeElL.style.height = '100%'
resizeElL.style.width = '10px'
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
const clientX = e.clientX
document.onmousemove = function(e) {
e.preventDefault()
// 左侧鼠标拖拽位置
if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) {
// 往左拖拽
if (clientX > e.clientX) {
dragDom.style.width = elW + (clientX - e.clientX) + 'px'
}
// 往右拖拽
if (clientX < e.clientX) {
if (dragDom.clientWidth >= minWidth) {
dragDom.style.width = elW - (e.clientX - clientX) + 'px'
}
}
}
}
// 拉伸结束
document.onmouseup = function(e) {
document.onmousemove = null
document.onmouseup = null
}
}
}
}, 3000)
},
deep: true
}
},
思路借鉴：https://www.cnblogs.com/lizhao123/p/14655976.html
效果图
stretch.png
