@chengly/components

🎉 基于 Vue 3、Element Plus 的通用表单组件库

✨ 特性

• 🎨 基于 Element Plus 设计语言
• 🔥 Vue 3 + JavaScript 支持
• 📦 开箱即用的高质量表单组件
• 🛠️ 统一的组件API设计
• 🎭 支持多种导入方式
• 📱 支持 ES Module 和 UMD 格式

📦 安装

# npm
npm install @chengly/components

# yarn
yarn add @chengly/components

# pnpm
pnpm add @chengly/components

🚀 快速开始

全局注册

import { createApp } from "vue";
import VueComponents from "@chengly/components";

const app = createApp(App);
// 注册组件库
Object.keys(VueComponents).forEach((key) => {
  if (key !== "default") {
    app.component(key, VueComponents[key]);
  }
});

按需导入

<template>
  <div>
    <!-- 使用输入框组件 -->
    <component :is="inputComponent" />
  </div>
</template>

<script setup>
import { input } from "@chengly/components";

// 动态加载组件
const inputComponent = input(""); // 传入模式参数
</script>

📚 组件列表

🎯 表单组件

• input - 输入框组件
• select - 选择器组件
• checkbox - 复选框组件
• radio - 单选框组件
• date - 日期选择器组件
• time - 时间选择器组件
• timeSelect - 时间选择组件
• number - 数字输入框组件
• color - 颜色选择器组件
• rate - 评分组件
• slider - 滑块组件
• switch - 开关组件
• cascader - 级联选择器组件
• tree - 树形控件组件
• treeSelect - 树形选择器组件
• transfer - 穿梭框组件
• autocomplete - 自动完成组件
• staticInfo - 静态信息展示组件

🎨 使用示例

<template>
  <div class="form-demo">
    <!-- 输入框 -->
    <component :is="inputComponent" />

    <!-- 选择器 -->
    <component :is="selectComponent" />

    <!-- 日期选择器 -->
    <component :is="dateComponent" />
  </div>
</template>

<script setup>
import { input, select, date } from "@chengly/components";

// 加载组件
const inputComponent = input("");
const selectComponent = select("");
const dateComponent = date("");
</script>

📋 组件API

所有组件都基于统一的设计模式：

// 组件函数签名
const component = componentName(mode);
// mode: 组件模式参数，用于不同的渲染方式

📖 依赖要求

必需依赖

• Vue >= 3.0.0

对等依赖

• element-plus >= 2.0.0
• d-render (内部依赖)
• @d-render/shared (内部依赖)

🌐 浏览器支持

• Chrome >= 87
• Firefox >= 78
• Safari >= 14
• Edge >= 88

🛠️ 开发

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建组件库
pnpm build:lib

# 代码格式化
pnpm lint:format

📁 项目结构

src/
├── autocomplete/        # 自动完成组件
├── cascader/           # 级联选择器组件
├── checkbox/           # 复选框组件
├── color/              # 颜色选择器组件
├── date/               # 日期选择器组件
├── input/              # 输入框组件
├── number/             # 数字输入框组件
├── radio/              # 单选框组件
├── rate/               # 评分组件
├── select/             # 选择器组件
├── slider/             # 滑块组件
├── static-info/        # 静态信息组件
├── switch/             # 开关组件
├── time/               # 时间选择器组件
├── time-select/        # 时间选择组件
├── transfer/           # 穿梭框组件
├── tree/               # 树形控件组件
├── tree-select/        # 树形选择器组件
├── widgets/            # 工具组件
├── main.js             # 组件集合
└── index.js            # 入口文件

dist/                   # 构建产物
├── index.es.js         # ES模块版本
├── index.umd.js        # UMD版本
└── *.map               # Source Map文件

🤝 贡献

欢迎提交 Pull Request 和 Issue！

📄 许可证

MIT License

🙏 致谢

• Vue 3
• Element Plus
• Vite

🔮 路线图

• [ ] 完善组件文档
• [ ] 添加组件示例
• [ ] 优化组件API
• [ ] 添加单元测试
• [ ] 支持主题定制