vue-dd-ui
v1.1.2
Published
基于 Element UI 二次封装的 Vue.js 组件库，提供17个精心设计的组件和70+工具函数
Maintainers
danielzengReadme
Vue DD UI
🚀 基于 Element UI 二次封装的 Vue.js 企业级组件库
✨ 特性
- 📦 17个精心设计的组件 - 覆盖常见业务场景
- 🛠️ 完整的开发工具 - 支持按需加载、多种模块格式
- 📱 响应式设计 - 移动端友好
- 🎨 主题定制 - 支持自定义主题和样式
- ⚡ 性能优化 - 基于 ES modules，支持 tree shaking
- 🔧 70+工具函数 - 常用业务工具函数
- 📋 详细文档 - 完整的使用说明和示例
📦 安装
# npm
npm install vue-dd-ui
# yarn
yarn add vue-dd-ui
# pnpm
pnpm add vue-dd-ui🚀 快速开始
完整引入
import Vue from "vue";
import VueDdUi from "vue-dd-ui";
// 引入样式文件
import "vue-dd-ui/src/css/index.css";
Vue.use(VueDdUi);按需引入 (推荐)
// ES模块方式
import { ddButton, ddForm, ddList } from "vue-dd-ui/es";
Vue.use(ddButton);
Vue.use(ddForm);
Vue.use(ddList);CDN引用
<!-- 引入Vue -->
<script src="https://unpkg.com/[email protected]/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/[email protected]/dist/main.umd.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/src/css/index.css"
/>🎯 组件概览
基础组件
| 组件 | 说明 | 状态 | | ------ | ---------- | ---- | | Button | 按钮组件 | ✅ | | Icon | 图标组件 | ✅ | | Html | 富文本组件 | ✅ |
表单组件
| 组件 | 说明 | 状态 | | ----------- | ---------- | ---- | | Form | 动态表单 | ✅ | | Debounce | 防抖输入框 | ✅ | | BrowseFile | 文件浏览器 | ✅ | | ImgCropper | 图片裁剪 | ✅ | | SelectIcon | 图标选择器 | ✅ | | PopupSelect | 弹出选择器 | ✅ | | SelectTree | 树形选择器 | ✅ |
数据展示
| 组件 | 说明 | 状态 | | -------- | -------- | ---- | | List | 增强列表 | ✅ | | FoldCard | 折叠卡片 | ✅ | | Weather | 天气组件 | ✅ | | Ztree | 树形组件 | ✅ |
布局组件
| 组件 | 说明 | 状态 | | -------------- | ------------ | ---- | | LayoutAbsolute | 绝对定位布局 | ✅ | | Dialog | 对话框 | ✅ |
🔧 工具函数
提供70+个实用工具函数：
// 日期处理
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");
// 更多...示例代码
<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 |
🤝 贡献指南
我们欢迎所有的贡献！
开发
# 克隆项目
git clone https://gitee.com/zengdu/vue-dd-ui.git
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 构建
npm run build
# 代码检查
npm run lint📄 更新日志
详细更改记录请查看 CHANGELOG。
📝 许可证
💖 致谢
- Element UI - 优秀的 Vue.js 组件库
- Vue.js - 渐进式 JavaScript 框架