@df8080/vue2-ui

🎨 一个基于 Vue 2 的 UI 组件库，目前主要面向微信小程序开发场景，也适用于其他移动端项目。

✨ 特性

• ✅ 支持 Vue 2.x
• ✅ 支持微信小程序（通过 uni-app 或原生绑定）
• ✅ 内置多个基础组件（Button、Modal、Form 等）
• ✅ 完整的 TypeScript 类型支持
• ✅ 内置加密解密功能
• ✅ 丰富的工具函数和混入

📦 安装

# 使用 yarn
yarn add @df8080/vue2-ui

# 使用 npm
npm install @df8080/vue2-ui --save

# 使用 pnpm
pnpm add @df8080/vue2-ui

🚀 快速开始

基础使用

import Vue from 'vue'
import DfUI from '@df8080/vue2-ui'

// 使用组件库
Vue.use(DfUI)

// 或者带配置使用
Vue.use(DfUI, {
  empty: '暂无数据',
  emptyWidth: '400rpx',
  filterUrl: '/package-search/filter/index',
  imgMode: 'aspectFill'
})

按需引入

import { Button, Modal } from '@df8080/vue2-ui'

// 注册组件
Vue.component('DfButton', Button)
Vue.component('DfModal', Modal)

🔐 加密解密功能

配置

在项目初始化时配置加密解密参数：

import DfUI from '@df8080/vue2-ui'

Vue.use(DfUI, {
  // 加密解密配置
  cryptoConfig: {
    encryptType: 'aes', // 加密类型：'aes' | 'rsa' | 'hybrid'
    aesKey: 'your-aes-key', // AES密钥
    randomChars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789' // 随机字符集
  },
  rsaConfig: {
    publicKey: 'your-rsa-public-key', // RSA公钥
    privateKey: 'your-rsa-private-key' // RSA私钥
  }
})

使用方法

1. 在请求中使用加密

import { post } from '@df8080/vue2-ui'

// 启用加密
post('/api/login', userData, {
  encrypt: true, // 启用加密
  encryptType: 'aes', // 可选：指定加密类型
  decrypt: true // 启用解密
})

2. 手动加密解密

import { 
  encryptWithAes, 
  decryptWithAes, 
  rsaEncrypt, 
  rsaDecrypt, 
  generateAesKey 
} from '@df8080/vue2-ui'

// AES加密
const aesKey = generateAesKey()
const encrypted = encryptWithAes('hello world', aesKey)
const decrypted = decryptWithAes(encrypted, aesKey)

// RSA加密
const rsaEncrypted = rsaEncrypt('hello world')
const rsaDecrypted = rsaDecrypt(rsaEncrypted)

📚 组件文档

基础组件

• Button - 按钮组件
• Modal - 模态框组件
• Input - 输入框组件
• Form - 表单组件
• Table - 表格组件
• Tabs - 标签页组件

业务组件

• FilterPanel - 筛选面板
• Search - 搜索组件
• Upload - 上传组件
• Calendar - 日历组件

🛠️ 开发

# 克隆项目
git clone https://github.com/df0808/vue2-ui.git

# 安装依赖
yarn install

# 开发模式
yarn dev

# 构建
yarn build

# 测试
yarn test

📄 许可证

MIT

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📞 联系方式

• 作者：df0808
• 邮箱：[email protected]
• GitHub：@df8080

⭐ 如果这个项目对你有帮助，请给它一个星标！