Skip to content

Commit d09bd03

Browse files
MoonofweishengMoonofweisheng
committed
docs: ✏️ 调整ColPicker多列选择器文档中省市区数据源及演示demo
1 parent 9237a04 commit d09bd03

File tree

9 files changed

+365
-4871
lines changed

9 files changed

+365
-4871
lines changed

‎docs/component/col-picker.md‎

Lines changed: 252 additions & 145 deletions
Large diffs are not rendered by default.

‎docs/component/form.md‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -525,8 +525,11 @@ function handleSubmit() {
525525
import { useToast } from '@/uni_modules/wot-design-uni'
526526
import { isArray } from '@/uni_modules/wot-design-uni/components/common/util'
527527
import { FormRules } from '@/uni_modules/wot-design-uni/components/wd-form/types'
528-
import { areaData } from '@/utils/area'
529528
import { reactive, ref } from 'vue'
529+
// useColPickerData可以参考本章节顶部的介绍
530+
// 导入路径根据自己实际情况调整，万不可一贴了之
531+
import { useColPickerData } from '@/hooks/useColPickerData'
532+
const { colPickerData, findChildrenByCode } = useColPickerData()
530533

531534
const model = reactive<{
532535
couponName: string
@@ -764,27 +767,29 @@ const promotionlist = ref<any[]>([
764767
])
765768

766769
const area = ref<any[]>([
767-
Object.keys(areaData[86]).map((key) => {
770+
colPickerData.map((item) => {
768771
return {
769-
value: key,
770-
label: areaData[86][key]
772+
value: item.value,
773+
label: item.text
771774
}
772775
})
773776
])
774-
const areaChange = ({ selectedItem, resolve, finish }) => {
775-
if (areaData[selectedItem.value]) {
777+
const areaChange: ColPickerColumnChange = ({ selectedItem, resolve, finish }) => {
778+
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
779+
if (areaData && areaData.length) {
776780
resolve(
777-
Object.keys(areaData[selectedItem.value]).map((key) => {
781+
areaData.map((item) => {
778782
return {
779-
value: key,
780-
label: areaData[selectedItem.value][key]
783+
value: item.value,
784+
label: item.text
781785
}
782786
})
783787
)
784788
} else {
785789
finish()
786790
}
787791
}
792+
788793
const toast = useToast()
789794
const form = ref()
790795

‎src/hooks/useColPickerData.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { useCascaderAreaData } from '@vant/area-data'
2+
3+
export type CascaderOption = {
4+
text: string
5+
value: string
6+
children?: CascaderOption[]
7+
}
8+
9+
/**
10+
* 使用'@vant/area-data'作为数据源，构造ColPicker组件的数据
11+
* @returns
12+
*/
13+
export function useColPickerData() {
14+
// '@vant/area-data' 数据源
15+
const colPickerData: CascaderOption[] = useCascaderAreaData()
16+
17+
// 根据code查找子节点，不传code则返回所有节点
18+
function findChildrenByCode(data: CascaderOption[], code?: string): CascaderOption[] | null {
19+
if (!code) {
20+
return data
21+
}
22+
for (const item of data) {
23+
if (item.value === code) {
24+
return item.children || null
25+
}
26+
if (item.children) {
27+
const childrenResult = findChildrenByCode(item.children, code)
28+
if (childrenResult) {
29+
return childrenResult
30+
}
31+
}
32+
}
33+
return null
34+
}
35+
36+
return { colPickerData, findChildrenByCode }
37+
}

‎src/pages/colPicker/Index.vue‎

Lines changed: 38 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,11 @@
4747
</template>
4848
<script lang="ts" setup>
4949
import { ref } from 'vue'
50-
import { areaData } from '../../utils/area'
5150
import { useToast } from '@/uni_modules/wot-design-uni'
52-
import type { ColPickerColumnChangeOption } from '@/uni_modules/wot-design-uni/components/wd-col-picker/types'
51+
import type { ColPickerColumnChange } from '@/uni_modules/wot-design-uni/components/wd-col-picker/types'
52+
import { useColPickerData } from '@/hooks/useColPickerData'
53+
54+
const { colPickerData, findChildrenByCode } = useColPickerData()
5355
5456
const value1 = ref<any[]>([])
5557
const value2 = ref<any[]>(['150000', '150100', '150121'])
@@ -68,84 +70,86 @@ const value14 = ref<any[]>([])
6870
const value15 = ref<any[]>([])
6971
const displayValue = ref<string>('')
7072
const areaData1 = ref<any[]>([
71-
Object.keys(areaData[86]).map((key: string) => {
73+
colPickerData.map((item) => {
7274
return {
73-
value: key,
74-
label: areaData[86][key]
75+
value: item.value,
76+
label: item.text
7577
}
7678
})
7779
])
80+
7881
const areaData2 = ref<any[]>([])
7982
const areaData3 = ref<any[]>([
80-
Object.keys(areaData[86]).map((key) => {
83+
colPickerData.map((item) => {
8184
return {
82-
value: key,
83-
label: areaData[86][key]
85+
value: item.value,
86+
label: item.text
8487
}
8588
}),
86-
Object.keys(areaData[130000]).map((key) => {
89+
findChildrenByCode(colPickerData, '130000')!.map((item) => {
8790
return {
88-
value: key,
89-
label: areaData[130000][key]
91+
value: item.value,
92+
label: item.text
9093
}
9194
}),
92-
Object.keys(areaData[130200]).map((key) => {
95+
findChildrenByCode(colPickerData, '130200')!.map((item) => {
9396
return {
94-
value: key,
95-
label: areaData[130200][key]
97+
value: item.value,
98+
label: item.text
9699
}
97100
})
98101
])
99102
const areaData4 = ref<any[]>([
100-
Object.keys(areaData[86]).map((key) => {
103+
colPickerData.map((item) => {
101104
return {
102-
value: key,
103-
label: areaData[86][key],
104-
disabled: key === '140000'
105+
value: item.value,
106+
label: item.text,
107+
disabled: item.value === '140000'
105108
}
106109
})
107110
])
108111
const areaData5 = ref<any[]>([
109-
Object.keys(areaData[86]).map((key) => {
112+
colPickerData.map((item) => {
110113
return {
111-
value: key,
112-
label: areaData[86][key],
113-
disabled: key === '140000',
114-
tip: key === '140000' ? '该地区无货，暂时无法选择' : key === '150000' ? '该地区配送时间可能较长' : ''
114+
value: item.value,
115+
label: item.text,
116+
disabled: item.value === '140000',
117+
tip: item.value === '140000' ? '该地区无货，暂时无法选择' : item.value === '150000' ? '该地区配送时间可能较长' : ''
115118
}
116119
})
117120
])
118121
119122
const toast = useToast()
120123
121-
const columnChange1 = ({ selectedItem, resolve, finish, index }: ColPickerColumnChangeOption) => {
122-
const value = index === -1 ? 86 : selectedItem.value
123-
if (areaData[value]) {
124+
const columnChange1: ColPickerColumnChange = ({ selectedItem, resolve, finish }) => {
125+
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
126+
if (areaData && areaData.length) {
124127
resolve(
125-
Object.keys(areaData[value]).map((key) => {
128+
areaData.map((item) => {
126129
return {
127-
value: key,
128-
label: areaData[value][key]
130+
value: item.value,
131+
label: item.text
129132
}
130133
})
131134
)
132135
} else {
133136
finish()
134137
}
135138
}
136-
const columnChange2 = ({ selectedItem, resolve, finish }: ColPickerColumnChangeOption) => {
139+
const columnChange2: ColPickerColumnChange = ({ selectedItem, resolve, finish }) => {
137140
setTimeout(() => {
138141
if (Math.random() > 0.7) {
139142
finish(false)
140143
toast.error('数据请求失败，请重试')
141144
return
142145
}
143-
if (areaData[selectedItem.value]) {
146+
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
147+
if (areaData && areaData.length) {
144148
resolve(
145-
Object.keys(areaData[selectedItem.value]).map((key) => {
149+
areaData.map((item) => {
146150
return {
147-
value: key,
148-
label: areaData[selectedItem.value][key]
151+
value: item.value,
152+
label: item.text
149153
}
150154
})
151155
)

‎src/pages/configProvider/Index.vue‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -111,8 +111,10 @@
111111
<script setup lang="ts">
112112
import { useToast, useMessage } from '@/uni_modules/wot-design-uni'
113113
import type { ColPickerColumnChangeOption } from '@/uni_modules/wot-design-uni/components/wd-col-picker/types'
114-
import { areaData } from '@/utils/area'
115114
import { ref } from 'vue'
115+
import { useColPickerData } from '@/hooks/useColPickerData'
116+
const { colPickerData, findChildrenByCode } = useColPickerData()
117+
116118
const showAction = ref<boolean>(false)
117119
const actions = ref<any[]>([])
118120
@@ -168,20 +170,21 @@ const address = ref<any[]>([])
168170
const count = ref<number>(1)
169171
170172
const area = ref<any[]>([
171-
Object.keys(areaData[86]).map((key) => {
173+
colPickerData.map((item) => {
172174
return {
173-
value: key,
174-
label: areaData[86][key]
175+
value: item.value,
176+
label: item.text
175177
}
176178
})
177179
])
178180
const areaChange = ({ selectedItem, resolve, finish }: ColPickerColumnChangeOption) => {
179-
if (areaData[selectedItem.value]) {
181+
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
182+
if (areaData && areaData.length) {
180183
resolve(
181-
Object.keys(areaData[selectedItem.value]).map((key) => {
184+
areaData.map((item) => {
182185
return {
183-
value: key,
184-
label: areaData[selectedItem.value][key]
186+
value: item.value,
187+
label: item.text
185188
}
186189
})
187190
)

‎src/pages/form/demo3.vue‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,10 @@ import { isArray } from '@/uni_modules/wot-design-uni/components/common/util'
114114
import type { ColPickerColumnChange } from '@/uni_modules/wot-design-uni/components/wd-col-picker/types'
115115
import { type FormInstance, type FormRules } from '@/uni_modules/wot-design-uni/components/wd-form/types'
116116
import type { UploadFileItem } from '@/uni_modules/wot-design-uni/components/wd-upload/types'
117-
import { areaData } from '@/utils/area'
117+
import { useColPickerData } from '@/hooks/useColPickerData'
118+
119+
const { colPickerData, findChildrenByCode } = useColPickerData()
120+
118121
import { reactive, ref } from 'vue'
119122
120123
const model = reactive<{
@@ -353,20 +356,21 @@ const promotionlist = ref<any[]>([
353356
])
354357
355358
const area = ref<any[]>([
356-
Object.keys(areaData[86]).map((key) => {
359+
colPickerData.map((item) => {
357360
return {
358-
value: key,
359-
label: areaData[86][key]
361+
value: item.value,
362+
label: item.text
360363
}
361364
})
362365
])
363366
const areaChange: ColPickerColumnChange = ({ selectedItem, resolve, finish }) => {
364-
if (areaData[selectedItem.value]) {
367+
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
368+
if (areaData && areaData.length) {
365369
resolve(
366-
Object.keys(areaData[selectedItem.value]).map((key) => {
370+
areaData.map((item) => {
367371
return {
368-
value: key,
369-
label: areaData[selectedItem.value][key]
372+
value: item.value,
373+
label: item.text
370374
}
371375
})
372376
)

‎src/static/touch-emulator.js‎

Lines changed: 0 additions & 90 deletions
This file was deleted.

0 commit comments

Comments
 (0)