vue自定义组件——split-pane

这篇具有很好参考价值的文章主要介绍了vue自定义组件——split-pane。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

github地址: https://github.com/lxmghct/my-vue-components

组件介绍

  • props:
    • splitCount: 分割数量, default: 2
    • direction: 分割方向, 'vertical' or 'horizontal', default: 'horizontal'
    • defaultRatio: 默认比例, 类型为数组, default: [1/spiltCount, 1/spiltCount, ...]
  • slots:
    • ...
  • events:
    • @resize: 拖动分割条时触发, 参数为分割线两侧的div
    • @resize-stop: 拖动分割条结束时触发
  • methods:
    • changeItemSize(index, itemSize, dire='next') 改变第item个pane的大小, dire为next或prev, 表示修改当前pane时连带修改前一个pane还是后一个

效果展示

vue自定义组件——split-pane

设计思路

整个组件采用flex布局,通过设置整体的flex-direction控制分割方向,通过修改每个pane的style.flex控制每个pane的大小。

<div class="split-main" ref="splitMain"
     :class="direction === 'vertical' ? 'split-vertical' : 'split-horizontal'">
  <template v-if="direction === 'vertical'">
    <div v-for="i in splitCount" :key="i" ref="splitItem"
         class="split-vertical-item">
      <div class="split-vertical-line" v-if="i < splitCount"
           @mousedown="_startDrag(i)"
           @touchstart="_startDrag(i)"></div>
      <div class="split-vertical-content">
        <slot :name="`pane${i}`"></slot>
      </div>
    </div>
  </template>
  <template v-else>
    <div v-for="i in splitCount" :key="i" ref="splitItem"
         class="split-horizontal-item">
      <div class="split-horizontal-line" v-if="i < splitCount"
           @mousedown="_startDrag(i)"
           @touchstart="_startDrag(i)"></div>
      <div class="split-horizontal-content">
        <slot :name="`pane${i}`"></slot>
      </div>
    </div>
  </template>
</div>

通过v-for循环生成分割数量的pane,每个pane中间插入分割线,分割线通过@mousedown@touchstart事件绑定_startDrag方法,该方法用于监听鼠标或手指的移动事件,从而实现拖动分割线改变pane大小的功能。

_startDrag (index) {
  this.dragIndex = index - 1
},
_onMouseMove (e) {
  if (this.dragIndex === -1) {
    return
  }
  let items = this.$refs.splitItem
  let item1 = items[this.dragIndex]
  let item2 = items[this.dragIndex + 1]
  let rect1 = item1.getBoundingClientRect()
  let rect2 = item2.getBoundingClientRect()
  let ratio1, ratio2
  let minLen = this.minLen
  if (this.direction === 'vertical') {
    let height = this.$refs.splitMain.clientHeight
    let tempY = e.clientY - rect1.top > minLen ? e.clientY : rect1.top + minLen
    tempY = rect2.bottom - tempY > minLen ? tempY : rect2.bottom - minLen
    ratio1 = (tempY - rect1.top) / height
    ratio2 = (rect2.bottom - tempY) / height
  } else {
    let width = this.$refs.splitMain.clientWidth
    let tempX = e.clientX - rect1.left > minLen ? e.clientX : rect1.left + minLen
    tempX = rect2.right - tempX > minLen ? tempX : rect2.right - minLen
    ratio1 = (tempX - rect1.left) / width
    ratio2 = (rect2.right - tempX) / width
  }
  item1.style.flex = ratio1
  item2.style.flex = ratio2
  e.preventDefault()
  this.$emit('resize', item1, item2)
},
_onMouseUp () {
  if (this.dragIndex === -1) {
    return
  }
  this.dragIndex = -1
  this.$emit('resize-stop')
}

完整代码在github上。https://github.com/lxmghct/my-vue-components文章来源地址https://www.toymoban.com/news/detail-412716.html

