From be5172ca1b8b7e204b314d52f95c3b59411bbfe2 Mon Sep 17 00:00:00 2001 From: aringlai Date: Thu, 4 Mar 2021 20:01:30 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=8F=92=E4=BB=B6enums=E3=80=81vuex?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh/reference/plugin/plugins/enums.md | 221 +++++++++++++++++- docs/zh/reference/plugin/plugins/vuex.md | 55 ++++- .../fes-plugin-enums/src/runtime/core.tpl | 4 +- packages/fes-template/src/pages/index.vue | 12 + 4 files changed, 288 insertions(+), 4 deletions(-) diff --git a/docs/zh/reference/plugin/plugins/enums.md b/docs/zh/reference/plugin/plugins/enums.md index 89e25acd..599330ff 100644 --- a/docs/zh/reference/plugin/plugins/enums.md +++ b/docs/zh/reference/plugin/plugins/enums.md @@ -1,7 +1,226 @@ # @webank/fes-plugin-enums +## 介绍 +日常业务开发中，有很多场景会使用到枚举值，比如select-options、table-column。 +该插件提供统一的枚举存取及丰富的函数来处理枚举。 ## 启用方式 +在 `package.json` 中引入依赖： +```json +{ + "dependencies": { + "@webank/fes": "^2.0.0", + "@webank/fes-plugin-enums": "^2.0.0" + } +} +``` ## 配置 -## API \ No newline at end of file +### 静态配置 +在 `.fes.js` 中配置： +```js +// 配置格式：[[key, value], ...] +export default { + enums: { + status: [['0', '无效的'], ['1', '有效的']] + } +} +``` + +### 动态配置 +在业务代码中 +```js +import { enums } from '@webank/fes'; +// 动态添加 +enums.push('status', [['0', '无效的'], ['1', '有效的']] +enums.get('status', '1') // 有效的 +``` + +## 场景使用 +- 动态添加的枚举项支持数组和对象 + +- 枚举项为对象时，可以指定keyName和valueName属性名 + +- 导出枚举值，可指定取值的路径 + +- 导出枚举可扩展属性 +```vue + + + +``` +## API +### get +* `get(name: string)` 获取指定名字的枚举 + +* `get(name: string, key: string)` 获取指定名字及键枚举默认值 + +* `get(name: string, opt: {extend: Array})` 获取指定名字的自定义格式枚举，[查看extend配置](#extend配置) + +* `get(name: string, key: string, opt: {dir: string})` 获取指定名字及键枚举[dir规则](#dir规则)的值 + +```js +get('status') +get('status', '1') +get('status', { + extend: [ + { + key: 'name', + dir: 'value', + }, + { + key: 'disabled', + transfer: item => item === '0' + } + ] +}) +get('status', '1', {dir: 'value'}) +``` + +### push +动态添加枚举，重复添加会覆盖 +* `push(name: string, _enum: Array)` +* `push(name: string, _enum: Array, opt?: Object)` + * opt.keyName 指定key的取值属性，默认是key + * opt.valueName 指定value的取值属性 + +枚举项为数组，枚举项的[0]解析为key，枚举项的[1]解析为value + +枚举项为对象时，根据opt配置keyName、valueName取枚举项属性值分别作为key和value，`如果valueName未设置则value就是枚举项` + +### remove +* remove(name: string) + +移除指定的枚举 +### concat +基于现有的枚举，连接上新的枚举后返回新的枚举 +* `concat(name: string, _enum: Array, opt?: Object))` + * opt.keyName 指定key的取值属性，默认是key + * opt.valueName 指定value的取值属性 + * opt.before 是否添加在现有的之前，默认是false + * opt.extend：返回的枚举[extend配置](#extend配置) + +### convert +将传入的枚举格式转换为{key, value}的形式 +* `convert(name: string, _enum: Array, opt?: Object))` + * opt.keyName 指定key的取值属性，默认是key + * opt.valueName 指定value的取值属性 + +### extend配置 +扩展枚举项属性的配置 +* `extend: Array` + * `key` 指定扩展的属性名 + * `dir` 指定该属性的取值路径 + * `transfer(item: {key: any, value: any})` 转换函数，参数未枚举项，返回就是该属性的值 +::: tip +同时设置[dir](#dir规则)和transfer，transfer优先 +::: + +```js +get('status', { + extend: [ + { + key: 'name', + dir: 'value', + }, + { + key: 'disabled', + transfer: item => item.key === '0' + } + ] +}) +``` + + +### dir规则 +dir是指定枚举项value的取值方式，规则如下： +* 对象属性 `A`、`A.B` +* 数组 `[0]`、`[0][1]` +* 混合 `A[0]`、`[0].A`、`A[0].B` + +```js +// 假如枚举项value的结构如下 +const user = { + age: 18, + name: 'aring', + role: [ + { + id: 1, + name: '管理员' + }, + { + id: 2, + name: '业务操作员' + } + ] +} +// 那么规则解析是： +dir value +'age' => 18 +'role[0]' => {id: 1, name: '管理员'} +'role[1].id' => 2 +``` +::: tip +枚举项value如果是基本类型，则规则不生效，value就是当前值 +::: \ No newline at end of file diff --git a/docs/zh/reference/plugin/plugins/vuex.md b/docs/zh/reference/plugin/plugins/vuex.md index 0a951f12..bfe1e079 100644 --- a/docs/zh/reference/plugin/plugins/vuex.md +++ b/docs/zh/reference/plugin/plugins/vuex.md @@ -1,9 +1,62 @@ # @webank/fes-plugin-vuex +## 介绍 +集成vuex插件 +增强vuex，导出所有的mutations、actions和getter的事件类型，编辑器提示 +约定模式，module和plugin定义放在sotres目录下，文件名包含plugin被解析为插件，无需额外配置，定义即可用。 + +::: tip +vuex的提供的api直接导入使用 +::: ## 启用方式 +在 `package.json` 中引入依赖： +```json +{ + "dependencies": { + "@webank/fes": "^2.0.0", + "@webank/fes-plugin-vuex": "^2.0.0" + } +} +``` ## 配置 +在 `.fes.js` 中配置： +```js +export default { + vuex: { + strict: true // 开启严格模式 + } +} +``` +## 场景使用 +vuex定义模块之后，使用getter、mutation、action都是通过传入字符路径，如： +```js +import { useStore } from 'vuex'; +const store = useStore(); +store.getters['user/address'] +store.commit('counter/increment') +store.dispatch('user/login') +``` -## API \ No newline at end of file +使用该插件，可以利用导出的事件类型，如： +```js +import { useStore } from 'vuex'; +import { MUTATION_TYPES, GETTER_TYPES, ACTION_TYPES } from '@webank/fes'; +const store = useStore(); +store.getters[GETTER_TYPES.user.address] +store.commit(MUTATION_TYPES.counter.increment) +store.dispatch(ACTION_TYPES.user.login) +``` +## API +### MUTATION_TYPES +* 类型 `Object` +* mutation的所有事件类型 + +### GETTER_TYPES +* 类型 `Object` +* getter的所有方法名 +### ACTION_TYPES +* 类型 `Object` +* action的所有事件类型 diff --git a/packages/fes-plugin-enums/src/runtime/core.tpl b/packages/fes-plugin-enums/src/runtime/core.tpl index 325a59d7..4d08521b 100644 --- a/packages/fes-plugin-enums/src/runtime/core.tpl +++ b/packages/fes-plugin-enums/src/runtime/core.tpl @@ -111,7 +111,7 @@ function format(_enum = [], extend = []) { * @param dir */ function parseValueDir(value, dir='value') { - if (['object', 'function'].indexOf(typeof value) || !value || !dir) return value + if (!['object', 'function'].includes(typeof value) || !value || !dir) return value if (dir.startsWith('[')) { let key = dir.slice(1, dir.indexOf(']')) return parseValueDir(value[key], dir.slice(dir.indexOf(']') + 1)) @@ -133,7 +133,7 @@ function parseValueDir(value, dir='value') { * 转换传入的枚举数组 * @param {string} name 枚举名称 * @param {Array} _enum 枚举数组，数组元素可以是数组或者对象 - * @param {{keyName: 'key', valueName: string}} opt keyName: 指定枚举键名称取值属性 valueName 指定枚举键值取值属性 + * @param {keyName: string, valueName: string} opt keyName: 指定枚举键名称取值属性 valueName 指定枚举键值取值属性 */ function convert(name, _enum, opt = { keyName: '', valueName: '' }) { if (!name) { diff --git a/packages/fes-template/src/pages/index.vue b/packages/fes-template/src/pages/index.vue index 71dfb32e..2cc53afd 100644 --- a/packages/fes-template/src/pages/index.vue +++ b/packages/fes-template/src/pages/index.vue @@ -63,6 +63,18 @@ export default { ] }); console.log(roles); + console.log(enums.get('status', { + extend: [ + { + key: 'name', + dir: 'value' + }, + { + key: 'disabled', + transfer: item => item.key === '0' + } + ] + })); onMounted(() => { console.log(router); setTimeout(() => {