vue2-vant-dict 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +457 -454
- package/lib/vue2-vant-dict.umd.min.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,455 +1,458 @@
|
|
|
1
|
-
# vue2-vant-dict
|
|
2
|
-
|
|
3
|
-
vue2-vant-dict是在vue2框架下对vant组件库的部分组件进行二开，实现更轻松使用字典数据的字典包插件。引入此包后，可轻松实现select下拉选项，radio单选框，checkbox多选框，cascader联级选项，tree树形控件，tree-select树形选项，脱敏表单等组件。拥有多种字典相关方法及日期格式化，脱敏等方法。
|
|
4
|
-
|
|
5
|
-
**示例：实现cascader**
|
|
6
|
-
|
|
7
|
-
```vue
|
|
8
|
-
<van-cascader-dict :field-names="{text: 'areaName', value: 'id', children: 'children'}" @dictChange="handleChange" label="地区(基础用法)" label-width="110px" title="地区选择" input-align="right" dictType="city" placeholder="请选择地区" v-model="value1" ></van-cascader-dict>
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
**效果如下**
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
**示例2：实现select**
|
|
16
|
-
|
|
17
|
-
```vue
|
|
18
|
-
<van-select-dict @dictChange="handleChange" label="性别(基础用法)" label-width="100px" input-align="right" dictType="AAC004" placeholder="请选择性别" v-model="value1" ></van-select-dict>
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
**示例3：实现输入框非编辑时脱敏**
|
|
24
|
-
|
|
25
|
-
```vue
|
|
26
|
-
<template>
|
|
27
|
-
<div>
|
|
28
|
-
<van-field-dict label="姓名" v-model="value1"></van-field-dict>
|
|
29
|
-
<van-field-dict label="证件号码" v-model="value2"></van-field-dict>
|
|
30
|
-
<van-field-dict label="手机号" v-model="value3"></van-field-dict>
|
|
31
|
-
<van-field-dict label="地址" type="textarea" v-model="value4"></van-field-dict>
|
|
32
|
-
|
|
33
|
-
<van-field-dict label="姓名" maskType="name" v-model="value1"></van-field-dict>
|
|
34
|
-
<van-field-dict label="证件号码" maskType="idCard" v-model="value2"></van-field-dict>
|
|
35
|
-
<van-field-dict label="手机号" maskType="mobile" v-model="value3"></van-field-dict>
|
|
36
|
-
<van-field-dict label="地址" type="textarea" maskType="address" v-model="value4"></van-field-dict>
|
|
37
|
-
<van-field-dict label="前三后四" :maskStart="3" :maskEnd="4" v-model="value5"></van-field-dict>
|
|
38
|
-
<van-field-dict label="前三中三后四" :maskStart="3" :maskMiddle="3" :maskEnd="4" v-model="value6"></van-field-dict>
|
|
39
|
-
<van-field-dict label="默认值" defaultVal="恭喜发财" maskType="name" v-model="value7"></van-field-dict>
|
|
40
|
-
</div>
|
|
41
|
-
</template>
|
|
42
|
-
|
|
43
|
-
<script>
|
|
44
|
-
export default {
|
|
45
|
-
data() {
|
|
46
|
-
return {
|
|
47
|
-
value1: "沈小布",
|
|
48
|
-
value2: "35062418892031",
|
|
49
|
-
value3: "18859661234",
|
|
50
|
-
value4: "宁夏回族自治区闽宁镇涌泉村芗城路142号",
|
|
51
|
-
value5: "1234567890",
|
|
52
|
-
value6: "13145021314",
|
|
53
|
-
value7: ""
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
</script>
|
|
58
|
-
|
|
59
|
-
<style>
|
|
60
|
-
|
|
61
|
-
</style>
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
一行代码轻松使用，并且解决选项被更换后关闭弹出层后，选项不会复位的问题。
|
|
69
|
-
|
|
70
|
-
**此处主要讲包的配置及准备工作，具体用法可前往[vue2-vant-dict官网](http://xiaobusoft.com/vue2-vant-dict)查看使用文档，[备用官网](https://shenxiaobu.github.io/vue2-vant-dict/),如有问题可前往[问题反馈表格进行记录](https://docs.qq.com/sheet/DVmZQb0hyTk9uc1dY)， 也可关注微信公众号【爆米花小布】私信进行反馈**
|
|
71
|
-
|
|
72
|
-
## 使用条件
|
|
73
|
-
|
|
74
|
-
1. vue2中 2.6以上版本
|
|
75
|
-
2. 引入vant相关组件及样式，**由于vant关于vue2版本已经不再更新，但是存在cascader组件禁用无法使用的情况，因此对于需要cascader禁用选项可用的，需将vant组件库更换为 [vant-xiaobu](https://www.npmjs.com/package/vant-xiaobu) 组件库，仅对cascader优化，可放心使用。**
|
|
76
|
-
3. 一个请求字典的接口
|
|
77
|
-
1. 不传参可获取全部字典数据
|
|
78
|
-
2. 返回字典包的版本号（字典数据更改时，更改字典包版本号，用于清除在浏览器上缓存的旧的字典包数据）
|
|
79
|
-
|
|
80
|
-
## 快速开始
|
|
81
|
-
|
|
82
|
-
以下全部已js为示例，且以最完美的形式配合vue2-vant-dict包的使用。
|
|
83
|
-
|
|
84
|
-
#### 后端接口要求
|
|
85
|
-
|
|
86
|
-
1. 获取全局配置接口，配置中包含当前字典版本号。对字典数据进行操作时，需修改字典版本号。
|
|
87
|
-
2. 获取字典数据接口，能接受不传参返回所有字典数据，可接受同时获取多个字典类型数据。并且将当前字典版本号返回，用于判断当前项目使用的字典数据是否是数据库最新版的字典数据。
|
|
88
|
-
|
|
89
|
-
#### 安装包
|
|
90
|
-
|
|
91
|
-
```shell
|
|
92
|
-
npm install vue2-vant-dict
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
#### 新建配置文件
|
|
96
|
-
|
|
97
|
-
src目录下新建dict-config.js文件，用于配置字典包获取字典的接口，当前字典版本号，数据字典缓存位置等。以下代码列全一点吧, 真实只有 getDictCodeApi 及 version必传
|
|
98
|
-
|
|
99
|
-
```ts
|
|
100
|
-
//引入请求字典接口
|
|
101
|
-
import {getDictCodeApi} from "@/api/common-api"
|
|
102
|
-
//引入本地缓存数据
|
|
103
|
-
import localDictCodes from "@/assets/data/dict"
|
|
104
|
-
|
|
105
|
-
export default {
|
|
106
|
-
getDictCodeApi: getDictCodeApi, // 获取字典的接口 必传
|
|
107
|
-
version: "0.0.1", // 当前字典版本号 必传 获取全局配置化需 覆盖此版本号数据
|
|
108
|
-
localDictCodes, // 本地字典数据
|
|
109
|
-
versionKey: "xiaobuDictVersion", // 在浏览器缓存的版本号键名 选传 默认值vue3ElementDictVersion
|
|
110
|
-
dictDataKey: "xiaobuDictData", // 在浏览器缓存的字典数据键名 选传 默认值 vue2VantDictData
|
|
111
|
-
query: "type", // 请求字典接口的参数名 选传 默认 dictType
|
|
112
|
-
format: {
|
|
113
|
-
label: "dictLabel",
|
|
114
|
-
value: "dictValue"
|
|
115
|
-
}, // 配置字典值和显示 字段的配置项 需同时配置 不可只配一个 选传 默认值 label 及 value
|
|
116
|
-
formatterDictList: (data, query) => {
|
|
117
|
-
return data.xiaobuDictData
|
|
118
|
-
}, // data为请求字典接口后返回的data数据 格式化返回字典数据，此处return的为字典数据，用于兼容返回的数据结构与默认不一致问题， 选传 默认返回 data.dictData query为请求的字典类型的参数，用于部分接口不按要求，没返回 dictType: [{},{}] 数据结构的形式，此时可利用query自行拼凑成符合的数据格式
|
|
119
|
-
formatterDictVersion: (data) => {
|
|
120
|
-
return data.xiaobuDictVersion
|
|
121
|
-
}, // data为请求字典接口后返回的data数据 格式化返回版本号，用于兼容返回的数据结构与默认不一致问题 默认返回 data.dictVersion 获取到版本号后会 与字典包配置的版本号进行比对
|
|
122
|
-
filterDataFun: (list) => {
|
|
123
|
-
return list.filter(item => item.status === '1')
|
|
124
|
-
}, // 可对返回的字典数据进行过滤 list为某字典类型的数据 选传，默认不过滤 return list
|
|
125
|
-
disabledDataFun: (list) => {
|
|
126
|
-
return list.map(item => {
|
|
127
|
-
...item,
|
|
128
|
-
disabled: item.isDisabled === '1'
|
|
129
|
-
})
|
|
130
|
-
}, // 可对返回的字典数据配置禁用字段 list为某字典类型的数据 选传，默认不过滤 return list
|
|
131
|
-
formatterRequest: (query, dictType) => {
|
|
132
|
-
// ...此处无法举例 以包默认形式展示
|
|
133
|
-
if (!dictType) {
|
|
134
|
-
return { [query]: "" };
|
|
135
|
-
}
|
|
136
|
-
return { [query]: dictType };
|
|
137
|
-
}, // 格式化请求体，用于兼容接口需要的参数格式，默认dictType为空时 获取全部字典数据，接口需要获取多种字典数据时不同后端开发人员可能需要的格式不一样，因此此处可配置成后端开发人员需要的格式。
|
|
138
|
-
|
|
139
|
-
storage: localstorage, //数据缓存的位置 默认 localstorage 可选为 sessionstorage 兼容iframe嵌套项目
|
|
140
|
-
usuallyGetFileds: "", //经常用到的字典数据，一进项目就会对缓存字典中无此类型的字典数据进行请求，此配置项在iframe项目中能发挥更大作用，进页面就一次性将全部字典数据一个接口请求掉，避免同时请求太多字典接口 宣传 默认空 多个字典以 英文逗号隔开 如 sex,personType
|
|
141
|
-
isGetAll: true, // 获取所有字典类型接口 无传值获取所有字典接口，如果无传与真实需要获取全部字典接口的入参不一致 可配置 formatterRequest
|
|
142
|
-
getDictEveryTime: false, // 是否每次进项目都请求 usuallyGetFileds 字典类型的接口 或者获取所有字典类型接口
|
|
143
|
-
treeSetting: {
|
|
144
|
-
labelField: "areaName" //label字段名 默认值id
|
|
145
|
-
parentIdField: "parentId", //父节点唯一标识字段名 默认值 parentId
|
|
146
|
-
childrenField: "children", //子节点标识字段名 默认值 children
|
|
147
|
-
firstId: "0", // 根节点值 默认值 字符串 0
|
|
148
|
-
labelField: "label", //label字段名 默认值 label
|
|
149
|
-
labelArrField: "labelArr", //给对象新增的中文数组字段名 默认值 labelArr 字典包会将数组转化为树形结构数据 并每一项生成 labelArr字段，内容为【爷爷级/父级label,...,自己的label】
|
|
150
|
-
idArrField: "idArr", //给对象新增的id数组字段名 默认值 idArr 字典包会将数组转化为树形结构数据 并每一项生成 labelArr字段，内容为【爷爷级/父级id,...,自己的id】
|
|
151
|
-
levelField: "level", //给对象新增的层级字段名 值为层级
|
|
152
|
-
level: 0, // 给根目录配置的层级 配置根目录层级为 0 级
|
|
153
|
-
leafField: "leaf" //叶子节点标识字段名 值为 true或 false
|
|
154
|
-
} // 对树形数据的配置 选传 字典支持将数组结构转化为树形结构
|
|
155
|
-
}
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
### 配置
|
|
159
|
-
|
|
160
|
-
src下新建文件dict-config.ts，用于配置字典包相关配置。配置项如下
|
|
161
|
-
|
|
162
|
-
| 字段 | 类型 | 必传 | 说明 | 默认值 |
|
|
163
|
-
| :------------------: | :------: | :--: | :----------------------------------------------------------- | :----------------------------------------------------------: |
|
|
164
|
-
| getDictCodeApi | Promise | 是 | 请求字典接口 | — |
|
|
165
|
-
| version | String | 是 | 当前字典包版本号 必传 | — |
|
|
166
|
-
| localDictCodes | Object | 否 | 本地字典数据 | {} |
|
|
167
|
-
| versionKey | String | 否 | 在浏览器缓存的版本号键名 | vue2VantDictVersion |
|
|
168
|
-
| dictDataKey | String | 否 | 在浏览器缓存的字典数据键名 | vue2VantDictData |
|
|
169
|
-
| query | String | 否 | 请求字典接口的参数名 | dictType |
|
|
170
|
-
| format | Object | 否 | 配置字典值和显示 字段的配置项 需同时配置 不可只配一个 | {label: "label", value: "value"} |
|
|
171
|
-
| formatterDictList | Function | 否 | data为请求字典接口后返回的data数据 格式化返回字典数据，此处return的为字典数据，用于兼容返回的数据结构与默认不一致问题， 选传 默认返回 data.dictData query为请求的字典类型的参数，用于部分接口不按要求，没返回 dictType: [{},{}] 数据结构的形式，此时可利用query自行拼凑成符合的数据格式 | (data) => {return data.dictData} |
|
|
172
|
-
| formatterDictVersion | Function | 否 | data为请求字典接口后返回的data数据 格式化返回版本号，用于兼容返回的数据结构与默认不一致问题 默认返回 data.dictVersion 获取到版本号后会 与字典包配置的版本号进行比对 | (data) => {return data.version} |
|
|
173
|
-
| filterDataFun | Function | 否 | 可对返回的字典数据进行过滤 list为某字典类型的数据 | （list) => {return list} |
|
|
174
|
-
| disabledDataFun | Function | 否 | 可对返回的字典数据配置禁用字段 list为某字典类型的数据 | (list) => {return list} |
|
|
175
|
-
| formatterRequest | Function | 否 | 兼格式化请求体，用于兼容接口需要的参数格式，默认dictType为空时 获取全部字典数据，接口需要获取多种字典数据时不同后端开发人员可能需要的格式不一样，因此此处可配置成后端开发人员需要的格式 | (query, dictType) => {if(!dictType){return { [query]: "" }} return { [query]: dictType }} |
|
|
176
|
-
| storage | storage | 否 | 数据缓存的位置 默认 localstorage 可选为 sessionstorage 兼容 | localstorage |
|
|
177
|
-
| usuallyGetFileds | String | 否 | 经常用到的字典数据，一进项目就会对缓存字典中无此类型的字典数据进行请求，此配置项在iframe项目中能发挥更大作用，进页面就一次性将全部字典数据一个接口请求掉，避免同时请求太多字典接口 宣传 默认空 多个字典以 英文逗号隔开 如 sex,personType | "" |
|
|
178
|
-
| isGetAll | Boolean | 否 | 获取所有字典类型接口 无传值获取所有字典接口，如果无传与真实需要获取全部字典接口的入参不一致 可配置 formatterRequest | false |
|
|
179
|
-
| getDictEveryTime | Boolean | 否 | 是否每次进项目都请求 usuallyGetFileds 字典类型的接口 或者获取所有字典类型接口 | false |
|
|
180
|
-
| treeSetting | Object | 否 | 树形相关数据配置 | 继续阅读文档 |
|
|
181
|
-
|
|
182
|
-
**localDictCodes的格式及字典数据的的格式如下**
|
|
183
|
-
|
|
184
|
-
```ts
|
|
185
|
-
export default {
|
|
186
|
-
SEX: [
|
|
187
|
-
{
|
|
188
|
-
value: "1",
|
|
189
|
-
label: "男"
|
|
190
|
-
},
|
|
191
|
-
{
|
|
192
|
-
value: "2",
|
|
193
|
-
label: "女"
|
|
194
|
-
},
|
|
195
|
-
{
|
|
196
|
-
value: "3",
|
|
197
|
-
label: "未知"
|
|
198
|
-
}
|
|
199
|
-
],
|
|
200
|
-
niceOrBad: [
|
|
201
|
-
{
|
|
202
|
-
"value": "0",
|
|
203
|
-
"label": "好"
|
|
204
|
-
}, {
|
|
205
|
-
"value": "1",
|
|
206
|
-
"label": "差"
|
|
207
|
-
}
|
|
208
|
-
],
|
|
209
|
-
area: [
|
|
210
|
-
{
|
|
211
|
-
"id": "110000",
|
|
212
|
-
"parentId": "0",
|
|
213
|
-
"label": "北京"
|
|
214
|
-
},
|
|
215
|
-
{
|
|
216
|
-
"id": "110100",
|
|
217
|
-
"parentId": "0",
|
|
218
|
-
"label": "北京市"
|
|
219
|
-
},
|
|
220
|
-
{
|
|
221
|
-
"id": "110101",
|
|
222
|
-
"parentId": "110100",
|
|
223
|
-
"areaName": "东城区"
|
|
224
|
-
},
|
|
225
|
-
{
|
|
226
|
-
"id": "110102",
|
|
227
|
-
"parentId": "110100",
|
|
228
|
-
"areaName": "西城区"
|
|
229
|
-
},
|
|
230
|
-
{
|
|
231
|
-
"id": "110105",
|
|
232
|
-
"parentId": "110100",
|
|
233
|
-
"areaName": "朝阳区"
|
|
234
|
-
}
|
|
235
|
-
]
|
|
236
|
-
}
|
|
237
|
-
```
|
|
238
|
-
|
|
239
|
-
:::warning
|
|
240
|
-
|
|
241
|
-
localDictCodes本地配置的value及label 以及 树形结构的 label及id须与dict-setting中的一致
|
|
242
|
-
|
|
243
|
-
接口返回的字段的数据也同理
|
|
244
|
-
|
|
245
|
-
:::
|
|
246
|
-
|
|
247
|
-
#### treeSetting配置
|
|
248
|
-
|
|
249
|
-
| 字段 | 类型 | 必传 | 说明 | 默认值 |
|
|
250
|
-
| :-----------: | :------------: | :--: | ------------------------------------------------------------ | :------: |
|
|
251
|
-
| idField | String | 否 | 树形数据值的键名 | id |
|
|
252
|
-
| parentIdField | String | 否 | 父节点的键名 | parentId |
|
|
253
|
-
| childrenField | String | 否 | 生成的树形结构子节点的字段名 | children |
|
|
254
|
-
| firstId | String，Number | 否 | 根节点的值 | “0” |
|
|
255
|
-
| labelField | String | 否 | 显示的值的字段名 | label |
|
|
256
|
-
| labelArrField | String | 否 | 字典包会将数组转化为树形结构数据 并每一项生成 labelArr字段，内容为【爷爷级/父级label,...,自己的label】 | labelArr |
|
|
257
|
-
| idArrField | String | 否 | 字典包会将数组转化为树形结构数据 并每一项生成 labelArr字段，内容为【爷爷级/父级id,...,自己的id】 | idArr |
|
|
258
|
-
| levelField | String | 否 | 给对象新增的层级字段名 | level |
|
|
259
|
-
| level | Number | 否 | 配置根目录的层级 | 0 |
|
|
260
|
-
| leafField | String | 否 | 是否叶子节点的字段名 值为boolean | leaf |
|
|
261
|
-
|
|
262
|
-
#### 在main.js中的使用
|
|
263
|
-
|
|
264
|
-
```ts
|
|
265
|
-
import Vue from "vue"
|
|
266
|
-
import App from "./App.vue"
|
|
267
|
-
// 引入组件库
|
|
268
|
-
import Vant from "vant-xiaobu"
|
|
269
|
-
import "vant-xiaobu/lib/index.css"
|
|
270
|
-
Vue.use(Vant)
|
|
271
|
-
|
|
272
|
-
import router from "@/router"
|
|
273
|
-
import { beforeEachHandler } from "@/router/before-each"
|
|
274
|
-
import afterEachHandler from "@/router/after-each"
|
|
275
|
-
router.beforeEach(beforeEachHandler)
|
|
276
|
-
router.afterEach(afterEachHandler)
|
|
277
|
-
|
|
278
|
-
import {getGlobalConfigApi} from "@/api/module/common-api.js"
|
|
279
|
-
import dictConfig from "@/dict-config.js"
|
|
280
|
-
import vue2VantDict from "vue2-vant-dict"
|
|
281
|
-
|
|
282
|
-
//获取当前版本号
|
|
283
|
-
getGlobalConfigApi().then(data => {
|
|
284
|
-
const {version} = data
|
|
285
|
-
Object.assign(dictConfig, {version})
|
|
286
|
-
Vue.use(vue2VantDict, dictConfig)
|
|
287
|
-
new Vue({
|
|
288
|
-
router,
|
|
289
|
-
render: h => h(App)
|
|
290
|
-
}).$mount("#app")
|
|
291
|
-
})
|
|
292
|
-
|
|
293
|
-
```
|
|
294
|
-
|
|
295
|
-
至此已全部配置完成，就可以轻松使用了。
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
### 使用
|
|
300
|
-
|
|
301
|
-
此包拥有组件及方法在此列出来
|
|
302
|
-
|
|
303
|
-
> 组件
|
|
304
|
-
>
|
|
305
|
-
> > van-select-dict 选项组件
|
|
306
|
-
> >
|
|
307
|
-
> > van-tabs-dict tab栏组件
|
|
308
|
-
> >
|
|
309
|
-
> > van-field-dict 输入框组件
|
|
310
|
-
> >
|
|
311
|
-
> > van-calendar-dict 日历选择组件
|
|
312
|
-
> >
|
|
313
|
-
> > van-datetime-dict 日期选择组件
|
|
314
|
-
> >
|
|
315
|
-
> > van-dropdown-item-dict 配合van-dropdown-menu的下拉列表组件
|
|
316
|
-
> >
|
|
317
|
-
> > van-radio-dict 单选框组件
|
|
318
|
-
> >
|
|
319
|
-
> > van-checkbox-dict 复选框组件
|
|
320
|
-
> >
|
|
321
|
-
> > van-cascader-dict 联级选项组件
|
|
322
|
-
> >
|
|
323
|
-
> > van-tree-select-dict 树形选择器组件
|
|
324
|
-
> >
|
|
325
|
-
> > van-button--dict 按钮组件
|
|
326
|
-
> >
|
|
327
|
-
> > van-tag-dict 标签组件
|
|
328
|
-
> >
|
|
329
|
-
>
|
|
330
|
-
> 过滤器：字典过滤方法 函数形式调用 也可使用过滤器方式
|
|
331
|
-
>
|
|
332
|
-
>> getLabelByCodeFilter
|
|
333
|
-
> >
|
|
334
|
-
>> getLabelByCodesFilter
|
|
335
|
-
> >
|
|
336
|
-
> > getCodeByLabelFilter
|
|
337
|
-
> >
|
|
338
|
-
> > getCodeByLabelsFilter
|
|
339
|
-
> >
|
|
340
|
-
> > getTreeLabelByCodeFilter
|
|
341
|
-
> >
|
|
342
|
-
> > getTreeLabelByCodesFilter
|
|
343
|
-
> >
|
|
344
|
-
> > getTreeCodeByLabelFilter
|
|
345
|
-
> >
|
|
346
|
-
> > getTreeCodeByLabelsFilter
|
|
347
|
-
> >
|
|
348
|
-
> > formatDate
|
|
349
|
-
> >
|
|
350
|
-
> > desensitization
|
|
351
|
-
>
|
|
352
|
-
> 方法
|
|
353
|
-
>
|
|
354
|
-
>> 普通方法 函数
|
|
355
|
-
> >
|
|
356
|
-
>> > getDictConfig
|
|
357
|
-
> > >
|
|
358
|
-
> > > getDictConfigByKey
|
|
359
|
-
> >
|
|
360
|
-
> > 字典相关 promise方法
|
|
361
|
-
> >
|
|
362
|
-
> > > getLabelByCode
|
|
363
|
-
> > >
|
|
364
|
-
> > > getLabelByCodes
|
|
365
|
-
> > >
|
|
366
|
-
> > > getCodeByLabel
|
|
367
|
-
> > >
|
|
368
|
-
> > > getCodeByLabels
|
|
369
|
-
> > >
|
|
370
|
-
> > > getTreeLabelByCode
|
|
371
|
-
> > >
|
|
372
|
-
> > > getTreeLabelByCodes
|
|
373
|
-
> > >
|
|
374
|
-
> > > getTreeCodeByLabel
|
|
375
|
-
> > >
|
|
376
|
-
> > > getTreeCodeByLabels
|
|
377
|
-
> >
|
|
378
|
-
> > 日期格式化 函数
|
|
379
|
-
> >
|
|
380
|
-
> > > formatDate
|
|
381
|
-
> > >
|
|
382
|
-
> > > isDate
|
|
383
|
-
> >
|
|
384
|
-
> > 脱敏相关 函数
|
|
385
|
-
> >
|
|
386
|
-
> > > mask
|
|
387
|
-
> > >
|
|
388
|
-
> > > maskAddress
|
|
389
|
-
> > >
|
|
390
|
-
> > > maskIdCard
|
|
391
|
-
> > >
|
|
392
|
-
> > > maskName
|
|
393
|
-
> > >
|
|
394
|
-
> > > maskPhone
|
|
395
|
-
> > >
|
|
396
|
-
> > > desensitization
|
|
397
|
-
> >
|
|
398
|
-
> > 树形结构相关 函数
|
|
399
|
-
> >
|
|
400
|
-
> > > listToTree
|
|
401
|
-
> > >
|
|
402
|
-
> > > getTreeItemByCode
|
|
403
|
-
> > >
|
|
404
|
-
> > > getTreeItemByLabel
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
**此处主要讲包的配置及准备工作，具体用法可前往[vue2-element-dict官网](http://xiaobusoft.com/vue2-element-dict)查看使用文档，[备用官网](https://shenxiaobu.github.io/vue2-element-dict/),如有问题可前往[问题反馈表格进行记录](https://docs.qq.com/sheet/DVmZQb0hyTk9uc1dY)， 也可关注微信公众号【爆米花小布】私信进行反馈**
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
## 微信赞助
|
|
413
|
-
|
|
414
|
-
开发不易，如果对您有所帮助，可赞助作者，利于官网服务器运营。您的支持，是我继续努力的最大动力。
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
## 更新日志
|
|
421
|
-
|
|
422
|
-
### 1.0.
|
|
423
|
-
1.
|
|
424
|
-
|
|
425
|
-
### 1.0.
|
|
426
|
-
1.
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
### 0.0
|
|
434
|
-
1.
|
|
435
|
-
|
|
436
|
-
### 0.0.
|
|
437
|
-
1.
|
|
438
|
-
|
|
439
|
-
### 0.0.
|
|
440
|
-
1.
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
### 0.0.
|
|
447
|
-
1. 【修复】修复
|
|
448
|
-
|
|
449
|
-
3
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
### 0.0.
|
|
1
|
+
# vue2-vant-dict
|
|
2
|
+
|
|
3
|
+
vue2-vant-dict是在vue2框架下对vant组件库的部分组件进行二开，实现更轻松使用字典数据的字典包插件。引入此包后，可轻松实现select下拉选项，radio单选框，checkbox多选框，cascader联级选项，tree树形控件，tree-select树形选项，脱敏表单等组件。拥有多种字典相关方法及日期格式化，脱敏等方法。
|
|
4
|
+
|
|
5
|
+
**示例：实现cascader**
|
|
6
|
+
|
|
7
|
+
```vue
|
|
8
|
+
<van-cascader-dict :field-names="{text: 'areaName', value: 'id', children: 'children'}" @dictChange="handleChange" label="地区(基础用法)" label-width="110px" title="地区选择" input-align="right" dictType="city" placeholder="请选择地区" v-model="value1" ></van-cascader-dict>
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
**效果如下**
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
**示例2：实现select**
|
|
16
|
+
|
|
17
|
+
```vue
|
|
18
|
+
<van-select-dict @dictChange="handleChange" label="性别(基础用法)" label-width="100px" input-align="right" dictType="AAC004" placeholder="请选择性别" v-model="value1" ></van-select-dict>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
**示例3：实现输入框非编辑时脱敏**
|
|
24
|
+
|
|
25
|
+
```vue
|
|
26
|
+
<template>
|
|
27
|
+
<div>
|
|
28
|
+
<van-field-dict label="姓名" v-model="value1"></van-field-dict>
|
|
29
|
+
<van-field-dict label="证件号码" v-model="value2"></van-field-dict>
|
|
30
|
+
<van-field-dict label="手机号" v-model="value3"></van-field-dict>
|
|
31
|
+
<van-field-dict label="地址" type="textarea" v-model="value4"></van-field-dict>
|
|
32
|
+
|
|
33
|
+
<van-field-dict label="姓名" maskType="name" v-model="value1"></van-field-dict>
|
|
34
|
+
<van-field-dict label="证件号码" maskType="idCard" v-model="value2"></van-field-dict>
|
|
35
|
+
<van-field-dict label="手机号" maskType="mobile" v-model="value3"></van-field-dict>
|
|
36
|
+
<van-field-dict label="地址" type="textarea" maskType="address" v-model="value4"></van-field-dict>
|
|
37
|
+
<van-field-dict label="前三后四" :maskStart="3" :maskEnd="4" v-model="value5"></van-field-dict>
|
|
38
|
+
<van-field-dict label="前三中三后四" :maskStart="3" :maskMiddle="3" :maskEnd="4" v-model="value6"></van-field-dict>
|
|
39
|
+
<van-field-dict label="默认值" defaultVal="恭喜发财" maskType="name" v-model="value7"></van-field-dict>
|
|
40
|
+
</div>
|
|
41
|
+
</template>
|
|
42
|
+
|
|
43
|
+
<script>
|
|
44
|
+
export default {
|
|
45
|
+
data() {
|
|
46
|
+
return {
|
|
47
|
+
value1: "沈小布",
|
|
48
|
+
value2: "35062418892031",
|
|
49
|
+
value3: "18859661234",
|
|
50
|
+
value4: "宁夏回族自治区闽宁镇涌泉村芗城路142号",
|
|
51
|
+
value5: "1234567890",
|
|
52
|
+
value6: "13145021314",
|
|
53
|
+
value7: ""
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
</script>
|
|
58
|
+
|
|
59
|
+
<style>
|
|
60
|
+
|
|
61
|
+
</style>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
一行代码轻松使用，并且解决选项被更换后关闭弹出层后，选项不会复位的问题。
|
|
69
|
+
|
|
70
|
+
**此处主要讲包的配置及准备工作，具体用法可前往[vue2-vant-dict官网](http://xiaobusoft.com/vue2-vant-dict)查看使用文档，[备用官网](https://shenxiaobu.github.io/vue2-vant-dict/),如有问题可前往[问题反馈表格进行记录](https://docs.qq.com/sheet/DVmZQb0hyTk9uc1dY)， 也可关注微信公众号【爆米花小布】私信进行反馈**
|
|
71
|
+
|
|
72
|
+
## 使用条件
|
|
73
|
+
|
|
74
|
+
1. vue2中 2.6以上版本
|
|
75
|
+
2. 引入vant相关组件及样式，**由于vant关于vue2版本已经不再更新，但是存在cascader组件禁用无法使用的情况，因此对于需要cascader禁用选项可用的，需将vant组件库更换为 [vant-xiaobu](https://www.npmjs.com/package/vant-xiaobu) 组件库，仅对cascader优化，可放心使用。**
|
|
76
|
+
3. 一个请求字典的接口
|
|
77
|
+
1. 不传参可获取全部字典数据
|
|
78
|
+
2. 返回字典包的版本号（字典数据更改时，更改字典包版本号，用于清除在浏览器上缓存的旧的字典包数据）
|
|
79
|
+
|
|
80
|
+
## 快速开始
|
|
81
|
+
|
|
82
|
+
以下全部已js为示例，且以最完美的形式配合vue2-vant-dict包的使用。
|
|
83
|
+
|
|
84
|
+
#### 后端接口要求
|
|
85
|
+
|
|
86
|
+
1. 获取全局配置接口，配置中包含当前字典版本号。对字典数据进行操作时，需修改字典版本号。
|
|
87
|
+
2. 获取字典数据接口，能接受不传参返回所有字典数据，可接受同时获取多个字典类型数据。并且将当前字典版本号返回，用于判断当前项目使用的字典数据是否是数据库最新版的字典数据。
|
|
88
|
+
|
|
89
|
+
#### 安装包
|
|
90
|
+
|
|
91
|
+
```shell
|
|
92
|
+
npm install vue2-vant-dict
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
#### 新建配置文件
|
|
96
|
+
|
|
97
|
+
src目录下新建dict-config.js文件，用于配置字典包获取字典的接口，当前字典版本号，数据字典缓存位置等。以下代码列全一点吧, 真实只有 getDictCodeApi 及 version必传
|
|
98
|
+
|
|
99
|
+
```ts
|
|
100
|
+
//引入请求字典接口
|
|
101
|
+
import {getDictCodeApi} from "@/api/common-api"
|
|
102
|
+
//引入本地缓存数据
|
|
103
|
+
import localDictCodes from "@/assets/data/dict"
|
|
104
|
+
|
|
105
|
+
export default {
|
|
106
|
+
getDictCodeApi: getDictCodeApi, // 获取字典的接口 必传
|
|
107
|
+
version: "0.0.1", // 当前字典版本号 必传 获取全局配置化需 覆盖此版本号数据
|
|
108
|
+
localDictCodes, // 本地字典数据
|
|
109
|
+
versionKey: "xiaobuDictVersion", // 在浏览器缓存的版本号键名 选传 默认值vue3ElementDictVersion
|
|
110
|
+
dictDataKey: "xiaobuDictData", // 在浏览器缓存的字典数据键名 选传 默认值 vue2VantDictData
|
|
111
|
+
query: "type", // 请求字典接口的参数名 选传 默认 dictType
|
|
112
|
+
format: {
|
|
113
|
+
label: "dictLabel",
|
|
114
|
+
value: "dictValue"
|
|
115
|
+
}, // 配置字典值和显示 字段的配置项 需同时配置 不可只配一个 选传 默认值 label 及 value
|
|
116
|
+
formatterDictList: (data, query) => {
|
|
117
|
+
return data.xiaobuDictData
|
|
118
|
+
}, // data为请求字典接口后返回的data数据 格式化返回字典数据，此处return的为字典数据，用于兼容返回的数据结构与默认不一致问题， 选传 默认返回 data.dictData query为请求的字典类型的参数，用于部分接口不按要求，没返回 dictType: [{},{}] 数据结构的形式，此时可利用query自行拼凑成符合的数据格式
|
|
119
|
+
formatterDictVersion: (data) => {
|
|
120
|
+
return data.xiaobuDictVersion
|
|
121
|
+
}, // data为请求字典接口后返回的data数据 格式化返回版本号，用于兼容返回的数据结构与默认不一致问题 默认返回 data.dictVersion 获取到版本号后会 与字典包配置的版本号进行比对
|
|
122
|
+
filterDataFun: (list) => {
|
|
123
|
+
return list.filter(item => item.status === '1')
|
|
124
|
+
}, // 可对返回的字典数据进行过滤 list为某字典类型的数据 选传，默认不过滤 return list
|
|
125
|
+
disabledDataFun: (list) => {
|
|
126
|
+
return list.map(item => {
|
|
127
|
+
...item,
|
|
128
|
+
disabled: item.isDisabled === '1'
|
|
129
|
+
})
|
|
130
|
+
}, // 可对返回的字典数据配置禁用字段 list为某字典类型的数据 选传，默认不过滤 return list
|
|
131
|
+
formatterRequest: (query, dictType) => {
|
|
132
|
+
// ...此处无法举例 以包默认形式展示
|
|
133
|
+
if (!dictType) {
|
|
134
|
+
return { [query]: "" };
|
|
135
|
+
}
|
|
136
|
+
return { [query]: dictType };
|
|
137
|
+
}, // 格式化请求体，用于兼容接口需要的参数格式，默认dictType为空时 获取全部字典数据，接口需要获取多种字典数据时不同后端开发人员可能需要的格式不一样，因此此处可配置成后端开发人员需要的格式。
|
|
138
|
+
|
|
139
|
+
storage: localstorage, //数据缓存的位置 默认 localstorage 可选为 sessionstorage 兼容iframe嵌套项目
|
|
140
|
+
usuallyGetFileds: "", //经常用到的字典数据，一进项目就会对缓存字典中无此类型的字典数据进行请求，此配置项在iframe项目中能发挥更大作用，进页面就一次性将全部字典数据一个接口请求掉，避免同时请求太多字典接口 宣传 默认空 多个字典以 英文逗号隔开 如 sex,personType
|
|
141
|
+
isGetAll: true, // 获取所有字典类型接口 无传值获取所有字典接口，如果无传与真实需要获取全部字典接口的入参不一致 可配置 formatterRequest
|
|
142
|
+
getDictEveryTime: false, // 是否每次进项目都请求 usuallyGetFileds 字典类型的接口 或者获取所有字典类型接口
|
|
143
|
+
treeSetting: {
|
|
144
|
+
labelField: "areaName" //label字段名 默认值id
|
|
145
|
+
parentIdField: "parentId", //父节点唯一标识字段名 默认值 parentId
|
|
146
|
+
childrenField: "children", //子节点标识字段名 默认值 children
|
|
147
|
+
firstId: "0", // 根节点值 默认值 字符串 0
|
|
148
|
+
labelField: "label", //label字段名 默认值 label
|
|
149
|
+
labelArrField: "labelArr", //给对象新增的中文数组字段名 默认值 labelArr 字典包会将数组转化为树形结构数据 并每一项生成 labelArr字段，内容为【爷爷级/父级label,...,自己的label】
|
|
150
|
+
idArrField: "idArr", //给对象新增的id数组字段名 默认值 idArr 字典包会将数组转化为树形结构数据 并每一项生成 labelArr字段，内容为【爷爷级/父级id,...,自己的id】
|
|
151
|
+
levelField: "level", //给对象新增的层级字段名 值为层级
|
|
152
|
+
level: 0, // 给根目录配置的层级 配置根目录层级为 0 级
|
|
153
|
+
leafField: "leaf" //叶子节点标识字段名 值为 true或 false
|
|
154
|
+
} // 对树形数据的配置 选传 字典支持将数组结构转化为树形结构
|
|
155
|
+
}
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
### 配置
|
|
159
|
+
|
|
160
|
+
src下新建文件dict-config.ts，用于配置字典包相关配置。配置项如下
|
|
161
|
+
|
|
162
|
+
| 字段 | 类型 | 必传 | 说明 | 默认值 |
|
|
163
|
+
| :------------------: | :------: | :--: | :----------------------------------------------------------- | :----------------------------------------------------------: |
|
|
164
|
+
| getDictCodeApi | Promise | 是 | 请求字典接口 | — |
|
|
165
|
+
| version | String | 是 | 当前字典包版本号 必传 | — |
|
|
166
|
+
| localDictCodes | Object | 否 | 本地字典数据 | {} |
|
|
167
|
+
| versionKey | String | 否 | 在浏览器缓存的版本号键名 | vue2VantDictVersion |
|
|
168
|
+
| dictDataKey | String | 否 | 在浏览器缓存的字典数据键名 | vue2VantDictData |
|
|
169
|
+
| query | String | 否 | 请求字典接口的参数名 | dictType |
|
|
170
|
+
| format | Object | 否 | 配置字典值和显示 字段的配置项 需同时配置 不可只配一个 | {label: "label", value: "value"} |
|
|
171
|
+
| formatterDictList | Function | 否 | data为请求字典接口后返回的data数据 格式化返回字典数据，此处return的为字典数据，用于兼容返回的数据结构与默认不一致问题， 选传 默认返回 data.dictData query为请求的字典类型的参数，用于部分接口不按要求，没返回 dictType: [{},{}] 数据结构的形式，此时可利用query自行拼凑成符合的数据格式 | (data) => {return data.dictData} |
|
|
172
|
+
| formatterDictVersion | Function | 否 | data为请求字典接口后返回的data数据 格式化返回版本号，用于兼容返回的数据结构与默认不一致问题 默认返回 data.dictVersion 获取到版本号后会 与字典包配置的版本号进行比对 | (data) => {return data.version} |
|
|
173
|
+
| filterDataFun | Function | 否 | 可对返回的字典数据进行过滤 list为某字典类型的数据 | （list) => {return list} |
|
|
174
|
+
| disabledDataFun | Function | 否 | 可对返回的字典数据配置禁用字段 list为某字典类型的数据 | (list) => {return list} |
|
|
175
|
+
| formatterRequest | Function | 否 | 兼格式化请求体，用于兼容接口需要的参数格式，默认dictType为空时 获取全部字典数据，接口需要获取多种字典数据时不同后端开发人员可能需要的格式不一样，因此此处可配置成后端开发人员需要的格式 | (query, dictType) => {if(!dictType){return { [query]: "" }} return { [query]: dictType }} |
|
|
176
|
+
| storage | storage | 否 | 数据缓存的位置 默认 localstorage 可选为 sessionstorage 兼容 | localstorage |
|
|
177
|
+
| usuallyGetFileds | String | 否 | 经常用到的字典数据，一进项目就会对缓存字典中无此类型的字典数据进行请求，此配置项在iframe项目中能发挥更大作用，进页面就一次性将全部字典数据一个接口请求掉，避免同时请求太多字典接口 宣传 默认空 多个字典以 英文逗号隔开 如 sex,personType | "" |
|
|
178
|
+
| isGetAll | Boolean | 否 | 获取所有字典类型接口 无传值获取所有字典接口，如果无传与真实需要获取全部字典接口的入参不一致 可配置 formatterRequest | false |
|
|
179
|
+
| getDictEveryTime | Boolean | 否 | 是否每次进项目都请求 usuallyGetFileds 字典类型的接口 或者获取所有字典类型接口 | false |
|
|
180
|
+
| treeSetting | Object | 否 | 树形相关数据配置 | 继续阅读文档 |
|
|
181
|
+
|
|
182
|
+
**localDictCodes的格式及字典数据的的格式如下**
|
|
183
|
+
|
|
184
|
+
```ts
|
|
185
|
+
export default {
|
|
186
|
+
SEX: [
|
|
187
|
+
{
|
|
188
|
+
value: "1",
|
|
189
|
+
label: "男"
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
value: "2",
|
|
193
|
+
label: "女"
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
value: "3",
|
|
197
|
+
label: "未知"
|
|
198
|
+
}
|
|
199
|
+
],
|
|
200
|
+
niceOrBad: [
|
|
201
|
+
{
|
|
202
|
+
"value": "0",
|
|
203
|
+
"label": "好"
|
|
204
|
+
}, {
|
|
205
|
+
"value": "1",
|
|
206
|
+
"label": "差"
|
|
207
|
+
}
|
|
208
|
+
],
|
|
209
|
+
area: [
|
|
210
|
+
{
|
|
211
|
+
"id": "110000",
|
|
212
|
+
"parentId": "0",
|
|
213
|
+
"label": "北京"
|
|
214
|
+
},
|
|
215
|
+
{
|
|
216
|
+
"id": "110100",
|
|
217
|
+
"parentId": "0",
|
|
218
|
+
"label": "北京市"
|
|
219
|
+
},
|
|
220
|
+
{
|
|
221
|
+
"id": "110101",
|
|
222
|
+
"parentId": "110100",
|
|
223
|
+
"areaName": "东城区"
|
|
224
|
+
},
|
|
225
|
+
{
|
|
226
|
+
"id": "110102",
|
|
227
|
+
"parentId": "110100",
|
|
228
|
+
"areaName": "西城区"
|
|
229
|
+
},
|
|
230
|
+
{
|
|
231
|
+
"id": "110105",
|
|
232
|
+
"parentId": "110100",
|
|
233
|
+
"areaName": "朝阳区"
|
|
234
|
+
}
|
|
235
|
+
]
|
|
236
|
+
}
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
:::warning
|
|
240
|
+
|
|
241
|
+
localDictCodes本地配置的value及label 以及 树形结构的 label及id须与dict-setting中的一致
|
|
242
|
+
|
|
243
|
+
接口返回的字段的数据也同理
|
|
244
|
+
|
|
245
|
+
:::
|
|
246
|
+
|
|
247
|
+
#### treeSetting配置
|
|
248
|
+
|
|
249
|
+
| 字段 | 类型 | 必传 | 说明 | 默认值 |
|
|
250
|
+
| :-----------: | :------------: | :--: | ------------------------------------------------------------ | :------: |
|
|
251
|
+
| idField | String | 否 | 树形数据值的键名 | id |
|
|
252
|
+
| parentIdField | String | 否 | 父节点的键名 | parentId |
|
|
253
|
+
| childrenField | String | 否 | 生成的树形结构子节点的字段名 | children |
|
|
254
|
+
| firstId | String，Number | 否 | 根节点的值 | “0” |
|
|
255
|
+
| labelField | String | 否 | 显示的值的字段名 | label |
|
|
256
|
+
| labelArrField | String | 否 | 字典包会将数组转化为树形结构数据 并每一项生成 labelArr字段，内容为【爷爷级/父级label,...,自己的label】 | labelArr |
|
|
257
|
+
| idArrField | String | 否 | 字典包会将数组转化为树形结构数据 并每一项生成 labelArr字段，内容为【爷爷级/父级id,...,自己的id】 | idArr |
|
|
258
|
+
| levelField | String | 否 | 给对象新增的层级字段名 | level |
|
|
259
|
+
| level | Number | 否 | 配置根目录的层级 | 0 |
|
|
260
|
+
| leafField | String | 否 | 是否叶子节点的字段名 值为boolean | leaf |
|
|
261
|
+
|
|
262
|
+
#### 在main.js中的使用
|
|
263
|
+
|
|
264
|
+
```ts
|
|
265
|
+
import Vue from "vue"
|
|
266
|
+
import App from "./App.vue"
|
|
267
|
+
// 引入组件库
|
|
268
|
+
import Vant from "vant-xiaobu"
|
|
269
|
+
import "vant-xiaobu/lib/index.css"
|
|
270
|
+
Vue.use(Vant)
|
|
271
|
+
|
|
272
|
+
import router from "@/router"
|
|
273
|
+
import { beforeEachHandler } from "@/router/before-each"
|
|
274
|
+
import afterEachHandler from "@/router/after-each"
|
|
275
|
+
router.beforeEach(beforeEachHandler)
|
|
276
|
+
router.afterEach(afterEachHandler)
|
|
277
|
+
|
|
278
|
+
import {getGlobalConfigApi} from "@/api/module/common-api.js"
|
|
279
|
+
import dictConfig from "@/dict-config.js"
|
|
280
|
+
import vue2VantDict from "vue2-vant-dict"
|
|
281
|
+
|
|
282
|
+
//获取当前版本号
|
|
283
|
+
getGlobalConfigApi().then(data => {
|
|
284
|
+
const {version} = data
|
|
285
|
+
Object.assign(dictConfig, {version})
|
|
286
|
+
Vue.use(vue2VantDict, dictConfig)
|
|
287
|
+
new Vue({
|
|
288
|
+
router,
|
|
289
|
+
render: h => h(App)
|
|
290
|
+
}).$mount("#app")
|
|
291
|
+
})
|
|
292
|
+
|
|
293
|
+
```
|
|
294
|
+
|
|
295
|
+
至此已全部配置完成，就可以轻松使用了。
|
|
296
|
+
|
|
297
|
+
|
|
298
|
+
|
|
299
|
+
### 使用
|
|
300
|
+
|
|
301
|
+
此包拥有组件及方法在此列出来
|
|
302
|
+
|
|
303
|
+
> 组件
|
|
304
|
+
>
|
|
305
|
+
> > van-select-dict 选项组件
|
|
306
|
+
> >
|
|
307
|
+
> > van-tabs-dict tab栏组件
|
|
308
|
+
> >
|
|
309
|
+
> > van-field-dict 输入框组件
|
|
310
|
+
> >
|
|
311
|
+
> > van-calendar-dict 日历选择组件
|
|
312
|
+
> >
|
|
313
|
+
> > van-datetime-dict 日期选择组件
|
|
314
|
+
> >
|
|
315
|
+
> > van-dropdown-item-dict 配合van-dropdown-menu的下拉列表组件
|
|
316
|
+
> >
|
|
317
|
+
> > van-radio-dict 单选框组件
|
|
318
|
+
> >
|
|
319
|
+
> > van-checkbox-dict 复选框组件
|
|
320
|
+
> >
|
|
321
|
+
> > van-cascader-dict 联级选项组件
|
|
322
|
+
> >
|
|
323
|
+
> > van-tree-select-dict 树形选择器组件
|
|
324
|
+
> >
|
|
325
|
+
> > van-button--dict 按钮组件
|
|
326
|
+
> >
|
|
327
|
+
> > van-tag-dict 标签组件
|
|
328
|
+
> >
|
|
329
|
+
>
|
|
330
|
+
> 过滤器：字典过滤方法 函数形式调用 也可使用过滤器方式
|
|
331
|
+
>
|
|
332
|
+
>> getLabelByCodeFilter
|
|
333
|
+
> >
|
|
334
|
+
>> getLabelByCodesFilter
|
|
335
|
+
> >
|
|
336
|
+
> > getCodeByLabelFilter
|
|
337
|
+
> >
|
|
338
|
+
> > getCodeByLabelsFilter
|
|
339
|
+
> >
|
|
340
|
+
> > getTreeLabelByCodeFilter
|
|
341
|
+
> >
|
|
342
|
+
> > getTreeLabelByCodesFilter
|
|
343
|
+
> >
|
|
344
|
+
> > getTreeCodeByLabelFilter
|
|
345
|
+
> >
|
|
346
|
+
> > getTreeCodeByLabelsFilter
|
|
347
|
+
> >
|
|
348
|
+
> > formatDate
|
|
349
|
+
> >
|
|
350
|
+
> > desensitization
|
|
351
|
+
>
|
|
352
|
+
> 方法
|
|
353
|
+
>
|
|
354
|
+
>> 普通方法 函数
|
|
355
|
+
> >
|
|
356
|
+
>> > getDictConfig
|
|
357
|
+
> > >
|
|
358
|
+
> > > getDictConfigByKey
|
|
359
|
+
> >
|
|
360
|
+
> > 字典相关 promise方法
|
|
361
|
+
> >
|
|
362
|
+
> > > getLabelByCode
|
|
363
|
+
> > >
|
|
364
|
+
> > > getLabelByCodes
|
|
365
|
+
> > >
|
|
366
|
+
> > > getCodeByLabel
|
|
367
|
+
> > >
|
|
368
|
+
> > > getCodeByLabels
|
|
369
|
+
> > >
|
|
370
|
+
> > > getTreeLabelByCode
|
|
371
|
+
> > >
|
|
372
|
+
> > > getTreeLabelByCodes
|
|
373
|
+
> > >
|
|
374
|
+
> > > getTreeCodeByLabel
|
|
375
|
+
> > >
|
|
376
|
+
> > > getTreeCodeByLabels
|
|
377
|
+
> >
|
|
378
|
+
> > 日期格式化 函数
|
|
379
|
+
> >
|
|
380
|
+
> > > formatDate
|
|
381
|
+
> > >
|
|
382
|
+
> > > isDate
|
|
383
|
+
> >
|
|
384
|
+
> > 脱敏相关 函数
|
|
385
|
+
> >
|
|
386
|
+
> > > mask
|
|
387
|
+
> > >
|
|
388
|
+
> > > maskAddress
|
|
389
|
+
> > >
|
|
390
|
+
> > > maskIdCard
|
|
391
|
+
> > >
|
|
392
|
+
> > > maskName
|
|
393
|
+
> > >
|
|
394
|
+
> > > maskPhone
|
|
395
|
+
> > >
|
|
396
|
+
> > > desensitization
|
|
397
|
+
> >
|
|
398
|
+
> > 树形结构相关 函数
|
|
399
|
+
> >
|
|
400
|
+
> > > listToTree
|
|
401
|
+
> > >
|
|
402
|
+
> > > getTreeItemByCode
|
|
403
|
+
> > >
|
|
404
|
+
> > > getTreeItemByLabel
|
|
405
|
+
|
|
406
|
+
|
|
407
|
+
|
|
408
|
+
**此处主要讲包的配置及准备工作，具体用法可前往[vue2-element-dict官网](http://xiaobusoft.com/vue2-element-dict)查看使用文档，[备用官网](https://shenxiaobu.github.io/vue2-element-dict/),如有问题可前往[问题反馈表格进行记录](https://docs.qq.com/sheet/DVmZQb0hyTk9uc1dY)， 也可关注微信公众号【爆米花小布】私信进行反馈**
|
|
409
|
+
|
|
410
|
+
|
|
411
|
+
|
|
412
|
+
## 微信赞助
|
|
413
|
+
|
|
414
|
+
开发不易，如果对您有所帮助，可赞助作者，利于官网服务器运营。您的支持，是我继续努力的最大动力。
|
|
415
|
+
|
|
416
|
+
|
|
417
|
+
|
|
418
|
+
|
|
419
|
+
|
|
420
|
+
## 更新日志
|
|
421
|
+
|
|
422
|
+
### 1.0.3
|
|
423
|
+
1. 【优化】formatDate方法兼容 时间格式为世界标准格式 的数据
|
|
424
|
+
|
|
425
|
+
### 1.0.2
|
|
426
|
+
1. 【新增功能】新增van-multiple-select-dict组件，实现字典多选功能，可配置形状 shape 选中颜色checked-color 自定义图形插槽 形状大小icon-size 最大选择数量 max 等配置
|
|
427
|
+
|
|
428
|
+
### 1.0.1
|
|
429
|
+
1. 【优化】van-cascader-dict、van-select-dict、van-calendar-dict、van-datetime-dict组件被van-form嵌套时，继承van-form的readonly和disabled属性，去除点击反馈效果
|
|
430
|
+
|
|
431
|
+
2. 【优化】解决van-cascader-dict、van-select-dict、van-calendar-dict、van-datetime-dict组件被van-form嵌套时底部border不会展示的问题
|
|
432
|
+
|
|
433
|
+
### 1.0.0
|
|
434
|
+
1. 【优化】van-cascader-dict、van-select-dict、van-calendar-dict、van-datetime-dict组件被van-form嵌套时，继承van-form的readonly和disabled属性，实现点击无效的
|
|
435
|
+
|
|
436
|
+
### 0.0.9
|
|
437
|
+
1. 【修复】修复版本英文单词书写错误，导致请求字典时本地字典也会触发请求的问题
|
|
438
|
+
|
|
439
|
+
### 0.0.8
|
|
440
|
+
1. 【优化】cascader组件新增showValueFun属性配置，实现自定义展示页面显示结果 接收两个参数 targetArr, spacer
|
|
441
|
+
|
|
442
|
+
### 0.0.6
|
|
443
|
+
1. 【修复】修复datetime、cascader、calendar组件手动赋值时无法正常更新的问题
|
|
444
|
+
2. 【优化】优化部分组件dictChange改变事件时，v-model的值还不是最新值的问题
|
|
445
|
+
|
|
446
|
+
### 0.0.5
|
|
447
|
+
1. 【修复】修复datetime组件手动赋值时无法正常更新的问题
|
|
448
|
+
|
|
449
|
+
### 0.0.3
|
|
450
|
+
1. 【修复】修复cascader字典组件的bug：同个页面同时使用该组件但是 filedNames配置项不一致时出错的问题 优化idfiled非 id时 赋值无法正常展示的问题
|
|
451
|
+
2. 【优化】cascader 新增 delChildren 属性配置，用于删除叶子节点的 children字段
|
|
452
|
+
3. 【优化】desensitization 脱敏方法的options属性为字符串时 则表示脱敏类型
|
|
453
|
+
|
|
454
|
+
### 0.0.2
|
|
455
|
+
1. 【修复】修复datetime组件赋值显示错误的问题
|
|
456
|
+
|
|
457
|
+
### 0.0.0
|
|
455
458
|
vue2-vant-dict最初版本
|