1 Star 1 Fork 0

YSY-DO-IT / DivSplitterV3

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

VUE3 div分割(div-splitter-v3)

  • 基于 VUE 3.x

div-splitter-v2 vue2版本源码

div-splitter-v3 vue3版本源码

安装与使用

安装

npm install div-splitter-v3

引用 div-splitter-v3

import App from './App.vue';
const app = createApp(App);
import '../node_modules/div-splitter-v3/style.css'; //引入组件样式
import DivSplitterV3 from 'div-splitter-v3';

app.use(DivSplitterV3);

使用组件

<DivLR leftWidth="260px" border width="900px" maxLeftWidth="300">
  <template #left="{ width, rate, totalWith }"></template>
  <template #right="{ width, rate, totalWith }">
    <DivUD minUpHeight="50">
      <template #up="{ height, rate, totalHeight }"></template>
      <template #dowm="{ height, rate, totalHeight }"></template>
    </DivUD>
  </template>
</DivLR>

开发文档(API)

DivLR Attributes属性列表

名称 类型 默认值 描述
width String '100%' 宽度,可选值px,%
height String '100%' 高度,可选值px,%
leftWidth String '100px' 左侧区域加载时宽度,可选值px,%
minLeftWidth Number, String 0 左侧区域最小宽度,单位px,数值
maxLeftWidth Number, String 0 左侧区域最大宽度,单位px,数值
leftFixed Boolean false 左侧区域是否固定住
splitLine String 'fullLine' 区域分割线 dashed虚线 fullLine实线 none不显示
border Boolean false 外层边框实现显示,默认不显示
disabled Boolean false 禁止拖拽
collapse Boolean false 是否开启折叠功能

DivLR Events事件列表

事件 说明 回调参数
closeLeft 关闭左侧,不受最大最小左侧宽度参数影响
openLeft 打开左侧,还原到上次打开的位置

DivLR Methods方法列表

方法 说明 参数
closeLeft 关闭左侧
openLeft 打开左侧

DivLR Slot插槽列表

插槽 说明 参数
left 左侧区域内容 {width, rate, totalWith}
right 右侧区域内容 {width, rate, totalWith}




DivUD 属性列表

名称 类型 默认值 描述
width String '100%' 宽度,可选值px,%
height String '100%' 高度,可选值px,%
upHeight String '50px' 上方区域加载时宽度,可选值px,%
minUpHeight Number, String 0 上方区域最小宽度,单位px,数值
maxUpHeight Number, String 0 上方区域最大宽度,单位px,数值
upFixed Boolean false 上方区域是否固定住
splitLine String 'fullLine' 区域分割线 dashed虚线 fullLine实线 none不显示
border Boolean false 外层边框实现显示,默认不显示
disabled Boolean false 禁止拖拽
collapse Boolean false 是否开启折叠功能

DivUD Events事件列表

事件 说明 回调参数
closeUp 关闭上方,不受最大最小上方高度参数影响
openUp 打开上方,打开到上次的位置

DivUD Methods方法列表

方法 说明 参数
closeUp 关闭上方
openUp 打开上方

DivUD Slot插槽列表

插槽 说明 参数
up 上方区域内容 {width, rate, totalWith}
down 下方区域内容 {width, rate, totalWith}
MIT License Copyright (c) 2024 YSY-DO-IT Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

div分割器,构建左右布局,上下布局的界面! 可拖拽调整,相互嵌套! 方便快速构建基本界面结构! 展开 收起
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/ysy-do-it_admin/DivSplitterV3.git
git@gitee.com:ysy-do-it_admin/DivSplitterV3.git
ysy-do-it_admin
DivSplitterV3
DivSplitterV3
master

搜索帮助