AI Data Editor 组件库

一个基于 Vue 3 和 Element Plus 的数据编辑工具组件库，提供了丰富的日期、数组、字符串等工具方法和可视化界面。

安装

npm install ai-data-editor

快速开始

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import AiDataEditor from 'ai-data-editor'
import 'ai-data-editor/style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

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

局部导入

import { DataEditor } from 'ai-data-editor'
import 'ai-data-editor/style.css'

export default {
  components: {
    DataEditor
  }
}

在模板中使用

<template>
  <div>
    <data-editor />
  </div>
</template>

功能特性

组件功能

• 日期工具：格式化时间、获取当前日期、计算日期差等
• 数组工具：去重、排序、合并、查找等
• 字符串工具：字符串转换、截取等
• 对象工具：对象操作相关功能
• 数字工具：数字处理相关功能
• 本地存储工具：localStorage操作
• 综合工具：多种实用工具
• Cookie工具：Cookie操作
• 验证工具：表单验证等
• 设计稿工具：计算实际高度、生成CSS变量等

工具类方法

除了使用组件，您还可以单独导入和使用工具类方法：

import { DateMethods, ArrayMethods, selfAdapter } from 'ai-data-editor'

// 使用日期工具
const currentDate = DateMethods.getCurrentDate()

// 使用数组工具
const uniqueArray = ArrayMethods.uniqueArray([1, 2, 2, 3])

// 使用设计稿适配工具
const actualHeight = selfAdapter.calculateHeight(100)

工具类方法列表

DateMethods

• getFormattedTime(separator = '-'): 获取格式化后的当前时间
• getCurrentDate(): 获取当前日期
• getFormattedDateTime(date): 格式化日期时间
• getDaysDifference(startDate, endDate): 计算日期差
• addDays(date, days): 添加或减少天数
• stringToDate(dateString): 字符串转日期
• getFirstDayOfMonth(date): 获取月份第一天
• getLastDayOfMonth(date): 获取月份最后一天

ArrayMethods

• unique(arr, key): 数组根据key去重
• uniqueArray(arr): 数组去重
• arrConcat(arrOne, arrTwo): 数组合并
• sumArray(arr): 数组求和
• splitArray(arr, len): 数组拆分
• sortArray(arr, order = 'asc', key): 数组排序
• findInArray(arr, callback): 查找元素
• filterArray(arr, callback): 筛选元素
• mapArray(arr, callback): 映射转换
• reduceArray(arr, callback, initialValue): 累加计算
• someInArray(arr, callback): 判断是否有元素满足条件
• everyInArray(arr, callback): 判断是否所有元素满足条件
• reverseArray(arr): 数组反转

selfAdapter

• calculateHeight(designValue): 计算实际高度
• generateCssVars(sizes): 生成CSS变量

注意事项

1. 确保已正确安装和配置 Element Plus
2. 所有工具方法都通过静态方法提供，无需实例化
3. 组件需要在 Vue 3 环境下使用

开发

目录结构

ai-data-editor/
├── src/
│   ├── components/
│   │   └── DataEditor.vue
│   ├── utils/
│   │   └── Common_method_classvue3.js
│   ├── index.js
│   └── style.css
├── package.json
├── vite.config.js
└── README.md

构建

cd ai-data-editor
npm install
npm run build

License

MIT