# devecoui

**Repository Path**: loushouzhang/devecoui

## Basic Information

- **Project Name**: devecoui
- **Description**: 基于 element-plus，但提供了许多原组件不支持的功能，专注于提升前端开发效率。库内包含多种高频次使用的组件，简化复杂数据交互，满足多场景需求，帮助开发者更轻松地应对项目挑战，希望每个小伙伴都能按时下班。

欢迎访问官网了解详情，体验更高效的开发之旅！🚀
👉 DevecoUI：https://www.devecoui.com/
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://www.devecoui.com/
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2024-05-22
- **Last Updated**: 2025-12-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
  <img width="400px" src="https://file.wonder-link.net/df6a2378f7354ce1aebf17dd227b3342.png">
</p>
<p align="center" style="margin-top: -60px">
  <a>
    <img src="https://img.shields.io/npm/v/element-plus.svg" />
  </a>
  <a>
    <img src="https://img.shields.io/badge/node-%20%3E%3D%2018-47c219" />
  </a>
  <a>
    <img src="https://codecov.io/gh/element-plus/element-plus/branch/dev/graph/badge.svg?token=BKSBO2GLZI"/>
  </a>
  <br>
</p>

<p align="center">Devecoui - A Vue.js 3 UI library</p>

- 💪 Vue 3 Composition API
- 🔥 Written in TypeScript
## 基本介绍
devecoui-plus 是 devecoui的升级版本，优化了性能和属性引用。
本ui基于element-plus组件进行扩展，可以快速实现列表等功能开发，包含了数据处理、分页、表头吸顶、滚动条吸底、拖拽排序等复杂逻辑，并且插件中封装了许多方法类可直接使用，后续会不断进行完善。

## 入门指南
由于组件是基于 element-plus 进行拓展的，所以需要首先安装 element-plus，若项目已存在可忽略，无需指定特定版本。
```npm
npm install element-plus
```

已经存在 element-plus 后，再安装当前组件库。
```npm
npm install devecoui-plus
```

全部安装完成后在 src/main.js 中引用配置，示例如下：

```javascript
import {createApp} from 'vue';
import App from './App.vue';
import router from './router';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';//必须引入
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';// 此处是element-plus汉化
import DevecouiPlus from "devecoui-plus";//必须引入
import 'devecoui-plus/dist/style.css';//必须引入

const app = createApp(App);
app.use(createPinia());
app.use(router);
app.use(ElementPlus, {locale: zhCn});
app.use(DevecouiPlus);//必须引入
app.mount('#app');
```

<h3>全局配置</h3>
很多情况下，组件的默认配置或方法并不是你想要的，但是在每个组件上传参修改又会很麻烦，这个时候就可以用到全局参数配置 ，只需要配置一次，所有同类型组件会默认使用全局配置项。

第一步：在 src 目录下新建文件夹 config，如果已存在可忽略。

第二步：在 config 文件夹下新增文件 devecoui.fn.ts，内容如下：

```javascript
import type {DevSearchTableProps} from 'devecoui-plus'

/**
 * DevSearchTable组件调用接口后处理返回的数据：默认情况下是取结果中的data内容。
 * @param res - 调用接口后返回的完整数据（注：如果axios处理了结果数据res返回的是处理后的内容）。
 * @param props - DevSearchTable组件的props。
 * @param type- data表示要处理接口返回的列表数据，total表示要处理接口返回的总条数。
 * @returns 默认返回值为接口回调data内容。
 */
function devSearchTableFieldsFn(res: any, props: DevSearchTableProps, type: 'data'): object[];
function devSearchTableFieldsFn(res: any, props: DevSearchTableProps, type: 'total'): number;
function devSearchTableFieldsFn(res: any, props: DevSearchTableProps, type: 'data' | 'total'): object[] | number {
    const result = res.data;
    if (type === 'data') {
        if (props.isPagination) {
            return result[props.dataKey || 'list'] as object[];
        } else {
            return result as object[];
        }
    }
    if (type === 'total') {
        if (props.isPagination) {
            return result[props.totalKey || 'total'] * 1 || 0 as number;
        } else {
            return 0;
        }
    }
    return [];
}

/**
 * DevSelect组件调用接口后处理返回的数据：默认情况下是取结果中的data内容。
 * @param res
 * @returns 默认返回值为接口回调data内容。
 */
function devSelectFieldsFn(res: any) {
    return res.data || []
}


/**
 * DevCascader 组件调用接口后处理返回的数据：默认情况下是取结果中的data内容。
 */
function devCascaderFieldsFn(res: any) {
    return res.data || []
}

/**
 * DevDownload组件调用接口后处理返回的数据：默认情况下是取结果中的data内容。
 * @param res
 */
function devDownloadFieldsFn(res: any) {
    return res.data || {}
}


export const fnConfig = {
    devSearchTableFieldsFn,
    devSelectFieldsFn,
    devCascaderFieldsFn,
    devDownloadFieldsFn
};
```
第三步：在 config 文件夹下新增文件 devecoui.styles.ts，内容如下：
```javascript
export const stylesConfig = {
    // 影响 dev-search-table 组件 和 dev-form-table 组件
    elTableProps: {
        rowKey: 'id',
        border: true,
        style: {width: '100%'},
        headerCellStyle: {background: '#eff3f6', textAlign: 'center'},
    },
    // 影响 dev-search-table 组件下方的页码
    devSearchTablePaginationProps: {
        layout: 'total, sizes, prev, pager, next',
        pageSizes: [10, 20, 50, 100],
        background: true
    },
    // 影响 dev-select 组件 dev-select-mutex 组件
    elSelectProps: {
        style: {width: '100%'},
        clearable: true,
        placeholder: '请选择',
        tagType: 'primary'
    },
    // 影响 dev-date-picker 组件
    elDatePickerProps: {
        style: {width: '100%'},
        type: 'datetimerange',
        clearable: true,
        placeholder: '请选择',
        rangeSeparator: '至',
        startPlaceholder: '开始时间',
        endPlaceholder: '结束时间',
        valueFormat: 'YYYY-MM-DD HH:mm:ss'
    },
    // 影响 dev-search-form 组件 和 dev-form-table 组件 中的表单部分
    elFormProps: {},
    // 影响 dev-cascader 组件 和 dev-cascader-mutex 组件
    elCascaderProps: {
        style: {width: '100%'},
        tagType: 'primary',
        clearable: true,
        props: {
            emitPath: true,
            multiple:false,
            value: 'value',
            label: 'label',
            children: 'children',
            disabled: 'disabled'
        }
    },
    // 影响 dev-copy 组件鼠标悬浮提示
    elTooltipProps: {
        effect: "dark",
    },
    // 影响 dev-input 组件
    elInputProps: {
        clearable: true, // 是否可清空
        style: {width: '100%'},
        placeholder: '请输入',
    },
};
```
第四步：在 config 文件夹下新增文件 devecoui.config.ts，内容如下：
```javascript
import {stylesConfig} from './devecoui.style'
import {fnConfig} from './devecoui.fn'

export const defaultConfig = {
    ...stylesConfig,
    ...fnConfig
};
```

第五步：在 src/main.js 中引入配置文件，需要将刚才的配置文件引入，并且修改devecoui组件注册代码，示例如下：
```javascript
import { defaultConfig } from '@/config/devecoui.config';// 加一句这个（引入配置文件）

app.use(DevecouiPlus, defaultConfig); // 修改这里
```

## 官网地址
<a href="https://devecoui.com/">https://devecoui.com/</a>