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>
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