devecoui v1.1.96

• 💪 Vue 3 Composition API
• 🔥 Written in TypeScript

基本介绍

本ui基于element-plus组件进行扩展，可以快速实现列表等功能开发，包含了数据处理、分页、表头吸顶、滚动条吸底、拖拽排序等复杂逻辑，并且插件中封装了许多方法类可直接使用，后续会不断进行完善。

入门指南

由于组件是基于 element-plus 进行拓展的，所以需要首先安装 element-plus，若项目已存在可忽略，无需指定特定版本。 已经存在 element-plus 后，再安装当前组件库。

npm install element-plus

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

npm install devecoui

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

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 DevecoUI from "devecoui";//必须引入
import 'devecoui/dist/style.css';//必须引入

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

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

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

import type {DevSearchTableProps} from 'devecoui'

/**
 * 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 || []
}

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

/**
 * DevCascaderMutex 组件调用接口后处理返回的数据：默认情况下是取结果中的data内容。
 */
function devCascaderMutexFieldsFn(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,
    devSelectMutexFieldsFn,
    devCascaderMutexFieldsFn,
    devCascaderFieldsFn,
    devDownloadFieldsFn
};

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

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: {
        clearable: true,
        placeholder: '请选择',
        tagType: 'primary'
    },
    // 影响 dev-date-picker 组件
    elDatePickerProps: {
        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: {
        tagType: 'primary',
        clearable: true,
        props: {
            emitPath: true,
            value: 'value',
            label: 'label',
            children: 'children',
            disabled: 'disabled'
        }
    },
    // 影响 dev-copy 组件鼠标悬浮提示
    elTooltipProps: {
        effect: "dark",
    }
};

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

import {stylesConfig} from './devecoui.style'
import {fnConfig} from './devecoui.fn'

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

第五步：在 src/main.js 中引入配置文件，需要将刚才的配置文件引入，并且修改devecoui组件注册代码，示例如下：

import { defaultConfig } from '@/config/devecoui.config';// 加一句这个（引入配置文件）

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

官网地址

https://devecoui.com/