【Element-UI】实现el-drawer抽屉的左右拖拽宽度
对Element-UI的el-drawer抽屉控件实现拖拽功能。
1、新增drawer-drag.js
import Vue from 'vue'Vue.directive('drawerDrag', {bind(el, binding, vnode, oldVnode) {const minWidth = 400const 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/portal_2.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.clientWidthconst EloffsetLeft = dragDom.offsetLeftconst clientX = e.clientXdocument.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 = nulldocument.onmouseup = null}}}
})
2、引入drawer-drag.js并且使用
引入js：
import '@/utils/drawer-drag'
在el-drawer加入v-drawerDrag使用
<el-drawerv-drawerDrag
</el-drawer>
实现来源：
1、https://www.cnblogs.com/younghxp/p/17539907.html
2、https://www.jianshu.com/p/5b250e7f94f3