JoyD/Web/Vue/CubeLib/README.md

JoyD Vue3 CubeLib 组件库

简介

JoyD Vue3 CubeLib 是一个基于 Vue 3 开发的组件库，提供了一系列可复用的 UI 组件，旨在简化 Web 应用程序的开发流程。

特性

• 基于 Vue 3 构建
• TypeScript 支持
• 模块化设计
• 易于定制和扩展
• 丰富的组件库

安装

npm install joyd.web.vue.cubelib
# 或者
yarn add joyd.web.vue.cubelib

使用

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import CubeLib from 'joyd.web.vue.cubelib'

const app = createApp(App)
app.use(CubeLib)
app.mount('#app')

按需导入

import { CubeSplitter } from 'joyd.web.vue.cubelib'

// 在组件中使用
export default {
  components: {
    CubeSplitter
  }
}

组件文档

CubeSplitter

可调整大小的分隔条组件，用于在布局中创建可调整大小的面板。

Props

• direction: 分隔条方向，可选值：vertical (垂直), horizontal (水平)
• position: 分隔条位置，可选值：left, right, top, bottom
• initialSize: 初始尺寸
• minSize: 最小尺寸
• maxSize: 最大尺寸

Events

• resize: 调整大小时触发
• resizeEnd: 调整大小结束时触发
• collapse: 折叠面板时触发
• expand: 展开面板时触发

使用示例

<template>
  <div class="container">
    <div class="left-panel" :style="{ width: leftPanelWidth + 'px' }"></div>
    <CubeSplitter
      direction="vertical"
      position="left"
      :min-size="50"
      :max-size="500"
      :initial-size="200"
      @resize="onLeftResize"
      @resize-end="onLeftResizeEnd"
      @collapse="onLeftCollapse"
      @expand="onLeftExpand"
    />
    <div class="middle-panel"></div>
    <CubeSplitter
      direction="vertical"
      position="right"
      :min-size="0"
      :max-size="500"
      :initial-size="200"
      @resize="onRightResize"
      @resize-end="onRightResizeEnd"
      @collapse="onRightCollapse"
      @expand="onRightExpand"
    />
    <div class="right-panel" :style="{ width: rightPanelWidth + 'px' }"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const leftPanelWidth = ref(200)
const rightPanelWidth = ref(200)

// 从 localStorage 加载保存的尺寸
onMounted(() => {
  const savedLeftWidth = localStorage.getItem('leftPanelWidth')
  const savedRightWidth = localStorage.getItem('rightPanelWidth')
  
  if (savedLeftWidth) {
    leftPanelWidth.value = parseInt(savedLeftWidth)
  }
  
  if (savedRightWidth) {
    rightPanelWidth.value = parseInt(savedRightWidth)
  }
})

// 左侧分隔条调整
const onLeftResize = (newWidth) => {
  leftPanelWidth.value = newWidth
}

const onLeftResizeEnd = (finalWidth) => {
  // 只保存正常尺寸，不保存折叠状态
  if (finalWidth > 50) {
    localStorage.setItem('leftPanelWidth', finalWidth.toString())
  }
}

const onLeftCollapse = (newSize) => {
  leftPanelWidth.value = newSize
}

const onLeftExpand = (newSize) => {
  leftPanelWidth.value = newSize
}

// 右侧分隔条调整
const onRightResize = (newWidth) => {
  rightPanelWidth.value = newWidth
}

const onRightResizeEnd = (finalWidth) => {
  // 只保存正常尺寸，不保存折叠状态
  if (finalWidth > 0) {
    localStorage.setItem('rightPanelWidth', finalWidth.toString())
  }
}

const onRightCollapse = (newSize) => {
  rightPanelWidth.value = newSize
}

const onRightExpand = (newSize) => {
  rightPanelWidth.value = newSize
}
</script>

<style scoped>
.container {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.left-panel {
  background-color: #f0f0f0;
  min-width: 50px;
}

.middle-panel {
  flex: 1;
  background-color: #ffffff;
}

.right-panel {
  background-color: #f0f0f0;
  min-width: 0;
  border-left: 1px solid #e0e0e0;
}
</style>

CSS 变量

CubeSplitter 组件支持通过 CSS 变量进行定制：

:root {
  --cube-splitter-color: #e0e0e0;
  --cube-splitter-hover-color: #667eea;
  --cube-splitter-active-color: #5568d3;
  --cube-splitter-handle-color: #fff;
  --cube-splitter-handle-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  --cube-splitter-collapsing-color: #667eea;
  --cube-splitter-collapsing-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
  --cube-splitter-transition-speed: 0.3s;
}

常见问题解答

Q: 如何保存分隔条的位置？

A: 可以使用 @resize-end 事件来保存最终的尺寸到 localStorage 或其他存储中，然后在组件挂载时从存储中加载。

Q: 如何在最小尺寸和当前尺寸之间切换？

A: 单击分隔条的句柄即可在最小尺寸和当前尺寸之间切换。

Q: 为什么右侧分隔条的拖拽方向与左侧不同？

A: CubeSplitter 组件统一了拖拽方向逻辑：向左/上拖动减小尺寸，向右/下拖动增大尺寸，无论分隔条位置是左还是右。

贡献

我们欢迎社区贡献！请阅读 贡献指南 了解如何参与。

许可证

MIT License

联系我们

• 邮箱：support@joyd.com
• 网站：https://www.joyd.com

版本历史

请查看 CHANGELOG.md 了解版本更新历史。