基于vue3的splitter组件

基于vue2版（https://blog.csdn.net/losedguest/article/details/106281367）
修改如下(SpliterVbox.vue)

<template><div class="spliter-box" ref="spliterBox"><div class="spliter-left" ref="spliterLeft" :style="{ width: leftWidth + 'px' }"><slot name="leftBox"></slot></div><divclass="spliter-line"ref="spliterLine":style="{ left: leftWidth + 'px' }"@mousedown.stop="ChangeLeftWith"><i></i><spanclass="ico spliter-ico-left":class="{ 'spliter-ico-right': unexpand }"@click.stop="ToggleExpand"></span></div><divclass="spliter-right"ref="spliterRight":style="{ left: leftWidth + 10 + 'px', width: 'calc(100% - ' + (leftWidth + 10) + 'px)' }"><slot name="rightBox"></slot></div></div>
</template><script setup>
import { ref, onMounted } from 'vue';let oldLeftWidth = 200,leftWidth = ref(200), // 左侧栏宽度unexpand = ref(false), // 左侧栏是否折叠MaxWidth = ref(0);const spliterBox = ref(null);
const spliterLine = ref(null);
const spliterLeft = ref(null);
const spliterRight = ref(null);
onMounted(() => {MaxWidth.value = spliterBox.value.clientWidth - spliterLine.value.offsetWidth;
});function ToggleExpand() {unexpand.value = !unexpand.value;if (!unexpand.value) {// 展开leftWidth.value = oldLeftWidth; // 还原原始宽度} else {// 收起来oldLeftWidth = leftWidth.value; // 记住原始的宽度leftWidth.value = 0;}
}
function ChangeLeftWith(e) {let disX = (e || event).clientX; //鼠標起始橫向距離let vleft = spliterLine.value.offsetLeft; //記錄起始的分割線的右邊距document.onmousemove = function (e) {let iT = vleft + ((e || event).clientX - disX); //分割線右邊距+移動距離spliterLine.value.style.margin = 0;iT < 0 && (iT = 0); //分割線超出左邊iT > MaxWidth && (iT = MaxWidth.value); //分割線超出右邊leftWidth.value = iT;return false;};document.onmouseup = function () {document.onmousemove = null;document.onmouseup = null;spliterLine.value.releaseCapture && spliterLine.value.releaseCapture();};spliterLine.value.setCapture && spliterLine.value.setCapture();return false;
}
</script><style>
.spliter-box {width: 100%;height: 100%;overflow: hidden;
}
.spliter-left {position: absolute;height: 100%;overflow: hidden;
}
.spliter-right {position: absolute;height: 100%;overflow: hidden;
}
.spliter-line {position: absolute;width: 6px;height: 100%;background-color: aliceblue;cursor: col-resize;border: 1px solid #00ffff;overflow: hidden;text-align: center;display: table-cell;vertical-align: middle;
}.spliter-line i {display: inline-block;height: 100%;vertical-align: middle;
}
.spliter-line span {width: 6px;height: 10px;vertical-align: middle;
}
.spliter-ico-left {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAKCAYAAACXDi8zAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE0QTk1QTVBRTYwMTExRTdBRjQxOERENjkwQUFCMDI0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE0QTk1QTVCRTYwMTExRTdBRjQxOERENjkwQUFCMDI0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTRBOTVBNThFNjAxMTFFN0FGNDE4REQ2OTBBQUIwMjQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTRBOTVBNTlFNjAxMTFFN0FGNDE4REQ2OTBBQUIwMjQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz79g2URAAAAbElEQVR42mL8//8/AzJgjJv638dAgYEBJAHDDLFT/jOsf/kfRDMhq2QIDIHrZIILuruhGMkEFtTXYWD4+pWB4c8fVB3YANP/RdmMDBevMDBwczMwsLCg6gBL7tyFqgPGAEuuX4PwDy4PAgQYADcaMJfVpu88AAAAAElFTkSuQmCC);background-repeat: no-repeat;background-position: center;background-size: contain;display: inline-block;
}
.spliter-ico-right {transform: rotate(180deg);-ms-transform: rotate(180deg); /* IE 9 */-webkit-transform: rotate(180deg); /* Safari and Chrome */
}
.spliter-line .ico {cursor: pointer;
}
</style>

使用方式不变

<template><div id="app">   <div  style="width:400px;height:300px;margin-left:200px;border:1px solid;overflow:visible;position:relative;"><SpliterVbox><template v-slot:leftBox>haha</template><template v-slot:rightBox>hehe</template></SpliterVbox></div></div>
</template><script>
import SpliterVbox from './components/SpliterVbox.vue'</script>

基于vue3的splitter组件相关推荐

项目实战：《智慧线上购物商城》：基于vue3+vite+vant4组件(一)
本项目主要是基于vue3和vite以及vant4组件所开发的移动端购物商城.项目没有接口,所运用的存储数据为json数据通过axios请求,以及Localstorage等技术实现数据. 开发的模型参考 ...
开源啦！一款基于Vue3 + Vite + TS的简历制作神器~~
开源地址欢迎大家提 issues 和点赞(star)支持! 前言目前市面上有不少在线制作简历的网站,不得不说,有些做得很好,提供的简历模板非常的漂亮!但是,相信有很多小伙伴不会去使用它们,毕竟贫穷 ...
基于vue3的pdf预览组件
最近在预览pdf.word等文件时,基于vue3封装的预览组件. 首先将pdf或word等文件拆分成一张张图片. ## 需要将pdf 拆解成一张张图片### 安装方式 ``` npm i pdf-pr ...
分享一个基于Vue3+TS构建Cesium组件库
分享一个基于Vue3+TS构建Cesium组件库点击进入 Vue Cesium官网 //vc-navigation <template><el-row ref="view ...
vant 项目_基于 vue3.x+vant3.x 搭建示例项目
今天给大家分享一些如何使用Vue3.0+Vant3搭建demo项目. 目前市面上有关vue3的项目并不多,vue3的UI组件库有ant-design-vue和vant-ui. 接下来讲解下使用vue3 ...
基于vue3的移动端音乐播放器
项目介绍这是一个基于vue3的移动端音乐项目,具有歌单.音乐搜索.音乐播放.登录等功能,后期会更新完善功能. 它具有以下不错的地方: 1. 使用rem布局来应对不同设备,保证设备之间的兼容性. 2. ...
Vue vben admin - 新鲜出炉的高颜值管理后台UI框架，基于 Vue3 和 Ant Design Vue
基于Vue3.0 / Vite / Ant Design 等火热开源项目构建,新鲜出炉,值得关注. 关于 Vue vben admin Vue Vben Admin 是一个基于 Vue3.0.Vite ...
基于VUE3的电子病历编辑器
基于VUE3的富文本编辑器,可同时实现医疗时间轴,电子病历编辑器,随访表单的设计与生成. 目前市面上的富文本编辑器大致可以分为三类 1.基于contenteditable 2.基于canvas 3.基 ...
基于Vue3实现扫码枪扫码并生成二维码的代码解析
基于Vue3实现扫码枪扫码并生成二维码的代码解析在本文中,我们将介绍如何使用Vue3实现扫码枪扫描条形码或二维码,并将其转换为二维码的过程.这个过程将涉及到以下步骤: 在Vue3项目中安装和导入vu ...
vite打包快几款基于vue3和vite的开箱即用的中后台管理模版
vite打包快的原因: 冷启动 1.esbuild构建依赖,go语言编写多线程打包. 2.原生的esm方式提供源码,浏览器分担了一部分工作. HMR热更新 1.缓存机制,利用浏览器http头部,源码模 ...

基于vue3的splitter组件

基于vue3的splitter组件相关推荐

最新文章

热门文章