{"_id":"devecoui-plus","_rev":"28-06cfd5f8487b78dc052c78a162a85e2b","name":"devecoui-plus","dist-tags":{"latest":"1.0.46"},"versions":{"1.0.1":{"name":"devecoui-plus","version":"1.0.1","keywords":["devecoui-plus","deveco-ui-plus","component library","ui framework","ui","vue"],"author":{"name":"娄渊洋"},"license":"MIT","_id":"devecoui-plus@1.0.1","maintainers":[{"name":"louhc","email":"louyuanyang@petalmail.com"}],"dist":{"shasum":"74aa80465dd38f1b2865141b5ca83aee7b32cce8","tarball":"https://registry.npmjs.org/devecoui-plus/-/devecoui-plus-1.0.1.tgz","fileCount":238,"integrity":"sha512-XmDpRmmF26Bks9HrWmcChWJVeBvD19JFkllu/KnQy3ubBG5VhyaDegESHFi9ldPZ4csmwC4sDlQcjaMEiuSnNg==","signatures":[{"sig":"MEQCIFiT4FIDlL0B6Z8+eD48LMvpXt28HKWoE7ZcuGhcQ48fAiAwA13CTDsu5xMr+XOkUrUN+zw6a1sZnNd8A14oJrj8GA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1166837},"main":"lib/index.js","type":"module","types":"es/index.d.ts","module":"dist/deveco-ui-plus.es.js","gitHead":"c9799ffabd2f004d82efc5d95ab8709625879578","scripts":{"push":"npm publish","test":"echo \"Error: no test specified\" && exit 1","build":"rimraf dist json es lib web-types.json global.d.ts && vite build && tsc"},"_npmUser":{"name":"louhc","email":"louyuanyang@petalmail.com"},"web-types":"web-types.json","repository":{"url":"https://gitee.com/loushouzhang/devecoui.git","type":"git"},"_npmVersion":"8.19.3","description":"

\n \n

\n

\n \n \n \n \n \n \n \n \n \n
\n

\n\n

Devecoui - A Vue.js 3 UI library

\n\n- 💪 Vue 3 Composition API\n- 🔥 Written in TypeScript\n## 基本介绍\ndevecoui-plus 是 devecoui的升级版本，优化了性能和属性引用。\n本ui基于element-plus组件进行扩展，可以快速实现列表等功能开发，包含了数据处理、分页、表头吸顶、滚动条吸底、拖拽排序等复杂逻辑，并且插件中封装了许多方法类可直接使用，后续会不断进行完善。\n\n## 入门指南\n由于组件是基于 element-plus 进行拓展的，所以需要首先安装 element-plus，若项目已存在可忽略，无需指定特定版本。\n```npm\nnpm install element-plus\n```\n\n已经存在 element-plus 后，再安装当前组件库。\n```npm\nnpm install devecoui-plus\n```\n\n全部安装完成后在 src/main.js 中引用配置，示例如下：\n\n```javascript\nimport {createApp} from 'vue';\nimport App from './App.vue';\nimport router from './router';\nimport ElementPlus from 'element-plus';\nimport 'element-plus/dist/index.css';//必须引入\nimport zhCn from 'element-plus/dist/locale/zh-cn.mjs';// 此处是element-plus汉化\nimport DevecouiPlus from \"devecoui-plus\";//必须引入\nimport 'devecoui-plus/dist/style.css';//必须引入\n\nconst app = createApp(App);\napp.use(createPinia());\napp.use(router);\napp.use(ElementPlus, {locale: zhCn});\napp.use(DevecouiPlus);//必须引入\napp.mount('#app');\n```\n\n

全局配置

\n很多情况下，组件的默认配置或方法并不是你想要的，但是在每个组件上传参修改又会很麻烦，这个时候就可以用到全局参数配置 ，只需要配置一次，所有同类型组件会默认使用全局配置项。\n\n第一步：在 src 目录下新建文件夹 config，如果已存在可忽略。\n\n第二步：在 config 文件夹下新增文件 devecoui.fn.ts，内容如下：\n\n```javascript\nimport type {DevSearchTableProps} from 'devecoui-plus'\n\n/**\n * DevSearchTable组件调用接口后处理返回的数据：默认情况下是取结果中的data内容。\n * @param res - 调用接口后返回的完整数据（注：如果axios处理了结果数据res返回的是处理后的内容）。\n * @param props - DevSearchTable组件的props。\n * @param type- data表示要处理接口返回的列表数据，total表示要处理接口返回的总条数。\n * @returns 默认返回值为接口回调data内容。\n */\nfunction devSearchTableFieldsFn(res: any, props: DevSearchTableProps, type: 'data'): object[];\nfunction devSearchTableFieldsFn(res: any, props: DevSearchTableProps, type: 'total'): number;\nfunction devSearchTableFieldsFn(res: any, props: DevSearchTableProps, type: 'data' | 'total'): object[] | number {\n const result = res.data;\n if (type === 'data') {\n if (props.isPagination) {\n return result[props.dataKey || 'list'] as object[];\n } else {\n return result as object[];\n }\n }\n if (type === 'total') {\n if (props.isPagination) {\n return result[props.totalKey || 'total'] * 1 || 0 as number;\n } else {\n return 0;\n }\n }\n return [];\n}\n\n/**\n * DevSelect组件调用接口后处理返回的数据：默认情况下是取结果中的data内容。\n * @param res\n * @returns 默认返回值为接口回调data内容。\n */\nfunction devSelectFieldsFn(res: any) {\n return res.data || []\n}\n\n\n/**\n * DevCascader 组件调用接口后处理返回的数据：默认情况下是取结果中的data内容。\n */\nfunction devCascaderFieldsFn(res: any) {\n return res.data || []\n}\n\n/**\n * DevDownload组件调用接口后处理返回的数据：默认情况下是取结果中的data内容。\n * @param res\n */\nfunction devDownloadFieldsFn(res: any) {\n return res.data || {}\n}\n\n\nexport const fnConfig = {\n devSearchTableFieldsFn,\n devSelectFieldsFn,\n devCascaderFieldsFn,\n devDownloadFieldsFn\n};\n```\n第三步：在 config 文件夹下新增文件 devecoui.props.ts，内容如下：\n```javascript\nexport const stylesConfig = {\n // 影响 dev-search-table 组件 和 dev-form-table 组件\n elTableProps: {\n rowKey: 'id',\n border: true,\n style: {width: '100%'},\n headerCellStyle: {background: '#eff3f6', textAlign: 'center'},\n },\n // 影响 dev-search-table 组件下方的页码\n devSearchTablePaginationProps: {\n layout: 'total, sizes, prev, pager, next',\n pageSizes: [10, 20, 50, 100],\n background: true\n },\n // 影响 dev-select 组件 dev-select-mutex 组件\n elSelectProps: {\n style: {width: '100%'},\n clearable: true,\n placeholder: '请选择',\n tagType: 'primary'\n },\n // 影响 dev-date-picker 组件\n elDatePickerProps: {\n style: {width: '100%'},\n type: 'datetimerange',\n clearable: true,\n placeholder: '请选择',\n rangeSeparator: '至',\n startPlaceholder: '开始时间',\n endPlaceholder: '结束时间',\n valueFormat: 'YYYY-MM-DD HH:mm:ss'\n },\n // 影响 dev-search-form 组件 和 dev-form-table 组件 中的表单部分\n elFormProps: {},\n // 影响 dev-cascader 组件 和 dev-cascader-mutex 组件\n elCascaderProps: {\n style: {width: '100%'},\n tagType: 'primary',\n clearable: true,\n props: {\n emitPath: true,\n multiple:false,\n value: 'value',\n label: 'label',\n children: 'children',\n disabled: 'disabled'\n }\n },\n // 影响 dev-copy 组件鼠标悬浮提示\n elTooltipProps: {\n effect: \"dark\",\n },\n // 影响 dev-input 组件\n elInputProps: {\n clearable: true, // 是否可清空\n style: {width: '100%'},\n placeholder: '请输入',\n },\n};\n```\n第四步：在 config 文件夹下新增文件 devecoui.config.ts，内容如下：\n```javascript\nimport {stylesConfig} from './devecoui.props'\nimport {fnConfig} from './devecoui.fn'\n\nexport const defaultConfig = {\n ...stylesConfig,\n ...fnConfig\n};\n```\n\n第五步：在 src/main.js 中引入配置文件，需要将刚才的配置文件引入，并且修改devecoui组件注册代码，示例如下：\n```javascript\nimport { defaultConfig } from '@/config/devecoui.config';// 加一句这个（引入配置文件）\n\napp.use(DevecouiPlus, defaultConfig); // 修改这里\n```\n\n## 官网地址\nhttps://devecoui.com/\n","readmeFilename":"README.md"}