## 如下圖面板左右分割實現效果   ### 公共HTML代碼 ``` html ? <div ? ? ref="splitPane" ? ? class="split-pane" ? ? :class="direction" ? ? :style="{ flexDirection: direction }" ? ? @mouseleave="handleMouseleaveParent" ? > ? ? <div ? ? ? v-if="$slots.left" ? ? ? class="pane pane-one" ? ? ? :style="directionStyle + ':' + triggerDistance" ? ? > ? ? ? <slot name="left" /> ? ? </div> ? ? <div ? ? ? v-if="$slots.left && $slots.right" ? ? ? class="pane-trigger" ? ? ? :style="directionStyle + ':' + barWidthPX" ? ? ? @mousedown="handleMouseDown" ? ? /> ? ? <div v-if="$slots.right" class="pane pane-right"> ? ? ? <slot name="right" /> ? ? </div> ? </div> ``` ### 完整的邏輯代碼 感興趣的可以去查詢一下[`getBoundingClientRect`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect)方法。 ``` js export default { name: 'SplitPane', props: { direction: { type: String, default: 'row' // column }, min: { type: Number, default: 10 }, max: { type: Number, default: 60 }, defaultPercent: { // 區域1寬度 (%) type: Number, default: 15 }, triggerWidthBar: { // 滑動器寬度 （px） type: Number, default: 10 } }, data() { return { paneMovePercent: 50, // 區域1寬度 (%) triggerLeftOffset: 0 // 鼠標距滑動器左(頂)側偏移量 } }, computed: { directionStyle() { return this.direction === 'row' ? 'width' : 'height' }, triggerDistance() { return `calc(${this.paneMovePercent}% - ${this.triggerWidthBar / 2 + 'px'})` }, barWidthPX() { return this.triggerWidthBar + 'px' } }, mounted() { this.paneMovePercent = this.defaultPercent }, methods: { // 按下滑動器 handleMouseDown(e) { document.addEventListener('mousemove', this.handleMouseMove) document.addEventListener('mouseup', this.handleMouseUp) if (this.direction === 'row') { this.triggerLeftOffset = e.pageX - e.srcElement.getBoundingClientRect().left } else { this.triggerLeftOffset = e.pageY - e.srcElement.getBoundingClientRect().top } }, // 按下滑動器后移動鼠標 handleMouseMove(e) { const clientRect = this.$refs.splitPane.getBoundingClientRect() let paneMovePercent = 0 if (this.direction === 'row') { const offset = e.pageX - clientRect.left - this.triggerLeftOffset + this.triggerWidthBar / 2 paneMovePercent = (offset / clientRect.width) * 100 } else { const offset = e.pageY - clientRect.top - this.triggerLeftOffset + this.triggerWidthBar / 2 paneMovePercent = (offset / clientRect.height) * 100 } if (paneMovePercent < this.min) { paneMovePercent = this.min } if (paneMovePercent > this.max) { paneMovePercent = this.max } this.paneMovePercent = paneMovePercent // this.$emit('update:paneMovePercent', paneMovePercent) }, handleMouseleaveParent() { this.handleMouseUp() }, // 松開滑動器 handleMouseUp() { document.removeEventListener('mousemove', this.handleMouseMove) } } } ``` ### 樣式代碼 ``` scss .split-pane { height: 100%; width: 100%; display: flex; &.row { .pane { height: 100%; } .pane-trigger { height: 100%; cursor: col-resize; } } &.column { .pane { width: 100%; } .pane-trigger { width: 100%; cursor: row-resize; } } .pane-trigger { background: #fff; border-right: 1px solid $comBorder; &:hover { background: $comBorder; } } .pane-right { flex: 1; } } ```