vue 自定义指令实现元素可拖拽宽度调整大小

directives: {
    drag: {
         inserted: function (el) {
     		const dragDom = el;
     		dragDom.style.cursor = "e-resize";
     		dragDom.onmousedown = (e) => {
     			// 鼠标按下，计算当前元素距离可视区的距离
     			const disX = e.clientX
     			const w = dragDom.clientWidth
     			const minW = 240
     			const maxW = 600
     			var nw
     			document.onmousemove = function(e) {
     				// 通过事件委托，计算移动的距离
     				const l = e.clientX - disX
     				// 改变当前元素宽度，不可超过最小最大值
     				nw = w + l
     				nw = nw < minW ? minW : nw
     				nw = nw > maxW ? maxW : nw
     				dragDom.style.width = `${nw}px`
     			}
     	
     			document.onmouseup = function(e) {
     				document.onmousemove = null
     				document.onmouseup = null
     			}
     		}
     	}
     }
 }

使用：在需要调整大小的元素标签直接使用v-drag 指令

<el-aside style="width: 20%;border-right: 1px solid rgb(238, 238, 238);" v-drag>
xxx
</el-aside>