vue分割面板封裝實(shí)現(xiàn)記錄

更新時間：2022年03月22日 10:11:51 作者：木子石@

這篇文章主要為大家詳細(xì)介紹了vue分割面板封裝實(shí)現(xiàn)記錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue分割面板封裝實(shí)現(xiàn)的具體代碼，供大家參考，具體內(nèi)容如下

記錄一次分割面板的封裝：

?<template>
? <div class="split-pane-wrapper" ref="outer">
? ? <div class="pane pane-left" :style="{ width: leftOffsetPercent }">
? ? ? <slot name="left"></slot>
? ? </div>
? ? <div
? ? ? class="pane-trigger-con"
? ? ? @mousedown="handleMousedown"
? ? ? :style="{ left: triggerLeft, width: `${triggerWidth}px` }"
? ? >
? ? //中間分割按鈕
? ? ? <div class="pane-trigger-con__button">
? ? ? ? <div v-for="i in 10" :key="i"></div>
? ? ? </div>
? ? </div>
? ? <div class="pane pane-right" :style="{ left: leftOffsetPercent }">
? ? ? <slot name="right"></slot>
? ? </div>
? </div>
</template>
<script>
export default {
? name: "SplitPane",
? props: {
? ? ? //分割值
? ? value: {
? ? ? type: Number,
? ? ? default: 0.5,
? ? },
? ? //按鈕寬度
? ? triggerWidth: {
? ? ? type: Number,
? ? ? default: 8,
? ? },
? ? //最大分割值/最小分割值
? ? min: {
? ? ? type: Number,
? ? ? default: 0.1,
? ? },
? ? max: {
? ? ? type: Number,
? ? ? default: 0.9,
? ? },
? },
? data() {
? ? return {
? ? ? // leftOffset: 0.3,
? ? ? canMove: false,
? ? ? initOffset: 0,
? ? };
? },
? computed: {
? ? ? //計算左邊面板的寬度
? ? leftOffsetPercent() {
? ? ? return `${this.value * 100}%`;
? ? },
? ? //右邊面板的marginleft
? ? triggerLeft() {
? ? ? return `calc(${this.value * 100}% - ${this.triggerWidth / 2}px)`;
? ? },
? },
? methods: {
? ? ? //鼠標(biāo)點(diǎn)擊 ?鼠標(biāo)移動事件 ?計算偏差
? ? handleMousedown(event) {
? ? ? document.addEventListener("mousemove", this.handleMousemove);
? ? ? document.addEventListener("mouseup", this.handleMouseup);
? ? ? this.initOffset =
? ? ? ? event.pageX - event.srcElement.getBoundingClientRect().left;
? ? ? this.canMove = true;
? ? },
? ? //鼠標(biāo)移動事件 計算移動距離
? ? handleMousemove(event) {
? ? ? if (!this.canMove) return;
? ? ? const outerRect = this.$refs.outer.getBoundingClientRect();
? ? ? let offsetPercent =
? ? ? ? (event.pageX -
? ? ? ? ? this.initOffset +
? ? ? ? ? this.triggerWidth / 2 -
? ? ? ? ? outerRect.left) /
? ? ? ? outerRect.width;
? ? ? if (offsetPercent < this.min) offsetPercent = this.min;
? ? ? if (offsetPercent > this.max) offsetPercent = this.max;
? ? ? // this.$emit('input', offsetPercent)
? ? ? this.$emit("update:value", offsetPercent);
? ? },
? ? handleMouseup() {
? ? ? this.canMove = false;
? ? },
? },
};
</script>
<style lang="scss">
.split-pane-wrapper {
? height: 100%;
? width: 100%;
? position: relative;
? .pane {
? ? position: absolute;
? ? top: 0;
? ? height: 100%;
? ? &-left {
? ? ? background: transparent;
? ? ? padding: 10px;
? ? ? box-sizing: border-box;
? ? }
? ? &-right {
? ? ? box-sizing: border-box;
? ? ? right: 0;
? ? ? bottom: 0;
? ? ? background: transparent;
? ? ? padding: 10px;
? ? }
? ? &-trigger-con {
? ? ? height: 100%;
? ? ? background: rgb(240, 240, 240);
? ? ? position: absolute;
? ? ? top: 0;
? ? ? z-index: 10;
? ? ? user-select: none;
? ? ? cursor: col-resize;
? ? ? .pane-trigger-con__button {
? ? ? ? border: 1px solid lightgrey;
? ? ? ? width: calc(100% - 2px);
? ? ? ? height: 20px;
? ? ? ? margin: 0 auto;
? ? ? ? position: relative;
? ? ? ? top: 50%; /*偏移*/
? ? ? ? transform: translateY(-50%);
? ? ? ? border-radius: 2px;
? ? ? ? div {
? ? ? ? ? margin: 1px 0;
? ? ? ? ? width: 100%;
? ? ? ? ? height: 1px;
? ? ? ? ? background-color: lightgrey;
? ? ? ? }
? ? ? }
? ? }
? }
}
</style>

頁面使用split-pane：

?<div class="split-pane-con">
? ? ? ? <split-pane :value.sync="offset">
? ? ? ? ? <div slot="left"><el-input></el-input></div>
? ? ? ? ? <div slot="right"><el-input></el-input></div>
? ? ? ? </split-pane>
? </div>
? ? ??
? data() {
? ? return {
? ? ? offset: 0.4,
? ? };
? },

效果：