admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 17:18:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: ✏️ 调整ColPicker多列选择器文档中省市区数据源及演示demo

Browse Source
This commit is contained in:
weisheng 2024-07-06 00:23:26 +08:00
parent 9237a04bcb
commit d09bd037e7
9 changed files with 365 additions and 4871 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

397
docs/component/col-picker.md
View File

@ -4,6 +4,71 @@
使用多列选择器来做级联，交互效果较好，多列选择器支持无限级选择。
::: tip 提示
多列选择器常用于选择省市区，我们使用 Vant 提供的中国省市区数据作为数据源，你可以安装 [@vant/area-data](https://github.com/youzan/vant/tree/main/packages/vant-area-data) npm 包来引入：
```bash
# 通过 npm
npm i @vant/area-data
# 通过 yarn
yarn add @vant/area-data
# 通过 pnpm
pnpm add @vant/area-data
# 通过 Bun
bun add @vant/area-data
```
:::
**_为了方便开发者使用`@vant/area-data`进行开发调试，我们封装了`useColPickerData`，你可以直接使用`useColPickerData`来获取数据源。_**
::: details 基于@vant/area-data 包装的`useColPickerData`
```typescript
// 可以将此代码放置于项目src/hooks/useColPickerData.ts中
import { useCascaderAreaData } from '@vant/area-data'
export type CascaderOption = {
text: string
value: string
children?: CascaderOption[]
}
/**
* 使用'@vant/area-data'作为数据源，构造ColPicker组件的数据
* @returns
*/
export function useColPickerData() {
// '@vant/area-data' 数据源
const colPickerData: CascaderOption[] = useCascaderAreaData()
// 根据code查找子节点，不传code则返回所有节点
function findChildrenByCode(data: CascaderOption[], code?: string): CascaderOption[] | null {
if (!code) {
return data
}
for (const item of data) {
if (item.value === code) {
return item.children || null
}
if (item.children) {
const childrenResult = findChildrenByCode(item.children, code)
if (childrenResult) {
return childrenResult
}
}
}
return null
}
return { colPickerData, findChildrenByCode }
}
```
:::
## 基本用法
`label` 设置左侧文本内容；
@ -29,27 +94,30 @@
```
```typescript
// 使用的是 `china-area-data` 库，包含国内最新的地区编码，手动将代码搬一下
import areaData from '../utils/area.json'
// useColPickerData可以参考本章节顶部的介绍
// 导入路径根据自己实际情况调整，万不可一贴了之
import { useColPickerData } from '@/hooks/useColPickerData'
const { colPickerData, findChildrenByCode } = useColPickerData()
const value = ref<any[]>([])
const value = ref<string[]>([])
const area = ref<any[]>([
Object.keys(areaData[86]).map((key) => {
colPickerData.map((item) => {
return {
value: key,
label: areaData[86][key]
value: item.value,
label: item.text
}
})
])
const columnChange = ({ selectedItem, resolve, finish }) => {
if (areaData[selectedItem.value]) {
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve(
Object.keys(areaData[selectedItem.value]).map((key) => {
areaData.map((item) => {
return {
value: key,
label: areaData[selectedItem.value][key]
value: item.value,
label: item.text
}
})
)
@ -74,15 +142,17 @@ function handleConfirm({ value }) {
```
```typescript
// 使用的是 `china-area-data` 库，包含国内最新的地区编码，手动将代码搬一下
import areaData from '../utils/area.json'
// useColPickerData可以参考本章节顶部的介绍
// 导入路径根据自己实际情况调整，万不可一贴了之
import { useColPickerData } from '@/hooks/useColPickerData'
const { colPickerData, findChildrenByCode } = useColPickerData()
const value = ref<any[]>([])
const value = ref<string[]>([])
const area = ref<any[]>([
Object.keys(areaData[86]).map((key) => {
colPickerData.map((item) => {
return {
value: key,
label: areaData[86][key]
value: item.value,
label: item.text
}
})
])
@ -96,12 +166,14 @@ const columnChange = ({ selectedItem, resolve, finish }) => {
toast.error.error('数据请求失败，请重试')
return
}
if (areaData[selectedItem.value]) {
// 这里为什么用selectedItem.value作为code呢？是因为area构造的时候就是将标识放到了value字段上，同理你也可以改为其他字段，只要和area的字段对应即可
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve(
Object.keys(areaData[selectedItem.value]).map((key) => {
areaData.map((item) => {
return {
value: key,
label: areaData[selectedItem.value][key]
value: item.value,
label: item.text
}
})
)
@ -128,38 +200,42 @@ function handleConfirm({ value }) {
```
```typescript
// 使用的是 `china-area-data` 库，包含国内最新的地区编码，手动将代码搬一下
import areaData from '../utils/area.json'
const value = ref<any[]>(['150000', '150100', '150121'])
// useColPickerData可以参考本章节顶部的介绍
// 导入路径根据自己实际情况调整，万不可一贴了之
import { useColPickerData } from '@/hooks/useColPickerData'
const { colPickerData, findChildrenByCode } = useColPickerData()
const value = ref<string[]>(['150000', '150100', '150121'])
const area = ref<any[]>([
Object.keys(areaData[86]).map((key) => {
colPickerData.map((item) => {
return {
value: key,
label: areaData[86][key]
value: item.value,
label: item.text
}
}),
Object.keys(areaData[130000]).map((key) => {
findChildrenByCode(colPickerData, '130000')!.map((item) => {
return {
value: key,
label: areaData[130000][key]
value: item.value,
label: item.text
}
}),
Object.keys(areaData[130200]).map((key) => {
findChildrenByCode(colPickerData, '130200')!.map((item) => {
return {
value: key,
label: areaData[130200][key]
value: item.value,
label: item.text
}
})
])
const columnChange = ({ selectedItem, resolve, finish }) => {
if (areaData[selectedItem.value]) {
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve(
Object.keys(areaData[selectedItem.value]).map((key) => {
areaData.map((item) => {
return {
value: key,
label: areaData[selectedItem.value][key]
value: item.value,
label: item.text
}
})
)
@ -171,7 +247,6 @@ const columnChange = ({ selectedItem, resolve, finish }) => {
function handleConfirm({ value }) {
console.log(value)
}
```
2）设置 `auto-complete` 属性，当 `columns` 数组长度小于 `value` 或长度为 0 时，会自动触发 `columnChange` 函数来补齐数据。设置了该属性后，因为数据需要动态补全，因此 传递出来的参数 selectedItem 只有 value 字段，没有 label 字段。
@ -181,23 +256,26 @@ function handleConfirm({ value }) {
```
```typescript
// 使用的是 `china-area-data` 库，包含国内最新的地区编码，手动将代码搬一下
import areaData from '../utils/area.json'
// useColPickerData可以参考本章节顶部的介绍
// 导入路径根据自己实际情况调整，万不可一贴了之
import { useColPickerData } from '@/hooks/useColPickerData'
const { colPickerData, findChildrenByCode } = useColPickerData()
import { useToast } from '@/uni_modules/wot-design-uni'
const toast = useToast()
const value = ref<any[]>(['150000', '150100', '150121'])
const value = ref<string[]>(['150000', '150100', '150121'])
const area = ref<any[]>(areaData)
const columnChange1 = ({ selectedItem, resolve, finish, index, rowIndex }) => {
const value = index === -1 ? 86 : selectedItem.value
if (areaData[value]) {
const area = ref<any[]>([])
const columnChange = ({ selectedItem, resolve, finish }) => {
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve(
Object.keys(areaData[value]).map((key) => {
areaData.map((item) => {
return {
value: key,
label: areaData[value][key]
value: item.value,
label: item.text
}
})
)
@ -232,26 +310,30 @@ const columnChange1 = ({ selectedItem, resolve, finish, index, rowIndex }) => {
```
```typescript
// 使用的是 `china-area-data` 库，包含国内最新的地区编码，手动将代码搬一下
import areaData from '../utils/area.json'
// useColPickerData可以参考本章节顶部的介绍
// 导入路径根据自己实际情况调整，万不可一贴了之
import { useColPickerData } from '@/hooks/useColPickerData'
const { colPickerData, findChildrenByCode } = useColPickerData()
const value = ref<any[]>([])
const value = ref<string[]>([])
const area = ref<any[]>([
Object.keys(areaData[86]).map((key) => {
colPickerData.map((item) => {
return {
value: key,
label: areaData[86][key]
value: item.value,
label: item.text,
disabled: item.value === '140000'
}
})
])
const columnChange = ({ selectedItem, resolve, finish }) => {
if (areaData[selectedItem.value]) {
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve(
Object.keys(areaData[selectedItem.value]).map((key) => {
areaData.map((item) => {
return {
value: key,
label: areaData[selectedItem.value][key]
value: item.value,
label: item.text
}
})
)
@ -270,26 +352,31 @@ const columnChange = ({ selectedItem, resolve, finish }) => {
```
```typescript
// 使用的是 `china-area-data` 库，包含国内最新的地区编码，手动将代码搬一下
import areaData from '../utils/area.json'
const value = ref<any[]>([])
// useColPickerData可以参考本章节顶部的介绍
// 导入路径根据自己实际情况调整，万不可一贴了之
import { useColPickerData } from '@/hooks/useColPickerData'
const { colPickerData, findChildrenByCode } = useColPickerData()
const value = ref<string[]>([])
const area = ref<any[]>([
Object.keys(areaData[86]).map((key) => {
colPickerData.map((item) => {
return {
value: key,
label: areaData[86][key],
tip: key === '150000' ? '该地区配送时间可能较长' : ''
value: item.value,
label: item.text,
disabled: item.value === '140000',
tip: item.value === '140000' ? '该地区无货，暂时无法选择' : item.value === '150000' ? '该地区配送时间可能较长' : ''
}
})
])
const columnChange = ({ selectedItem, resolve, finish }) => {
if (areaData[selectedItem.value]) {
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve(
Object.keys(areaData[selectedItem.value]).map((key) => {
areaData.map((item) => {
return {
value: key,
label: areaData[selectedItem.value][key]
value: item.value,
label: item.text
}
})
)
@ -315,38 +402,42 @@ const columnChange = ({ selectedItem, resolve, finish }) => {
```
```typescript
// 使用的是 `china-area-data` 库，包含国内最新的地区编码，手动将代码搬一下
import areaData from '../utils/area.json'
// useColPickerData可以参考本章节顶部的介绍
// 导入路径根据自己实际情况调整，万不可一贴了之
import { useColPickerData } from '@/hooks/useColPickerData'
const { colPickerData, findChildrenByCode } = useColPickerData()
const value = ref<string[]>(['130000', '130200', '130204'])
const area = ref<any[]>([
Object.keys(areaData[86]).map((key) => {
colPickerData.map((item) => {
return {
value: key,
label: areaData[86][key]
value: item.value,
label: item.text
}
}),
Object.keys(areaData[130000]).map((key) => {
findChildrenByCode(colPickerData, '130000')!.map((item) => {
return {
value: key,
label: areaData[130000][key]
value: item.value,
label: item.text
}
}),
Object.keys(areaData[130200]).map((key) => {
findChildrenByCode(colPickerData, '130200')!.map((item) => {
return {
value: key,
label: areaData[130200][key]
value: item.value,
label: item.text
}
})
])
const columnChange = ({ selectedItem, resolve, finish }) => {
if (areaData[selectedItem.value]) {
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve(
Object.keys(areaData[selectedItem.value]).map((key) => {
areaData.map((item) => {
return {
value: key,
label: areaData[selectedItem.value][key]
value: item.value,
label: item.text
}
})
)
@ -354,7 +445,8 @@ const columnChange = ({ selectedItem, resolve, finish }) => {
finish()
}
}
const displayFormat = (selectedItems) => {
// 格式化方法
const displayFormat = (selectedItems: Record<string, any>[]) => {
return selectedItems[selectedItems.length - 2].label + '-' + selectedItems[selectedItems.length - 1].label
}
```
@ -383,25 +475,29 @@ const displayFormat = (selectedItems) => {
```
```typescript
// 使用的是 `china-area-data` 库，包含国内最新的地区编码，手动将代码搬一下
import areaData from '../utils/area.json'
const value = ref<any[]>([])
// useColPickerData可以参考本章节顶部的介绍
// 导入路径根据自己实际情况调整，万不可一贴了之
import { useColPickerData } from '@/hooks/useColPickerData'
const { colPickerData, findChildrenByCode } = useColPickerData()
const value = ref<string[]>([])
const area = ref<any[]>([
Object.keys(areaData[86]).map((key) => {
colPickerData.map((item) => {
return {
value: key,
label: areaData[86][key]
value: item.value,
label: item.text
}
})
])
const columnChange = ({ selectedItem, resolve, finish }) => {
if (areaData[selectedItem.value]) {
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve(
Object.keys(areaData[selectedItem.value]).map((key) => {
areaData.map((item) => {
return {
value: key,
label: areaData[selectedItem.value][key]
value: item.value,
label: item.text
}
})
)
@ -409,14 +505,22 @@ const columnChange = ({ selectedItem, resolve, finish }) => {
finish()
}
}
const beforeConfirm = (value, selectedItems, resolve) => {
if (parseInt(value[2]) > 120000) {
const beforeConfirm = (value: (string | number)[], selectedItems: Record<string, any>[], resolve: (isPass: boolean) => void) => {
if (parseInt(String(value[2])) > 120000) {
toast.error('该地区库存不足')
resolve(false)
} else {
resolve(true)
}
}
function handleConfirm({ selectedItems }: any) {
displayValue.value = selectedItems
.map((item: any) => {
return item.label
})
.join('')
}
```
## 错误状态
@ -463,28 +567,31 @@ const beforeConfirm = (value, selectedItems, resolve) => {
```
```typescript
// 使用的是 `china-area-data` 库，包含国内最新的地区编码，手动将代码搬一下
import areaData from '../utils/area.json'
// useColPickerData可以参考本章节顶部的介绍
// 导入路径根据自己实际情况调整，万不可一贴了之
import { useColPickerData } from '@/hooks/useColPickerData'
const { colPickerData, findChildrenByCode } = useColPickerData()
const value = ref<any[]>([])
const value = ref<string[]>([])
const displayValue = ref('')
const area = ref<any[]>([
Object.keys(areaData[86]).map((key) => {
colPickerData.map((item) => {
return {
value: key,
label: areaData[86][key]
value: item.value,
label: item.text
}
})
])
const columnChange = ({ selectedItem, resolve, finish }) => {
if (areaData[selectedItem.value]) {
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve(
Object.keys(areaData[selectedItem.value]).map((key) => {
areaData.map((item) => {
return {
value: key,
label: areaData[selectedItem.value][key]
value: item.value,
label: item.text
}
})
)
@ -496,45 +603,45 @@ const columnChange = ({ selectedItem, resolve, finish }) => {
## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------- | ------ | ------- | -------- |
| v-model | 选中项 | array | - | - | - |
| columns | 选择器数据，二维数组 | array | - | - | - |
| value-key | 选项对象中，value 对应的 key | string | - | value | - |
| label-key | 选项对象中，展示的文本对应的 key | string | - | label | - |
| tip-key | 选项对象中，提示文案对应的 key | string | - | tip | - |
| title | 弹出层标题 | string | - | - | - |
| label | 选择器左侧文案 | string | - | - | - |
| placeholder | 选择器占位符 | string | - | 请选择 | - |
| disabled | 禁用 | boolean | - | fasle | - |
| readonly | 只读 | boolean | - | false | - |
| display-format | 自定义展示文案的格式化函数，返回一个字符串 | function | - | - | - |
| column-change | 接收当前列的选中项 item、当前列下标、当前列选中项下标下一列数据处理函数 resolve、结束选择 finish | function | - | - | - |
| size | 设置选择器大小 | string | large | - | - |
| label-width | 设置左侧标题宽度 | string | - | 33% | - |
| error | 是否为错误状态，错误状态时右侧内容为红色 | boolean | - | false | - |
| required | 必填样式 | boolean | - | false | - |
| align-right | 选择器的值靠右展示 | boolean | - | false | - |
| before-confirm | 确定前校验函数，接收 (value, resolve) 参数，通过 resolve 继续执行 picker，resolve 接收 1 个 boolean 参数 | function | - | - | - |
| loading-color | loading 图标的颜色 | string | - | #4D80F0 | - |
| use-default-slot | 使用默认插槽时设置该选项 | boolean | - | false | - |
| use-label-slot | 使用 label 插槽时设置该选项 | boolean | - | false | - |
| close-on-click-modal | 点击遮罩是否关闭 | boolean | - | true | - |
| auto-complete | 自动触发 column-change 事件来补全数据，当 columns 为空数组或者 columns 数组长度小于 value 数组长度时，会自动触发 column-change | - | false | - |
| z-index | 弹窗层级 | number | - | 15 | - |
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | - |
| ellipsis | 是否超出隐藏 | boolean | - | false | - |
| prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - |
| rules | 表单验证规则，结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - |
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ----------------- | ------ | ------- | -------- |
| v-model | 选中项 | array | - | - | - |
| columns | 选择器数据，二维数组 | array | - | - | - |
| value-key | 选项对象中，value 对应的 key | string | - | value | - |
| label-key | 选项对象中，展示的文本对应的 key | string | - | label | - |
| tip-key | 选项对象中，提示文案对应的 key | string | - | tip | - |
| title | 弹出层标题 | string | - | - | - |
| label | 选择器左侧文案 | string | - | - | - |
| placeholder | 选择器占位符 | string | - | 请选择 | - |
| disabled | 禁用 | boolean | - | fasle | - |
| readonly | 只读 | boolean | - | false | - |
| display-format | 自定义展示文案的格式化函数，返回一个字符串 | function | - | - | - |
| column-change | 接收当前列的选中项 item、当前列下标、当前列选中项下标下一列数据处理函数 resolve、结束选择 finish | function | - | - | - |
| size | 设置选择器大小 | string | large | - | - |
| label-width | 设置左侧标题宽度 | string | - | 33% | - |
| error | 是否为错误状态，错误状态时右侧内容为红色 | boolean | - | false | - |
| required | 必填样式 | boolean | - | false | - |
| align-right | 选择器的值靠右展示 | boolean | - | false | - |
| before-confirm | 确定前校验函数，接收 (value, resolve) 参数，通过 resolve 继续执行 picker，resolve 接收 1 个 boolean 参数 | function | - | - | - |
| loading-color | loading 图标的颜色 | string | - | #4D80F0 | - |
| use-default-slot | 使用默认插槽时设置该选项 | boolean | - | false | - |
| use-label-slot | 使用 label 插槽时设置该选项 | boolean | - | false | - |
| close-on-click-modal | 点击遮罩是否关闭 | boolean | - | true | - |
| auto-complete | 自动触发 column-change 事件来补全数据，当 columns 为空数组或者 columns 数组长度小于 value 数组长度时，会自动触发 column-change | - | false | - |
| z-index | 弹窗层级 | number | - | 15 | - |
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | - |
| ellipsis | 是否超出隐藏 | boolean | - | false | - |
| prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - |
| rules | 表单验证规则，结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - |
### FormItemRule 数据结构
| 键名 | 说明 | 类型 |
| --- | --- | --- |
| required | 是否为必选字段 | `boolean` |
| message | 错误提示文案 | `string` |
| 键名 | 说明 | 类型 |
| --------- | ------------------------------------------------------- | ------------------------------------- |
| required | 是否为必选字段 | `boolean` |
| message | 错误提示文案 | `string` |
| validator | 通过函数进行校验，可以返回一个 `Promise` 来进行异步校验 | `(value, rule) => boolean \| Promise` |
| pattern | 通过正则表达式进行校验，正则无法匹配表示校验不通过 | `RegExp` |
| pattern | 通过正则表达式进行校验，正则无法匹配表示校验不通过 | `RegExp` |
## 选项数据结构
@ -547,10 +654,10 @@ const columnChange = ({ selectedItem, resolve, finish }) => {
## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
| -------- | -------------------------- | ----------------------------------------------- | -------- |
| confirm | 最后一列选项选中时触发 | `{ value(选项值数组), selectedItem(选项数组) }` | - |
| cancel | 点击关闭按钮或者蒙层时触发 | - | - |
| 事件名称 | 说明 | 参数 | 最低版本 |
| -------- | -------------------------- | ------------------------------------------------ | -------- |
| confirm | 最后一列选项选中时触发 | `{ value(选项值数组), selectedItems(选项数组) }` | - |
| cancel | 点击关闭按钮或者蒙层时触发 | - | - |
## Methods

23
docs/component/form.md
View File

@ -525,8 +525,11 @@ function handleSubmit() {
import { useToast } from '@/uni_modules/wot-design-uni'
import { isArray } from '@/uni_modules/wot-design-uni/components/common/util'
import { FormRules } from '@/uni_modules/wot-design-uni/components/wd-form/types'
import { areaData } from '@/utils/area'
import { reactive, ref } from 'vue'
// useColPickerData可以参考本章节顶部的介绍
// 导入路径根据自己实际情况调整，万不可一贴了之
import { useColPickerData } from '@/hooks/useColPickerData'
const { colPickerData, findChildrenByCode } = useColPickerData()
const model = reactive<{
couponName: string
@ -764,20 +767,21 @@ const promotionlist = ref<any[]>([
])
const area = ref<any[]>([
Object.keys(areaData[86]).map((key) => {
colPickerData.map((item) => {
return {
value: key,
label: areaData[86][key]
value: item.value,
label: item.text
}
})
])
const areaChange = ({ selectedItem, resolve, finish }) => {
if (areaData[selectedItem.value]) {
const areaChange: ColPickerColumnChange = ({ selectedItem, resolve, finish }) => {
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve(
Object.keys(areaData[selectedItem.value]).map((key) => {
areaData.map((item) => {
return {
value: key,
label: areaData[selectedItem.value][key]
value: item.value,
label: item.text
}
})
)
@ -785,6 +789,7 @@ const areaChange = ({ selectedItem, resolve, finish }) => {
finish()
}
}
const toast = useToast()
const form = ref()

37
src/hooks/useColPickerData.ts Normal file
View File

@ -0,0 +1,37 @@
import { useCascaderAreaData } from '@vant/area-data'
export type CascaderOption = {
text: string
value: string
children?: CascaderOption[]
}
/**
* 使用'@vant/area-data'作为数据源，构造ColPicker组件的数据
* @returns
*/
export function useColPickerData() {
// '@vant/area-data' 数据源
const colPickerData: CascaderOption[] = useCascaderAreaData()
// 根据code查找子节点，不传code则返回所有节点
function findChildrenByCode(data: CascaderOption[], code?: string): CascaderOption[] | null {
if (!code) {
return data
}
for (const item of data) {
if (item.value === code) {
return item.children || null
}
if (item.children) {
const childrenResult = findChildrenByCode(item.children, code)
if (childrenResult) {
return childrenResult
}
}
}
return null
}
return { colPickerData, findChildrenByCode }
}

72
src/pages/colPicker/Index.vue
View File

@ -47,9 +47,11 @@
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { areaData } from '../../utils/area'
import { useToast } from '@/uni_modules/wot-design-uni'
import type { ColPickerColumnChangeOption } from '@/uni_modules/wot-design-uni/components/wd-col-picker/types'
import type { ColPickerColumnChange } from '@/uni_modules/wot-design-uni/components/wd-col-picker/types'
import { useColPickerData } from '@/hooks/useColPickerData'
const { colPickerData, findChildrenByCode } = useColPickerData()
const value1 = ref<any[]>([])
const value2 = ref<any[]>(['150000', '150100', '150121'])
@ -68,64 +70,65 @@ const value14 = ref<any[]>([])
const value15 = ref<any[]>([])
const displayValue = ref<string>('')
const areaData1 = ref<any[]>([
Object.keys(areaData[86]).map((key: string) => {
colPickerData.map((item) => {
return {
value: key,
label: areaData[86][key]
value: item.value,
label: item.text
}
})
])
const areaData2 = ref<any[]>([])
const areaData3 = ref<any[]>([
Object.keys(areaData[86]).map((key) => {
colPickerData.map((item) => {
return {
value: key,
label: areaData[86][key]
value: item.value,
label: item.text
}
}),
Object.keys(areaData[130000]).map((key) => {
findChildrenByCode(colPickerData, '130000')!.map((item) => {
return {
value: key,
label: areaData[130000][key]
value: item.value,
label: item.text
}
}),
Object.keys(areaData[130200]).map((key) => {
findChildrenByCode(colPickerData, '130200')!.map((item) => {
return {
value: key,
label: areaData[130200][key]
value: item.value,
label: item.text
}
})
])
const areaData4 = ref<any[]>([
Object.keys(areaData[86]).map((key) => {
colPickerData.map((item) => {
return {
value: key,
label: areaData[86][key],
disabled: key === '140000'
value: item.value,
label: item.text,
disabled: item.value === '140000'
}
})
])
const areaData5 = ref<any[]>([
Object.keys(areaData[86]).map((key) => {
colPickerData.map((item) => {
return {
value: key,
label: areaData[86][key],
disabled: key === '140000',
tip: key === '140000' ? '该地区无货，暂时无法选择' : key === '150000' ? '该地区配送时间可能较长' : ''
value: item.value,
label: item.text,
disabled: item.value === '140000',
tip: item.value === '140000' ? '该地区无货，暂时无法选择' : item.value === '150000' ? '该地区配送时间可能较长' : ''
}
})
])
const toast = useToast()
const columnChange1 = ({ selectedItem, resolve, finish, index }: ColPickerColumnChangeOption) => {
const value = index === -1 ? 86 : selectedItem.value
if (areaData[value]) {
const columnChange1: ColPickerColumnChange = ({ selectedItem, resolve, finish }) => {
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve(
Object.keys(areaData[value]).map((key) => {
areaData.map((item) => {
return {
value: key,
label: areaData[value][key]
value: item.value,
label: item.text
}
})
)
@ -133,19 +136,20 @@ const columnChange1 = ({ selectedItem, resolve, finish, index }: ColPickerColumn
finish()
}
}
const columnChange2 = ({ selectedItem, resolve, finish }: ColPickerColumnChangeOption) => {
const columnChange2: ColPickerColumnChange = ({ selectedItem, resolve, finish }) => {
setTimeout(() => {
if (Math.random() > 0.7) {
finish(false)
toast.error('数据请求失败，请重试')
return
}
if (areaData[selectedItem.value]) {
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve(
Object.keys(areaData[selectedItem.value]).map((key) => {
areaData.map((item) => {
return {
value: key,
label: areaData[selectedItem.value][key]
value: item.value,
label: item.text
}
})
)

19
src/pages/configProvider/Index.vue
View File

@ -111,8 +111,10 @@
<script setup lang="ts">
import { useToast, useMessage } from '@/uni_modules/wot-design-uni'
import type { ColPickerColumnChangeOption } from '@/uni_modules/wot-design-uni/components/wd-col-picker/types'
import { areaData } from '@/utils/area'
import { ref } from 'vue'
import { useColPickerData } from '@/hooks/useColPickerData'
const { colPickerData, findChildrenByCode } = useColPickerData()
const showAction = ref<boolean>(false)
const actions = ref<any[]>([])
@ -168,20 +170,21 @@ const address = ref<any[]>([])
const count = ref<number>(1)
const area = ref<any[]>([
Object.keys(areaData[86]).map((key) => {
colPickerData.map((item) => {
return {
value: key,
label: areaData[86][key]
value: item.value,
label: item.text
}
})
])
const areaChange = ({ selectedItem, resolve, finish }: ColPickerColumnChangeOption) => {
if (areaData[selectedItem.value]) {
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve(
Object.keys(areaData[selectedItem.value]).map((key) => {
areaData.map((item) => {
return {
value: key,
label: areaData[selectedItem.value][key]
value: item.value,
label: item.text
}
})
)

20
src/pages/form/demo3.vue
View File

@ -114,7 +114,10 @@ import { isArray } from '@/uni_modules/wot-design-uni/components/common/util'
import type { ColPickerColumnChange } from '@/uni_modules/wot-design-uni/components/wd-col-picker/types'
import { type FormInstance, type FormRules } from '@/uni_modules/wot-design-uni/components/wd-form/types'
import type { UploadFileItem } from '@/uni_modules/wot-design-uni/components/wd-upload/types'
import { areaData } from '@/utils/area'
import { useColPickerData } from '@/hooks/useColPickerData'
const { colPickerData, findChildrenByCode } = useColPickerData()
import { reactive, ref } from 'vue'
const model = reactive<{
@ -353,20 +356,21 @@ const promotionlist = ref<any[]>([
])
const area = ref<any[]>([
Object.keys(areaData[86]).map((key) => {
colPickerData.map((item) => {
return {
value: key,
label: areaData[86][key]
value: item.value,
label: item.text
}
})
])
const areaChange: ColPickerColumnChange = ({ selectedItem, resolve, finish }) => {
if (areaData[selectedItem.value]) {
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve(
Object.keys(areaData[selectedItem.value]).map((key) => {
areaData.map((item) => {
return {
value: key,
label: areaData[selectedItem.value][key]
value: item.value,
label: item.text
}
})
)

90
src/static/touch-emulator.js
View File

@ -1,90 +0,0 @@
/**
* Minified by jsDelivr using Terser v5.14.1.
* Original file: /npm/@vant/touch-emulator@1.4.0/dist/index.js
*
* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
*/
!(function () {
if ('undefined' != typeof window) {
var e,
t = 'ontouchstart' in window
document.createTouch ||
(document.createTouch = function (e, t, o, u, c, i, r) {
return new n(t, o, { pageX: u, pageY: c, screenX: i, screenY: r, clientX: u - window.pageXOffset, clientY: c - window.pageYOffset }, 0, 0)
}),
document.createTouchList ||
(document.createTouchList = function () {
for (var e = u(), t = 0; t < arguments.length; t++) e[t] = arguments[t]
return (e.length = arguments.length), e
}),
Element.prototype.matches || (Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector),
Element.prototype.closest ||
(Element.prototype.closest = function (e) {
var t = this
do {
if (t.matches(e)) return t
t = t.parentElement || t.parentNode
} while (null !== t && 1 === t.nodeType)
return null
})
var n = function (e, t, n, o, u) {
;(o = o || 0),
(u = u || 0),
(this.identifier = t),
(this.target = e),
(this.clientX = n.clientX + o),
(this.clientY = n.clientY + u),
(this.screenX = n.screenX + o),
(this.screenY = n.screenY + u),
(this.pageX = n.pageX + o),
(this.pageY = n.pageY + u)
},
o = !1
;(s.multiTouchOffset = 75), t || new s()
}
function u() {
var e = []
return (
(e.item = function (e) {
return this[e] || null
}),
(e.identifiedTouch = function (e) {
return this[e + 1] || null
}),
e
)
}
function c(t) {
return function (n) {
var u, c, s
;('mousedown' === n.type && (o = !0), 'mouseup' === n.type && (o = !1), 'mousemove' !== n.type || o) &&
(('mousedown' === n.type || !e || (e && !e.dispatchEvent)) && (e = n.target),
null == e.closest('[data-no-touch-simulate]') &&
((u = t),
(c = n),
(s = document.createEvent('Event')).initEvent(u, !0, !0),
(s.altKey = c.altKey),
(s.ctrlKey = c.ctrlKey),
(s.metaKey = c.metaKey),
(s.shiftKey = c.shiftKey),
(s.touches = r(c)),
(s.targetTouches = r(c)),
(s.changedTouches = i(c)),
e.dispatchEvent(s)),
'mouseup' === n.type && (e = null))
}
}
function i(t) {
var o = u()
return o.push(new n(e, 1, t, 0, 0)), o
}
function r(e) {
return 'mouseup' === e.type ? u() : i(e)
}
function s() {
window.addEventListener('mousedown', c('touchstart'), !0),
window.addEventListener('mousemove', c('touchmove'), !0),
window.addEventListener('mouseup', c('touchend'), !0)
}
})()
//# sourceMappingURL=/sm/09d4343b52fa585c57a1a2c7344e01acc2c39070e2053d5939820b8f1140409d.map

2
src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue
View File

@ -126,7 +126,7 @@ import { selectPickerProps, type SelectPickerExpose } from './types'
const { translate } = useTranslate('select-picker')
const props = defineProps(selectPickerProps)
const emit = defineEmits(['change', 'cancel', 'confirm', 'update:modelValue','open','close'])
const emit = defineEmits(['change', 'cancel', 'confirm', 'update:modelValue', 'open', 'close'])
const pickerShow = ref<boolean>(false)
const selectList = ref<Array<number | boolean | string> | number | boolean | string>([])

4576
src/utils/area.ts
View File

File diff suppressed because it is too large Load Diff