--- theme: channing-cyan highlight: vs2015 --- # 前言在我们项目开发中,经常会有布局拉伸的需求,接下来让我们一步步用 `vue指令` 实现这个需求 # 动手开发 ## 在线体验 ## 常规使用 ### 解决拉伸触发时机既然我们选择了`指令方式`,也就是牺牲了`组件方式`的绑定事件的便捷性那么我们如何来解决这个触发时机的问题呢? 在参考了 `Element UI` 的表格拉伸功能后,笔者受到了启发 ![2023-06-30 20.24.53.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/340738f41c8249989a4c0ec0dcc1ea2a~tplv-k3u1fbpfcp-watermark.image#?w=797\&h=256\&s=107419\&e=gif\&f=162\&b=f7f7f7) 有点抽象,这个红色区域可不是真实节点,只是笔者模拟的一个 `boder-right` 多说无益直接上代码吧 ```js const pointermove = e => { const { right } = el.getBoundingClientRect() // 获取到节点的右边界 const { clientX } = e // 此时鼠标位置 if (right - clientX < 8) // 表明在右边界的 8px 的过渡区可以拉伸 } ``` ### 实现一个简单的右拉伸下面让我们来实现一个简单的右拉伸功能, 既然用了指令,肯定是越简单越好笔者决定用 `vue` 提供的`指令修饰符`,简单命名为 `v-resize.right` ### 实现 v-resize.right #### 1.首先我们创建两个相邻 div ```html ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5ca4b6f9bd60492bab04ec0dc4449408~tplv-k3u1fbpfcp-watermark.image#?w=424\&h=119\&s=595\&e=png\&b=add9e6) #### 2.实现 resize 触发时机 ```js export const resize = { inserted: function(el, binding) { el.addEventListener('pointermove', (e) => { const { right } = el.getBoundingClientRect() if (right - e.clientX < 8) { // 此时表明可以拉伸,时机成熟 el.style.cursor = 'col-resize' } else { el.style.cursor = '' } }) } } ``` #### 3.实现右拉伸功能 ```js el.addEventListener('pointerdown', (e) => { const rightDom = el.nextElementSibling // 获取右节点 const startX = e.clientX // 获取当前点击坐标 const { width } = el.getBoundingClientRect() // 获取当前节点宽度 const { width: nextWidth } = rightDom.getBoundingClientRect() // 获取右节点宽度 el.setPointerCapture(e.pointerId) // HTML5 的 API 自行百度~ const onDocumentMouseMove = (e) => { const offsetX = e.clientX - startX // 此时的 x 坐标偏差 // 更新左右节点宽度 el.style.width = width + offsetX + 'px' rightDom.style.width = nextWidth - offsetX + 'px' } // 因为此时我们要在整个屏幕移动所以我们要在 document 挂上 mousemove document.addEventListener('mousemove',onDocumentMouseMove) ``` 让我们看看此时的效果 ![2023-06-30 20.55.37.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b810da39843b484f9693f5112cbd3f03~tplv-k3u1fbpfcp-watermark.image#?w=447\&h=130\&s=155467\&e=gif\&f=177\&b=ea8380) 会发现有两个问题 > 1. 左边宽度会>左右之和,右边宽度会 < 0 > 2. 当我们鼠标弹起的时候还能继续拉伸 ##### 问题一方案:限制最小宽度让我们首先解决第一个问题,限制一下左右节点的最小宽度 ```js const MIN_WIDTH = 10 document.addEventListener('mousemove', (e) => { const offsetX = e.clientX - startX // 此时的 x 坐标偏差 +if (width + offsetX < MIN_WIDTH || nextWidth - offsetX < MIN_WIDTH) return // 更新左右节点宽度 el.style.width = width + offsetX + 'px' rightDom.style.width = nextWidth - offsetX + 'px' }) ``` #### 问题二方案:鼠标弹起后释放对应拉伸事件第二个问题,其实非常简单,在我们 `pointerup` 事件中移除对应的 `mousemove` 即可 ```js el.addEventListener('pointerup', (e) => { el.releasePointerCapture(e.pointerId) document.removeEventListener('mousemove', onDocumentMouseMove) }) ``` 此时最最最基础的 `v-resize` 左右拉伸版本已经实现,来看下效果吧 ![2023-06-30 21.08.21.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6a22fd36b06b4b58a76de1dcc03c1443~tplv-k3u1fbpfcp-watermark.image#?w=461\&h=153\&s=103173\&e=gif\&f=117\&b=fefefe) 看下此时的完整代码 ```js export const resize = { inserted: function (el, binding) { el.addEventListener('pointermove', (e) => { const { right } = el.getBoundingClientRect() if (right - e.clientX < 8) { // 此时表明可以拉伸 el.style.cursor = 'col-resize' } else { el.style.cursor = '' } }) const MIN_WIDTH = 10 el.addEventListener('pointerdown', (e) => { const rightDom = el.nextElementSibling // 获取右节点 const startX = e.clientX // 获取当前点击坐标 const { width } = el.getBoundingClientRect() // 获取当前节点宽度 const { width: nextWidth } = rightDom.getBoundingClientRect() // 获取右节点宽度 el.setPointerCapture(e.pointerId) // HTML5 的 API 自行百度~ const onDocumentMouseMove = (e) => { const offsetX = e.clientX - startX // 此时的 x 坐标偏差 if (width + offsetX < MIN_WIDTH || nextWidth - offsetX < MIN_WIDTH) { return } // 更新左右节点宽度 el.style.width = width + offsetX + 'px' rightDom.style.width = nextWidth - offsetX + 'px' } // 因为此时我们要在整个屏幕移动所以我们要在 document 挂上 mousemove document.addEventListener('mousemove', onDocumentMouseMove) el.addEventListener('pointerup', (e) => { el.releasePointerCapture(e.pointerId) document.removeEventListener('mousemove', onDocumentMouseMove) }) }) }, } ``` 作为一名优秀的`前端性能优化专家`,`红盾大大`已经开始吐槽,这么多 `EventListener` 都不移除吗? 还有`'top' 'left'`这些硬编码,能维护吗? 是的,后续代码我们将会移除这些被绑定的事件,以及处理硬编码(此处非重点,不做赘叙) 彦祖们,实现完`右拉伸`想必你对`上下左右`拉伸,也已经有了自己的思路 ## 开始进阶接下来让我们看下这种场景 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8c1e786ab9024985ae8014e0c8b7de09~tplv-k3u1fbpfcp-watermark.image#?w=465\&h=115\&s=1505\&e=png\&b=fcf2e7) 我们想实现一个两边能同时拉伸的功能, 也就是 `v-resize.left.right` ### 实现左右拉伸功能这种场景比较复杂,就需要我们维护一个拉伸方向上的变量 `position` ### 实现 v-resize.left.right ```js export const resize = { inserted: function (el, binding) { let position = '', resizing = false el.addEventListener('pointermove', (e) => { if (resizing) return const { left, right } = el.getBoundingClientRect() const { clientX } = e if (right - clientX < 8) { position = 'right' // 此时表明右拉伸 el.style.cursor = 'col-resize' } else if (clientX - left < 8) { position = 'left' // 此时表明左拉伸 el.style.cursor = 'col-resize' } else { position = '' el.style.cursor = '' } }) const MIN_WIDTH = 10 el.addEventListener('pointerdown', (e) => { if (position === '') return const sibling = position === 'right' ? el.nextElementSibling : el.previousElementSibling // 获取相邻节点 const startX = e.clientX // 获取当前点击坐标 const { width } = el.getBoundingClientRect() // 获取当前节点宽度 const { width: siblingWidth } = sibling.getBoundingClientRect() // 获取右节点宽度 el.setPointerCapture(e.pointerId) // HTML5 的 API 自行百度~ const onDocumentMouseMove = (e) => { resizing = true if (position === '') return const offsetX = e.clientX - startX const _elWidth = position === 'right' ? width + offsetX : width - offsetX //判断左右拉伸所影响的当前节点宽度 const _siblingWidth = position === 'right' ? siblingWidth - offsetX : siblingWidth + offsetX //判断左右拉伸所影响的相邻节点宽度 if (_elWidth <= MIN_WIDTH || _siblingWidth <= MIN_WIDTH) return // 更新左右节点宽度 el.style.width = _elWidth + 'px' sibling.style.width = _siblingWidth + 'px' } document.addEventListener('mousemove', onDocumentMouseMove) el.addEventListener('pointerup', (e) => { position = '' resizing = false el.releasePointerCapture(e.pointerId) document.removeEventListener('mousemove', onDocumentMouseMove) }) }) }, } ``` 看下此时的效果 ![2023-06-30 21.52.11.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0e4600c32cf04ecea296226d03576991~tplv-k3u1fbpfcp-watermark.image#?w=433\&h=121\&s=136754\&e=gif\&f=150\&b=fcf4e4) 非常丝滑, 当然我们还需要考虑传递 `最小宽度` `最大宽度` `过渡区` 等多种业务属性,但是这对于各位`彦祖`来说都是鸡毛蒜皮的小事. 自行改造就行了 ## 完整代码 ### Js版本 ```js const elEventsWeakMap = new WeakMap() const MIN_WIDTH = 50 const MIN_HEIGHT = 50 const TRIGGER_SIZE = 8 const TOP = 'top' const BOTTOM = 'bottom' const LEFT = 'left' const RIGHT = 'right' const COL_RESIZE = 'col-resize' const ROW_RESIZE = 'row-resize' function getElStyleAttr(element, attr) { const styles = window.getComputedStyle(element) return styles[attr] } function getSiblingByPosition(el, position) { const siblingMap = { left: el.previousElementSibling, right: el.nextElementSibling, bottom: el.nextElementSibling, top: el.previousElementSibling } return siblingMap[position] } function getSiblingsSize(el, attr) { const siblings = el.parentNode.childNodes return [...siblings].reduce((prev, next) => (next.getBoundingClientRect()[attr] + prev), 0) } function updateSize({ el, sibling, formatter = 'px', elSize, siblingSize, attr = 'width' }) { let totalSize = elSize + siblingSize if (formatter === 'px') { el.style[attr] = elSize + formatter sibling.style[attr] = siblingSize + formatter } else if (formatter === 'flex') { totalSize = getSiblingsSize(el, attr) el.style.flex = elSize / totalSize * 10 // 修复 flex-grow <1 sibling.style.flex = siblingSize / totalSize * 10 } } const initResize = ({ el, positions, minWidth = MIN_WIDTH, minHeight = MIN_HEIGHT, triggerSize = TRIGGER_SIZE, formatter = 'px' }) => { if (!el) return const resizeState = {} const defaultCursor = getElStyleAttr(el, 'cursor') const elStyle = el.style const canLeftResize = positions.includes(LEFT) const canRightResize = positions.includes(RIGHT) const canTopResize = positions.includes(TOP) const canBottomResize = positions.includes(BOTTOM) if (!canLeftResize && !canRightResize && !canTopResize && !canBottomResize) { return } // 未指定方向 const pointermove = (e) => { if (resizeState.resizing) return e.preventDefault() const { left, right, top, bottom } = el.getBoundingClientRect() const { clientX, clientY } = e // 左右拉伸 if (canLeftResize || canRightResize) { if (clientX - left < triggerSize) resizeState.position = LEFT else if (right - clientX < triggerSize) resizeState.position = RIGHT else resizeState.position = '' if (resizeState.position === '') { elStyle.cursor = defaultCursor } else { if (getSiblingByPosition(el, resizeState.position)) { elStyle.cursor = COL_RESIZE } e.stopPropagation() } } else if (canTopResize || canBottomResize) { // 上下拉伸 if (clientY - top < triggerSize) resizeState.position = TOP else if (bottom - clientY < triggerSize) resizeState.position = BOTTOM else resizeState.position = '' if (resizeState.position === '') { elStyle.cursor = defaultCursor } else { if (getSiblingByPosition(el, resizeState.position)) { elStyle.cursor = ROW_RESIZE } e.stopPropagation() } } } const pointerleave = (e) => { e.stopPropagation() resizeState.position = '' elStyle.cursor = defaultCursor el.releasePointerCapture(e.pointerId) } const pointerdown = (e) => { const { resizing, position } = resizeState if (resizing || !position) return if (position) e.stopPropagation() // 如果当前节点存在拉伸方向需要阻止冒泡(用于嵌套拉伸) el.setPointerCapture(e.pointerId) const isFlex = getElStyleAttr(el.parentNode, 'display') === 'flex' if (isFlex) formatter = 'flex' resizeState.resizing = true resizeState.startPointerX = e.clientX resizeState.startPointerY = e.clientY const { width, height } = el.getBoundingClientRect() const sibling = getSiblingByPosition(el, position) if (!sibling) { console.error('未找到兄弟节点', position) return } const rectSibling = sibling.getBoundingClientRect() const { startPointerX, startPointerY } = resizeState const onDocumentMouseMove = (e) => { if (!resizeState.resizing) return elStyle.cursor = canLeftResize || canRightResize ? COL_RESIZE : ROW_RESIZE const { clientX, clientY } = e if (position === LEFT || position === RIGHT) { const offsetX = clientX - startPointerX const elSize = position === RIGHT ? width + offsetX : width - offsetX const siblingSize = position === RIGHT ? rectSibling.width - offsetX : rectSibling.width + offsetX if (elSize <= minWidth || siblingSize <= minWidth) return updateSize({ el, sibling, elSize, siblingSize, formatter }) } else if (position === TOP || position === BOTTOM) { const offsetY = clientY - startPointerY const elSize = position === BOTTOM ? height + offsetY : height - offsetY const siblingSize = position === BOTTOM ? rectSibling.height - offsetY : rectSibling.height + offsetY if (elSize <= minHeight || siblingSize <= minHeight) return updateSize({ el, sibling, elSize, siblingSize, formatter }) } } const onDocumentMouseUp = (e) => { document.removeEventListener('mousemove', onDocumentMouseMove) document.removeEventListener('mouseup', onDocumentMouseUp) resizeState.resizing = false elStyle.cursor = defaultCursor } document.addEventListener('mousemove', onDocumentMouseMove) document.addEventListener('mouseup', onDocumentMouseUp) } const bindElEvents = () => { el.addEventListener('pointermove', pointermove) el.addEventListener('pointerleave', pointerleave) el.addEventListener('pointerup', pointerleave) el.addEventListener('pointerdown', pointerdown) } const unBindElEvents = () => { el.removeEventListener('pointermove', pointermove) el.removeEventListener('pointerleave', pointerleave) el.removeEventListener('pointerup', pointerleave) el.removeEventListener('pointerdown', pointerdown) } bindElEvents() // 设置解绑事件 elEventsWeakMap.set(el, unBindElEvents) } export const resize = { inserted: function(el, binding) { const { modifiers, value } = binding const positions = Object.keys(modifiers) initResize({ el, positions, ...value }) }, unbind: function(el) { const unBindElEvents = elEventsWeakMap.get(el) unBindElEvents() } } ``` ### Ts版本 ```js import type { DirectiveBinding } from 'vue' const elEventsWeakMap = new WeakMap() const MIN_WIDTH = 50 const MIN_HEIGHT = 50 const TRIGGER_SIZE = 8 enum RESIZE_CURSOR { COL_RESIZE = 'col-resize', ROW_RESIZE = 'row-resize', } enum POSITION { TOP = 'top', BOTTOM = 'bottom', LEFT = 'left', RIGHT = 'right', } type Positions = [POSITION.TOP, POSITION.BOTTOM, POSITION.LEFT, POSITION.RIGHT] interface ResizeState { resizing: boolean position?: POSITION startPointerX?: number startPointerY?: number } type WidthHeight = 'width' | 'height' type ElAttr = WidthHeight | 'cursor' | 'display' // 后面补充 type ResizeFormatter = 'px' | 'flex' interface ResizeInfo { el: HTMLElement positions: Positions minWidth: number minHeight: number triggerSize: number formatter: ResizeFormatter } function getElStyleAttr(element: HTMLElement, attr: ElAttr) { const styles = window.getComputedStyle(element) return styles[attr] } function getSiblingByPosition(el: HTMLElement, position: POSITION) { const siblingMap = { left: el.previousElementSibling, right: el.nextElementSibling, bottom: el.nextElementSibling, top: el.previousElementSibling, } return siblingMap[position] } function getSiblingsSize(el: HTMLElement, attr: WidthHeight) { const siblings = (el.parentNode && el.parentNode.children) || [] return [...siblings].reduce( (prev, next) => next.getBoundingClientRect()[attr] + prev, 0, ) } function updateSize({ el, sibling, formatter = 'px', elSize, siblingSize, attr = 'width', }: { el: HTMLElement sibling: HTMLElement formatter: ResizeFormatter elSize: number siblingSize: number attr?: WidthHeight }) { let totalSize = elSize + siblingSize if (formatter === 'px') { el.style[attr] = elSize + formatter sibling.style[attr] = siblingSize + formatter } else if (formatter === 'flex') { totalSize = getSiblingsSize(el as HTMLElement, attr) el.style.flex = `${(elSize / totalSize) * 10}` // 修复 flex-grow <1 sibling.style.flex = `${(siblingSize / totalSize) * 10}` } } const initResize = ({ el, positions, minWidth = MIN_WIDTH, minHeight = MIN_HEIGHT, triggerSize = TRIGGER_SIZE, formatter = 'px', }: ResizeInfo) => { if (!el || !(el instanceof HTMLElement)) return const resizeState: ResizeState = { resizing: false, } const defaultCursor = getElStyleAttr(el, 'cursor') const elStyle = el.style const canLeftResize = positions.includes(POSITION.LEFT) const canRightResize = positions.includes(POSITION.RIGHT) const canTopResize = positions.includes(POSITION.TOP) const canBottomResize = positions.includes(POSITION.BOTTOM) if (!canLeftResize && !canRightResize && !canTopResize && !canBottomResize) { return } // 未指定方向 const pointermove = (e: PointerEvent) => { if (resizeState.resizing) return e.preventDefault() const { left, right, top, bottom } = el.getBoundingClientRect() const { clientX, clientY } = e // 左右拉伸 if (canLeftResize || canRightResize) { if (clientX - left < triggerSize && clientX - left > 0 ) resizeState.position = POSITION.LEFT else if (right - clientX < triggerSize && right - clientX > 0) resizeState.position = POSITION.RIGHT else resizeState.position = undefined if (resizeState.position === undefined) { elStyle.cursor = defaultCursor } else { if (getSiblingByPosition(el, resizeState.position)) { elStyle.cursor = RESIZE_CURSOR.COL_RESIZE } e.stopPropagation() } } else if (canTopResize || canBottomResize) { // 上下拉伸 if (clientY - top < triggerSize && clientY - top > 0) resizeState.position = POSITION.TOP else if (bottom - clientY < triggerSize && bottom - clientY > 0) resizeState.position = POSITION.BOTTOM else resizeState.position = undefined if (resizeState.position === undefined) { elStyle.cursor = defaultCursor } else { if (getSiblingByPosition(el, resizeState.position)) { elStyle.cursor = RESIZE_CURSOR.ROW_RESIZE } e.stopPropagation() } } } const pointerleave = (e: PointerEvent) => { e.stopPropagation() resizeState.position = undefined elStyle.cursor = defaultCursor el.releasePointerCapture(e.pointerId) } const pointerdown = (e: PointerEvent) => { const { resizing, position } = resizeState if (resizing || !position) return if (position) e.stopPropagation() // 如果当前节点存在拉伸方向需要阻止冒泡(用于嵌套拉伸) el.setPointerCapture(e.pointerId) if (el.parentElement) { const isFlex = getElStyleAttr(el.parentElement, 'display') === 'flex' if (isFlex) formatter = 'flex' } resizeState.resizing = true resizeState.startPointerX = e.clientX resizeState.startPointerY = e.clientY const { width, height } = el.getBoundingClientRect() const sibling: HTMLElement = getSiblingByPosition( el, position, ) as HTMLElement if (!sibling || !(sibling instanceof HTMLElement)) { console.error('未找到兄弟节点', position) return } const rectSibling = sibling.getBoundingClientRect() const { startPointerX, startPointerY } = resizeState const onDocumentMouseMove = (e: MouseEvent) => { if (!resizeState.resizing) return elStyle.cursor = canLeftResize || canRightResize ? RESIZE_CURSOR.COL_RESIZE : RESIZE_CURSOR.ROW_RESIZE const { clientX, clientY } = e if (position === POSITION.LEFT || position === POSITION.RIGHT) { const offsetX = clientX - startPointerX const elSize = position === POSITION.RIGHT ? width + offsetX : width - offsetX const siblingSize = position === POSITION.RIGHT ? rectSibling.width - offsetX : rectSibling.width + offsetX if (elSize <= minWidth || siblingSize <= minWidth) return updateSize({ el, sibling, elSize, siblingSize, formatter }) } else if (position === POSITION.TOP || position === POSITION.BOTTOM) { const offsetY = clientY - startPointerY const elSize = position === POSITION.BOTTOM ? height + offsetY : height - offsetY const siblingSize = position === POSITION.BOTTOM ? rectSibling.height - offsetY : rectSibling.height + offsetY if (elSize <= minHeight || siblingSize <= minHeight) return updateSize({ el, sibling, elSize, siblingSize, formatter, attr: 'height', }) } } const onDocumentMouseUp = () => { document.removeEventListener('mousemove', onDocumentMouseMove) document.removeEventListener('mouseup', onDocumentMouseUp) resizeState.resizing = false elStyle.cursor = defaultCursor } document.addEventListener('mousemove', onDocumentMouseMove) document.addEventListener('mouseup', onDocumentMouseUp) } const bindElEvents = () => { el.addEventListener('pointermove', pointermove) el.addEventListener('pointerleave', pointerleave) el.addEventListener('pointerup', pointerleave) el.addEventListener('pointerdown', pointerdown) } const unBindElEvents = () => { el.removeEventListener('pointermove', pointermove) el.removeEventListener('pointerleave', pointerleave) el.removeEventListener('pointerup', pointerleave) el.removeEventListener('pointerdown', pointerdown) } bindElEvents() // 设置解绑事件 elEventsWeakMap.set(el, unBindElEvents) } export const resize = { mounted: function (el: HTMLElement, binding: DirectiveBinding) { const { modifiers, value } = binding const positions = Object.keys(modifiers) initResize({ el, positions, ...value }) }, beforeUnmount: function (el: HTMLElement) { const unBindElEvents = elEventsWeakMap.get(el) unBindElEvents() }, } ``` # 参考文章 > # 下期预告下一篇文章,打算写一个基于 `el-tooltip`的`v-ellipsis-tooltip` 的指令用于我们文本宽度超长的场景下移动上去渲染 `el-tooltip`,不然就不渲染先来预览一下效果吧\~ ![2023-07-02 09.59.17.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/72c7107cdce143bea6f8127c719bbf58~tplv-k3u1fbpfcp-watermark.image#?w=312\&h=224\&s=90504\&e=gif\&f=104\&b=fefefe) 彦祖们,已更新 # 写在最后未来想做的还有很多 * [ ] 支持 % 比的配置 * [ ] 支持 exclude, 排除某些 dom 的意外触发引起的bug * [ ] 支持嵌套类型的父子孙节点的更新 * [x] 支持过渡区域大小的配置 * [ ] ... 个人能力有限 *如有不对,欢迎指正*🌟 *如有帮助,建议小心心大拇指三连*🌟 ## 彩蛋宁波团队还有一个hc, 带你`海鲜自助`。欢迎彦祖们私信😚