vue3中自定义split组件,分割为可以拖拽调整宽度的左右两块。

一、最终效果

mysplit

二、组件代码

<template>
    <div ref="container" class="container">
        <div class="my-left" :style="leftStyle">
            <slot name="left"></slot>
        </div>
        <div ref="spliter" style="height: 100%; width: 10px" class="my-spliter" />
        <div class="my-right" :style="rightStyle">
            <slot name="right"></slot>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const container = ref(null);
const spliter = ref(null);
const leftStyle = ref({});
const rightStyle = ref({});
const ratio = ref(0.5);

function updatePaneStyles(newRatio) {
    leftStyle.value = { width: `calc(${newRatio * 100}% - 5px)` };
    rightStyle.value = { width: `calc(${(1 - newRatio) * 100}% - 5px)` };
}

function handleResize(e) {
    const containerWidth = container.value.clientWidth;
    const rect = container.value.getBoundingClientRect();
    const initX = rect.left;
    function onMouseMove(e) {
        e.preventDefault();
        // 限制鼠标移动事件的范围为container容器四至范围内
        if (e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom) {
            onMouseUp();
        }
        const moveScale = (e.clientX - initX) / containerWidth;
        const newRatio = moveScale;
        if (newRatio > 0.05 && newRatio < 0.95) {
            ratio.value = newRatio;
            updatePaneStyles(newRatio);
        }
    }

    function onMouseUp() {
        document.removeEventListener('mousemove', onMouseMove);
        document.removeEventListener('mouseup', onMouseUp);
    }

    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
}

function onDblClick(e) {
    ratio.value = 0.5;
    updatePaneStyles(ratio.value);
}

onMounted(() => {
    updatePaneStyles(ratio.value);
    if (spliter.value) {
        spliter.value.addEventListener('mousedown', handleResize, false);
        spliter.value.addEventListener('dblclick', onDblClick, false);
    }
})
onUnmounted(() => {
    if (spliter.value) {
        spliter.value.removeEventListener('mousedown', handleResize);
        spliter.value.removeEventListener('dblclick', onDblClick);
    }
})
</script>

<style scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
}

.my-left {
    height: 100%;
    z-index: 1;
}

.my-right {
    height: 100%;
    z-index: 1;
}

.my-spliter {
    cursor: col-resize;
    position: relative;
    z-index: 2;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    &:before,
    &:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: rgba(0, 0, 0, 0.15);
        width: 1.5px;
        height: 30px;
    }

    &:before {
        margin-left: -2px;
    }

    &:after {
        margin-left: 1px;
    }

    &:hover:before,
    &:hover:after {
        width: 1.5px;
        background-color: rgba(0, 0, 0, 0.35);
    }
}
</style>

三、使用实例

<template>
    <div style="color:#000000;height: 100%;width:100%;background-color: #ffffff">
        <MySplit>
            <template #left>
                <div style="border:1px solid #eee;height: 100%;background-color: #d9ecff">
                    鼠标移入中间的的spliter按下鼠标左键并进行左右拖动,可以改变左右分块的宽度。
                </div>
            </template>
            <template #right>
                <div style="border:1px solid #eee;height: 100%;background-color:#fcd3d3">
                    左右分块的宽度默认各占50%,鼠标移入spliter并双击会恢复默认占比。
                    <div style="color: red;">注意当拖动spliter时如果鼠标范围超过外框线会自动取消鼠标移动事件!</div>
                </div>
            </template>
        </MySplit>
    </div>
</template>

<script setup lang="ts">
import MySplit from '@/components/mySplit/index.vue';
</script>

<style scoped></style>
  • 5
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用`vue-draggable-resizable`插件来实现拖动调整左右两侧div的宽度。 首先在项目安装`vue-draggable-resizable`: ``` npm install vue-draggable-resizable --save ``` 然后在需要使用的组件引入: ```javascript import VueDraggableResizable from 'vue-draggable-resizable' import 'vue-draggable-resizable/dist/VueDraggableResizable.css' ``` 接着在组件使用`vue-draggable-resizable`: ```html <template> <div> <vue-draggable-resizable :w="leftWidth" :h="height" :x="0" :y="0" :min-width="minWidth" :max-width="maxWidth" :parent="true" :active="true" :grid="[1, 1]" :handles="['e']" @resize="onResize" > <div class="left"></div> </vue-draggable-resizable> <div class="divider"></div> <div class="right"></div> </div> </template> <script> import VueDraggableResizable from 'vue-draggable-resizable' import 'vue-draggable-resizable/dist/VueDraggableResizable.css' export default { components: { VueDraggableResizable }, data() { return { leftWidth: 200, height: 500, minWidth: 100, maxWidth: 400 } }, methods: { onResize() { // 当左侧div宽度改变时触发 } } } </script> ``` 在上面的代码,我们使用了`vue-draggable-resizable`组件来实现拖动调整左侧div的宽度。具体的参数和事件如下: - `w`:左侧div的宽度 - `h`:左侧div的高度 - `x`:左侧div的x坐标 - `y`:左侧div的y坐标 - `min-width`:左侧div的最小宽度 - `max-width`:左侧div的最大宽度 - `parent`:是否限制在父元素内 - `active`:是否活动状态 - `grid`:拖拽的网格大小 - `handles`:拖拽的手柄位置 - `@resize`:左侧div改变宽度时触发的事件 通过设置`handles`为`['e']`,表示只能横向拖动调整宽度,而不能改变高度。当左侧div的宽度改变时,会触发`@resize`事件,在事件处理函数可以实现相应的逻辑。 最后,为了实现左右两侧div并排显示,需要在样式设置: ```css .left { float: left; height: 100%; background-color: #f0f0f0; } .right { float: left; height: 100%; width: calc(100% - 200px); background-color: #e0e0e0; } .divider { float: left; height: 100%; width: 10px; background-color: #d0d0d0; } ``` 这样就可以实现拖动调整左右两侧div的宽度了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值