Vue中窗口拉伸效果实现(Vue2版)

Vue2

1. 在项目中utils中新建directive.js文件，内容如下：

Vue.directive('resize', {inserted: function(el) {setTimeout(() => {// 要拉伸的窗口const dialog = el.querySelector('.el-dialog');// 设置最小拉伸尺寸dialog.style.minWidth = dialog.getBoundingClientRect().width + 'px';dialog.style.minHeight = dialog.getBoundingClientRect().height + 'px';// 在窗口右下角创建一个div，用于监听鼠标拉伸事件const resizeHandle = document.createElement('div');resizeHandle.style.position = 'absolute';resizeHandle.style.width = '10px';resizeHandle.style.height = '10px';resizeHandle.style.bottom = '0';resizeHandle.style.right = '0';resizeHandle.style.background = 'transparent';resizeHandle.style.cursor = 'nwse-resize';dialog.appendChild(resizeHandle);let startX, startY, startWidth, startHeight;resizeHandle.addEventListener('mousedown', (e) => {e.preventDefault();startX = e.clientX;startY = e.clientY;startWidth = dialog.offsetWidth;startHeight = dialog.offsetHeight;document.addEventListener('mousemove', mouseMove);document.addEventListener('mouseup', mouseUp);});function mouseMove(e) {const newWidth = startWidth + (e.clientX - startX);const newHeight = startHeight + (e.clientY - startY);dialog.style.width = `${newWidth}px`;dialog.style.height = `${newHeight}px`;}function mouseUp() {document.removeEventListener('mousemove', mouseMove);document.removeEventListener('mouseup', mouseUp);}}, 0)}
});

使用方法：
```js
// 1. 在main.js引入
import ‘@/utils/directive’；

	// 2.使用<div v-resize class="dialog"></div><el-dialog v-resize></el-dialog>
```

配合上一篇的窗口拖拽效果就能实现窗口的拖动拉伸效果啦~