split panel vue3 ts 面板分割 点击访问线上演示demo

使用环境 ：VUE3、TS

    1. vue: "^3.3.4"
    2. vite: "^4.4.6"
    3. npm : 10.2.0
    4. node : v21.1.0

参数配置 props：

  mode?: Modes   // 分割模式
  triggerSize?: string   // 触发分割元素大小
  ratio?: number     // 分割比例，大于0小于1
  min?: number  // mode : horizontal 时使用 设置面板最小高度值
  max?: number  // mode : vertical 时使用 设置面板最大高度值
  bgStartPanel?: string  // 第一个面板默认背景
  bgEndPanel?: string    // 第二个面板默认背景
  bgTrigger?: string     // 触发分割元素默认背景
  bgTriggerHover?: string    // 触发分割元素鼠标移入背景

使用教程：

1. npm 安装插件:

npm install -S vue-split-panel-ts

2. script 引入挂载:

<script setup lang="ts">
import SplitPanel from "vue-split-panel-ts/SplitPanel.vue";
</script>

3. template 具体使用方式:

<template>
  <div>
    <h2>水平分割面板：</h2>
    <SplitPanel :ratio="7 / 10"/>
    <h2>垂直分割面板：</h2>
    <SplitPanel mode="vertical" :ratio="4 / 10">
      <template #start>
        <div v-for="i in 40" :key="i">学习如登山，不畏艰难，持之以恒，必能登峰造极。 {{ i }}</div>
      </template>
      <template #end>
        <div v-for="i in 40" :key="i">坚持是学习的最好伙伴，只要你不放弃，知识的大门总会为你敞开。 {{ i }}</div>
      </template>
    </SplitPanel>
  </div>
</template>

截至 2024-04-24 正在开发中 ，使用过程如有困难或改进方案可以发邮箱联系我改进：[email protected]