zxd-base-components-utils

一个专为 Vue 3 设计的基础组件和工具方法库，提供常用的 UI 组件和实用工具函数。

✨ 特性

• 🎯 专为 Vue 3 设计 - 使用 Composition API 和 <script setup> 语法
• 📦 TypeScript 支持 - 完整的类型定义和类型安全
• 🎨 现代化设计 - 美观的 UI 组件和一致的视觉风格
• 🛠️ 丰富的工具方法 - 涵盖字符串、数组、对象、日期、数字等常用操作
• 📱 响应式设计 - 支持移动端和桌面端
• 📖 详细的文档 - 完整的 API 文档和使用示例

🚀 快速开始

安装

npm install zxd-base-components-utils

使用

全局注册

// main.ts
import { createApp } from 'vue'
import BaseComponentsUtils from 'zxd-base-components-utils'
import App from './App.vue'

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

按需引入

<template>
  <div>
    <Button variant="primary" @click="handleClick">
      点击我
    </Button>
    <Input v-model="value" placeholder="请输入内容" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Button, Input } from 'zxd-base-components-utils'

const value = ref('')

const handleClick = () => {
  console.log('按钮被点击')
}
</script>

📚 组件文档

Button 按钮

基础按钮组件，支持多种变体、大小和状态。

<template>
  <Button variant="primary" size="medium" @click="handleClick">
    主要按钮
  </Button>
</template>

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | variant | 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'primary' | 按钮变体 | | size | 'small' | 'medium' | 'large' | 'medium' | 按钮大小 | | disabled | boolean | false | 是否禁用 | | loading | boolean | false | 是否加载中 | | block | boolean | false | 是否块级元素 |

Input 输入框

功能丰富的输入框组件，支持多种类型和状态。

<template>
  <Input
    v-model="value"
    label="用户名"
    placeholder="请输入用户名"
    required
    :error="hasError"
    error-message="用户名不能为空"
  />
</template>

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | modelValue | string | number | '' | 输入框值 | | type | string | 'text' | 输入框类型 | | size | 'small' | 'medium' | 'large' | 'medium' | 输入框大小 | | variant | 'default' | 'filled' | 'outlined' | 'default' | 输入框变体 | | label | string | '' | 标签 | | placeholder | string | '' | 占位符 | | error | boolean | false | 错误状态 | | errorMessage | string | '' | 错误信息 | | required | boolean | false | 是否必填 |

Modal 模态框

灵活的模态框组件，支持自定义内容和操作。

<template>
  <Modal
    v-model="visible"
    title="确认操作"
    size="medium"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  >
    <p>您确定要执行此操作吗？</p>
  </Modal>
</template>

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | modelValue | boolean | false | 是否显示模态框 | | title | string | '' | 标题 | | size | 'small' | 'medium' | 'large' | 'full' | 'medium' | 模态框大小 | | closable | boolean | true | 是否可关闭 | | maskClosable | boolean | true | 是否点击遮罩层关闭 |

Card 卡片

用于展示内容的卡片组件。

<template>
  <Card
    title="卡片标题"
    subtitle="卡片副标题"
    variant="shadow"
    hoverable
  >
    <p>卡片内容</p>
    <template #footer>
      <Button size="small">操作</Button>
    </template>
  </Card>
</template>

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | title | string | '' | 标题 | | subtitle | string | '' | 副标题 | | variant | 'default' | 'bordered' | 'shadow' | 'flat' | 'default' | 卡片变体 | | hoverable | boolean | false | 是否可悬停 | | loading | boolean | false | 是否加载中 |

Loading 加载

多种样式的加载组件。

<template>
  <Loading type="spinner" text="加载中..." />
</template>

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | type | 'spinner' | 'dots' | 'pulse' | 'wave' | 'spinner' | 加载器类型 | | size | 'small' | 'medium' | 'large' | 'medium' | 加载器大小 | | color | string | '#3b82f6' | 加载器颜色 | | text | string | '' | 加载文本 | | fullscreen | boolean | false | 是否全屏显示 |

🛠️ 工具方法

字符串工具

import { capitalize, camelCase, kebabCase, isValidEmail } from 'zxd-base-components-utils'

// 首字母大写
capitalize('hello world') // 'Hello world'

// 驼峰命名
camelCase('hello world') // 'helloWorld'

// 短横线命名
kebabCase('helloWorld') // 'hello-world'

// 邮箱验证
isValidEmail('[email protected]') // true

数组工具

import { unique, groupBy, chunk, intersection } from 'zxd-base-components-utils'

// 数组去重
unique([1, 2, 2, 3, 3, 3]) // [1, 2, 3]

// 数组分组
groupBy([
  { category: 'A', value: 1 },
  { category: 'B', value: 2 },
  { category: 'A', value: 3 }
], 'category')

// 数组分块
chunk([1, 2, 3, 4, 5], 2) // [[1, 2], [3, 4], [5]]

// 数组交集
intersection([1, 2, 3], [2, 3, 4]) // [2, 3]

对象工具

import { deepClone, deepMerge, get, set } from 'zxd-base-components-utils'

// 深拷贝
const cloned = deepClone(originalObject)

// 深度合并
const merged = deepMerge(target, source1, source2)

// 获取嵌套属性
get(obj, 'user.profile.name', 'default')

// 设置嵌套属性
set(obj, 'user.profile.name', 'John')

日期工具

import { formatDate, getRelativeTime, isToday } from 'zxd-base-components-utils'

// 格式化日期
formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss')

// 相对时间
getRelativeTime(new Date(Date.now() - 60000)) // '1分钟前'

// 是否今天
isToday(new Date()) // true

数字工具

import { formatNumber, formatCurrency, formatFileSize } from 'zxd-base-components-utils'

// 格式化数字
formatNumber(1234567.89, 2) // '1,234,567.89'

// 格式化货币
formatCurrency(1234.56, 'CNY') // '¥1,234.56'

// 格式化文件大小
formatFileSize(1024 * 1024 * 5.5) // '5.5 MB'

函数工具

import { debounce, throttle, memoize } from 'zxd-base-components-utils'

// 防抖
const debouncedFn = debounce(fn, 300)

// 节流
const throttledFn = throttle(fn, 1000)

// 记忆化
const memoizedFn = memoize(expensiveFn)

🏗️ 开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 类型检查
npm run type-check

# 代码检查
npm run lint

# 修复代码格式
npm run lint:fix

📦 构建

# 构建生产版本
npm run build

# 发布到 npm
npm run release

🤝 贡献

欢迎贡献代码！请遵循以下步骤：

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

📄 许可证

本项目基于 MIT 许可证开源 - 查看 LICENSE 文件了解详情。

🙏 致谢

感谢所有为这个项目做出贡献的开发者们！

📞 联系方式

• 项目链接: https://github.com/zxd-tools/base-components-utils
• 问题反馈: https://github.com/zxd-tools/base-components-utils/issues