vue-dd-ui
Version:
基于 Element UI 二次封装的 Vue.js 组件库，提供17个精心设计的组件和70+工具函数
236 lines (175 loc) • 5.28 kB
Markdown
# Vue DD UI
[](https://www.npmjs.com/package/vue-dd-ui)
[](https://www.npmjs.com/package/vue-dd-ui)
[](https://gitee.com/zengdu/vue-dd-ui/blob/master/LICENSE)
🚀 基于 Element UI 二次封装的 Vue.js 企业级组件库
## ✨ 特性
- 📦 **17个精心设计的组件** - 覆盖常见业务场景
- 🛠️ **完整的开发工具** - 支持按需加载、多种模块格式
- 📱 **响应式设计** - 移动端友好
- 🎨 **主题定制** - 支持自定义主题和样式
- ⚡ **性能优化** - 基于 ES modules，支持 tree shaking
- 🔧 **70+工具函数** - 常用业务工具函数
- 📋 **详细文档** - 完整的使用说明和示例
## 📦 安装
```bash
# npm
npm install vue-dd-ui
# yarn
yarn add vue-dd-ui
# pnpm
pnpm add vue-dd-ui
```
## 🚀 快速开始
### 完整引入
```javascript
import Vue from "vue";
import VueDdUi from "vue-dd-ui";
// 引入样式文件
import "vue-dd-ui/src/css/index.css";
Vue.use(VueDdUi);
```
### 按需引入 (推荐)
```javascript
// ES模块方式
import { ddButton, ddForm, ddList } from "vue-dd-ui/es";
Vue.use(ddButton);
Vue.use(ddForm);
Vue.use(ddList);
```
### CDN引用
```html
<!-- 引入Vue -->
<script src="https://unpkg.com/vue@2.7.16/dist/vue.js"></script>
<!-- 引入Element UI -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<!-- 引入Vue DD UI -->
<script src="https://unpkg.com/vue-dd-ui@1.1.0/dist/main.umd.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/vue-dd-ui@1.1.0/src/css/index.css"
/>
```
## 🎯 组件概览
### 基础组件
| 组件 | 说明 | 状态 |
| ------ | ---------- | ---- |
| Button | 按钮组件 | ✅ |
| Icon | 图标组件 | ✅ |
| Html | 富文本组件 | ✅ |
### 表单组件
| 组件 | 说明 | 状态 |
| ----------- | ---------- | ---- |
| Form | 动态表单 | ✅ |
| Debounce | 防抖输入框 | ✅ |
| BrowseFile | 文件浏览器 | ✅ |
| ImgCropper | 图片裁剪 | ✅ |
| SelectIcon | 图标选择器 | ✅ |
| PopupSelect | 弹出选择器 | ✅ |
| SelectTree | 树形选择器 | ✅ |
### 数据展示
| 组件 | 说明 | 状态 |
| -------- | -------- | ---- |
| List | 增强列表 | ✅ |
| FoldCard | 折叠卡片 | ✅ |
| Weather | 天气组件 | ✅ |
| Ztree | 树形组件 | ✅ |
### 布局组件
| 组件 | 说明 | 状态 |
| -------------- | ------------ | ---- |
| LayoutAbsolute | 绝对定位布局 | ✅ |
| Dialog | 对话框 | ✅ |
## 🔧 工具函数
提供70+个实用工具函数：
```javascript
// 日期处理
this.$ddDateUtil.format(new Date(), "YYYY-MM-DD");
// 数组操作
this.$ddUnique([1, 1, 2, 3]); // [1,2,3]
// 树形数据处理
this.$ddTreeToArray(treeData);
// 文件下载
this.$ddDownloadFile(data, "filename.xlsx");
// 消息提示
this.$ddMessage("操作成功", "success");
// 更多...
```
### 示例代码
```vue
<template>
<div>
<!-- 使用dd-button组件 -->
<dd-button label="点击我" type="primary" @click="handleClick" />
<!-- 使用dd-form动态表单 -->
<dd-form
:formItems="formItems"
:formData="formData"
@submit="handleSubmit"
/>
<!-- 使用dd-list增强列表 -->
<dd-list :columns="columns" :data="tableData" :pagination="true" />
</div>
</template>
<script>
export default {
data() {
return {
formItems: [
{ prop: "name", label: "姓名", type: "input" },
{ prop: "age", label: "年龄", type: "number" },
],
formData: { name: "", age: 0 },
columns: [
{ prop: "name", label: "姓名" },
{ prop: "age", label: "年龄" },
],
tableData: [],
};
},
methods: {
handleClick() {
this.$ddMessage("按钮被点击了！", "success");
},
handleSubmit(data) {
console.log("表单数据：", data);
},
},
};
</script>
```
## 📱 浏览器支持
| IE / Edge | Firefox | Chrome | Safari |
| ---------- | --------------- | --------------- | --------------- |
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions |
## 🤝 贡献指南
我们欢迎所有的贡献！
### 开发
```bash
# 克隆项目
git clone https://gitee.com/zengdu/vue-dd-ui.git
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 构建
npm run build
# 代码检查
npm run lint
```
## 📄 更新日志
详细更改记录请查看 [CHANGELOG](./CHANGELOG.md)。
## 📝 许可证
[MIT](./LICENSE)
## 💖 致谢
- [Element UI](https://element.eleme.cn/) - 优秀的 Vue.js 组件库
- [Vue.js](https://vuejs.org/) - 渐进式 JavaScript 框架
## 🔗 相关链接
- [Gitee仓库](https://gitee.com/zengdu/vue-dd-ui)
- [问题反馈](https://gitee.com/zengdu/vue-dd-ui/issues)
---
### 详细组件文档
[点击查看详细的组件使用文档](./COMPONENTS.md)