到了这里,关于vue自定义组件——split-pane的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue实现省市区三级联动地址选择组件

    昨天收到一个新的需求,需要选择地址,因此就要做一个省市区三级联动的组件来使用,在网上找了一些资源,然后进行了尝试,没想到就这么成功了!要记录一下方便后续使用。 效果如下:  下面就记录一下代码叭! 后面因为需要动态绑定,以及处理回显问题,就需要进

    2024年02月12日
    浏览(76)
  • MySQL 自定义 split 存储过程

            MySQL 没有提供 split 函数,但可以自己建立一个存储过程,将具有固定分隔符的字符串转成多行。之所以不能使用自定义函数实现此功能,是因为 MySQL 的自定义函数自能返回标量值,不能返回多行结果集。 MySQL 8: MySQL 5: 测试: 返回指定下标的元素:

    2024年02月11日
    浏览(29)
  • 【分页表格】Vue2 + Element UI实现自定义的分页表格组件(自定义Vue组件)

    这篇文章,主要介绍Vue2 + Element UI实现自定义的分页表格组件(自定义Vue组件)。 目录 一、分页表格 1.1、运行效果 1.2、运行环境 1.3、案例代码

    2024年02月11日
    浏览(55)
  • Vue组件解析:自定义表格组件ByTable详解

    【简介】:本文将介绍一个基于Vue框架和elementUi的自定义表格组件ByTable,通过阅读本文,你将了解到ByTable组件的使用方式、属性和插槽的配置方法,以及如何通过自动请求接口获取表格数据和实现分页功能。 ByTable是一个通用的Vue表格组件,用于展示数据并提供分页功能。它

    2024年02月10日
    浏览(37)
  • vue自定义日历小组件

    自己开发的项目需要用到类似博客侧边栏小日历组件,觉得自己造一个比较随心所欲,更能满足自己的需求,所以决定自己开发一个。最终效果如图所示。 我的这个日历组件主要分为导航栏区和主要内容区,导航栏按钮样式什么的都是自定义的,很简单,源码有就不罗嗦。主

    2023年04月08日
    浏览(39)
  • 前端Vue基于腾讯地图Api实现的选择位置组件 返回地址名称详细地址经纬度信息

    前端Vue基于腾讯地图Api实现的选择位置组件 返回地址名称详细地址经纬度信息, 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下: 使用方法 HTML代码实现部分

    2024年02月11日
    浏览(67)
  • vue3笔记:自定义组件

    自定义组件,举个🌰: 1、封装自定义组件 CustomList.vue src 底下 type 文件夹中声明的 interface 接口文件 2、在 App.vue 中使用自定义组件 CustomList.vue 1、全局注册 在 main.ts 中使用 app.component(\\\'MyComponent\\\', MyComponent) 全局注册一个组件,可以在app内的任何地方使用。 缺点: 无法在生产打

    2024年02月08日
    浏览(49)
  • 前端vue自定义table 表格 表格组件 Excel组件

    前端组件化开发与Excel组件设计 一、前端开发的复杂性与组件化的必要性 随着技术的发展,前端开发的复杂度越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。

    2024年02月09日
    浏览(52)
  • [自定义 Vue 组件] 小尾巴下拉菜单组件(2.0) TailDropDown

    文章归档:https://www.yuque.com/u27599042/coding_star/kcoem6dgyn8drglb [自定义 Vue 组件] 下拉菜单(1.0) DropDownMenu:https://www.yuque.com/u27599042/coding_star/llltv52tchmatwg4 在 src 目录下,创建 constant 目录,在其中新建 tail_drop_down_constant.js 文件,在其中声明组件所依赖的常量 在 src 目录下,创建 sty

    2024年02月05日
    浏览(34)
  • 【Vue3】自定义Input组件

    实现一个类似el-input的组件,可以v-model双向绑定。 v-model作用于组件时,相当于 父组件 自定义Input组件 v-model默认以 :modelValue 以及 @update:modelValue 两步实现。 如果绑定多个v-model就需要自定义属性名,可以在v-model后添加 :属性名 子组件中将原先modelValue变为自定义属性名 子组件

    2024年03月23日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包