基于vue3的splitter组件

最新推荐文章于 2025-05-20 14:29:40 发布

游侠2010

最新推荐文章于 2025-05-20 14:29:40 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/hmilyyang2012/article/details/125189856

基于vue3的splitter组件

基于vue2版（https://blog.youkuaiyun.com/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>
    <div
      class="spliter-line"
      ref="spliterLine"
      :style="{ left: leftWidth + 'px' }"
      @mousedown.stop="ChangeLeftWith"
    >
      <i></i
      ><span
        class="ico spliter-ico-left"
        :class="{ 'spliter-ico-right': unexpand }"
        @click.stop="ToggleExpand"
      ></span
    ></div>
    <div
      class="spliter-right"
      ref="spliterRight"
      :style="{ left: leftWidth + 10 + 'px', width: 'calc(100% - ' + (leftWidth + 10) + 'px)' }"
      ><slot name="rightBox"></slot
    ></div>
  </div>
</template>
 
<script se