mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-05 19:41:57 +08:00
docs: 插件enums、vuex文档
This commit is contained in:
aringlai
parent
adfc7651f9
commit
be5172ca1b
@ -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
|
||||
### 静态配置
|
||||
在 `.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
|
||||
<template>
|
||||
<div>
|
||||
<!-- 遍历枚举status -->
|
||||
<div v-for="item in enumsGet('status')" :key="item.key">
|
||||
{{item.value}}：{{item.key}}
|
||||
</div>
|
||||
<!-- 遍历枚举扩展后的roles -->
|
||||
<div v-for="item in roles" :key="item.key">
|
||||
{{item.name}}：{{item.disabled}}
|
||||
</div>
|
||||
<!-- 获取枚举roles为2的英文名 -->
|
||||
<div>{{enumsGet('roles', '2', { dir: 'eName' })}}</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { enums } from '@webank/fes';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
// 动态添加枚举，枚举项是对象，并指定key的属性名为id
|
||||
enums.push('roles', [
|
||||
{
|
||||
id: '1',
|
||||
cName: '系统管理员',
|
||||
eName: 'System',
|
||||
perm: ['1', '2', '3']
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
cName: '业务管理员',
|
||||
eName: 'Business',
|
||||
perm: ['1', '2']
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
cName: '普通用户',
|
||||
eName: 'User',
|
||||
perm: ['1']
|
||||
}
|
||||
], { keyName: 'id' });
|
||||
// 导出定制格式的roles，扩展枚举项新的属性name、disabled
|
||||
const roles = enums.get('roles', {
|
||||
extend: [
|
||||
{
|
||||
key: 'name',
|
||||
dir: 'cName' // 指定取值路径，取属性cName的值
|
||||
},
|
||||
{
|
||||
key: 'disabled',
|
||||
// 传入函数，获取结果值
|
||||
transfer: item => item.value.perm.some(i => i >= 2)
|
||||
}
|
||||
]
|
||||
});
|
||||
console.log(roles);
|
||||
// [{key: '1', name: '系统管理员', disabled: true, value: {...}}, ....]
|
||||
return {
|
||||
enumsGet: enums.get,
|
||||
roles
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
```
|
||||
## API
|
||||
### get
|
||||
* `get(name: string)` 获取指定名字的枚举
|
||||
|
||||
* `get(name: string, key: string)` 获取指定名字及键枚举默认值
|
||||
|
||||
* `get(name: string, opt: {extend: Array<Object>})` 获取指定名字的自定义格式枚举，[查看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<Array>)`
|
||||
* `push(name: string, _enum: Array<Object>, 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<Array|Object>, opt?: Object))`
|
||||
* opt.keyName 指定key的取值属性，默认是key
|
||||
* opt.valueName 指定value的取值属性
|
||||
* opt.before 是否添加在现有的之前，默认是false
|
||||
* opt.extend：返回的枚举[extend配置](#extend配置)
|
||||
|
||||
### convert
|
||||
将传入的枚举格式转换为{key, value}的形式
|
||||
* `convert(name: string, _enum: Array<Array|Object>, opt?: Object))`
|
||||
* opt.keyName 指定key的取值属性，默认是key
|
||||
* opt.valueName 指定value的取值属性
|
||||
|
||||
### extend配置
|
||||
扩展枚举项属性的配置
|
||||
* `extend: Array<Object>`
|
||||
* `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就是当前值
|
||||
:::
|
||||
@ -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
|
||||
使用该插件，可以利用导出的事件类型，如：
|
||||
```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的所有事件类型
|
||||
|
||||
@ -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<Object|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) {
|
||||
|
||||
@ -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(() => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user