diff --git a/packages/nutui-taro-demo/src/dentry/pages/picker/index.vue b/packages/nutui-taro-demo/src/dentry/pages/picker/index.vue index ff662bb5b1..1e6fd8c128 100644 --- a/packages/nutui-taro-demo/src/dentry/pages/picker/index.vue +++ b/packages/nutui-taro-demo/src/dentry/pages/picker/index.vue @@ -20,7 +20,7 @@ @confirm="popupConfirm" @cancel="show = false" > - 永远有效 + 底部按钮 @@ -36,185 +36,171 @@

异步获取

+

自定义字段名

+ + + - diff --git a/src/packages/__VUE/picker/Column.vue b/src/packages/__VUE/picker/Column.vue index 44656b89ab..544dd67240 100644 --- a/src/packages/__VUE/picker/Column.vue +++ b/src/packages/__VUE/picker/Column.vue @@ -67,6 +67,11 @@ export default create({ fieldNames: { type: Object as PropType>, default: () => ({}) + }, + // 特殊环境判断 + taro: { + type: Boolean, + defualt: false } }, @@ -134,8 +139,8 @@ export default create({ const onTouchStart = (event: TouchEvent) => { touch.start(event); - if (moving.value) { - let dom = roller.value as any; + if (moving.value && !props.taro) { + const dom = roller.value as any; const { transform } = window.getComputedStyle(dom); if (props.threeDimensional) { const circle = Math.floor(parseInt(touchDeg.value as string) / 360); diff --git a/src/packages/__VUE/picker/baseProps.ts b/src/packages/__VUE/picker/baseProps.ts index a947be572f..b73262119b 100644 --- a/src/packages/__VUE/picker/baseProps.ts +++ b/src/packages/__VUE/picker/baseProps.ts @@ -25,7 +25,7 @@ export default { }, threeDimensional: { type: Boolean, - default: true + default: false }, swipeDuration: { type: [Number, String], diff --git a/src/packages/__VUE/picker/common.ts b/src/packages/__VUE/picker/common.ts index f665ef1e95..84c2387461 100644 --- a/src/packages/__VUE/picker/common.ts +++ b/src/packages/__VUE/picker/common.ts @@ -14,8 +14,10 @@ export const componentWeb = { props: baseProps, emits: ['cancel', 'change', 'confirm', 'update:modelValue'], setup(props: any, { emit }: any) { - const { changeHandler, confirm, defaultValues, columnsList, columnsType, columnFieldNames, classes, cancel } = - usePicker(props, emit); + const { changeHandler, confirm, defaultValues, columnsList, columnsType, columnFieldNames, cancel } = usePicker( + props, + emit + ); const state = reactive<{ ENV: TaroGeneral.ENV_TYPE; @@ -50,7 +52,6 @@ export const componentWeb = { }); return { - classes, ...toRefs(state), column, columnsType, @@ -83,7 +84,6 @@ export const componentWeapp = { columnsList, columnsType, columnFieldNames, - classes, cancel } = usePicker(props, emit); const state = reactive({ @@ -137,7 +137,6 @@ export const componentWeapp = { }; return { - classes, ...toRefs(state), column, columnsType, diff --git a/src/packages/__VUE/picker/demo.vue b/src/packages/__VUE/picker/demo.vue index b10ec1599b..78c61af723 100644 --- a/src/packages/__VUE/picker/demo.vue +++ b/src/packages/__VUE/picker/demo.vue @@ -17,29 +17,16 @@ -

{{ translate('customFieldNames') }}

- - -

{{ translate('defaultSelected') }}

-

{{ translate('tileDesc') }}

+

{{ translate('3d') }}

@@ -63,6 +50,19 @@ :title="translate('chooseCity')" @confirm="confirm" > + +

{{ translate('customFieldNames') }}

+ + ``` @@ -56,110 +47,34 @@ The Picker is usually filled in as an auxiliary form, which can be paired with a :::demo -```html +```vue - -``` - -### Custom Columns Field - -:::demo - -```html - - ``` @@ -171,78 +86,55 @@ The default selection is implemented by setting `modelValue`, which is an array :::demo -```html +```vue - ``` ::: -### Tile +### 3D :::demo -```html +```vue - ``` @@ -252,45 +144,34 @@ The default selection is implemented by setting `modelValue`, which is an array :::demo -```html +```vue - ``` @@ -302,71 +183,63 @@ Use the children field of the Columns attribute to cascade options :::demo -```html +```vue - ``` @@ -376,43 +249,83 @@ Use the children field of the Columns attribute to cascade options :::demo -```html +```vue +``` + +::: + +### Custom Columns Field v4.1.4 + +:::demo + +```vue + + ``` @@ -422,19 +335,19 @@ Use the children field of the Columns attribute to cascade options ### Props -| Attribute | Description | Type | Default | -| ------------------ | ---------------------------------- | ---------------------------------- | -------------------------------------------------------- | -| v-model:value | Default Index | Array | `[]` | -| columns | Columns data | PickerOption[] \| PickerOption[][] | - | -| field-names | custom columns field | object | `{ text: 'text', value: 'value', children: 'children' }` | -| title | Toolbar title | string | - | -| cancel-text | Text of cancel button | string | `cancel` | -| ok-text | Text of confirm button | string | `confirm` | -| three-dimensional | Turn on 3D effects | boolean | `true` | -| swipe-duration | Duration of the momentum animation | number \| string | `1000` | -| visible-option-num | Count of visible columns | number \| string | `7` | -| option-height | Option height | number \| string | `36` | -| show-toolbar | Whether to show toolbar | boolean | `true` | +| Attribute | Description | Type | Default | +| ------------------- | ---------------------------------- | ---------------------------------- | -------------------------------------------------------- | +| v-model:value | Default Index | Array | `[]` | +| columns | Columns data | PickerOption[] \| PickerOption[][] | - | +| field-names`v4.1.4` | custom columns field | object | `{ text: 'text', value: 'value', children: 'children' }` | +| title | Toolbar title | string | - | +| cancel-text | Text of cancel button | string | `cancel` | +| ok-text | Text of confirm button | string | `confirm` | +| three-dimensional | Turn on 3D effects | boolean | `false` | +| swipe-duration | Duration of the momentum animation | number \| string | `1000` | +| visible-option-num | Count of visible columns | number \| string | `7` | +| option-height | Option height | number \| string | `36` | +| show-toolbar | Whether to show toolbar | boolean | `true` | ### Events diff --git a/src/packages/__VUE/picker/doc.en.ts b/src/packages/__VUE/picker/doc.en.ts index 3d3733af45..2fef7def09 100644 --- a/src/packages/__VUE/picker/doc.en.ts +++ b/src/packages/__VUE/picker/doc.en.ts @@ -3,7 +3,7 @@ export const Internation = { basic: '基础用法', chooseCity: '请选择城市', defaultSelected: '默认选中项', - tileDesc: '平铺展示', + '3d': '3D 展示', popupDesc: '搭配 Popup 使用', customFieldNames: '自定义字段名', multipleColumns: '多列样式', @@ -13,7 +13,7 @@ export const Internation = { custom: '自定义按钮', validTime: '请选择有效日期', chooseDate: '选择日期', - always: '永远有效', + always: '底部按钮', monday: '周一', tuesday: '周二', wednesday: '周三', @@ -22,13 +22,13 @@ export const Internation = { morning: '上午', afternoon: '下午', evening: '晚上', - nanJing: '南京市', - wuXi: '无锡市', - zangZu: '海北藏族自治区', - beiJing: '北京市', - lianYunGang: '连云港市', - zheJiang: '浙江市', - jiangSu: '江苏市', + nanJing: '南京', + wuXi: '无锡', + zangZu: '海北', + beiJing: '北京', + lianYunGang: '连云港', + zheJiang: '浙江', + jiangSu: '江苏', hangZhou: '杭州', xiHu: '西湖区', yuHang: '余杭区', @@ -47,7 +47,7 @@ export const Internation = { basic: 'Basic Usage', chooseCity: 'Choose City', defaultSelected: 'Default Index', - tileDesc: 'Tile', + '3d': '3D', popupDesc: 'With Popup', customFieldNames: 'Custom Field Names', multipleColumns: 'Multiple Columns', diff --git a/src/packages/__VUE/picker/doc.md b/src/packages/__VUE/picker/doc.md index d1a5f0d603..3606130c79 100644 --- a/src/packages/__VUE/picker/doc.md +++ b/src/packages/__VUE/picker/doc.md @@ -6,7 +6,7 @@ ### 安装 -```javascript +```js import { createApp } from 'vue'; import { Picker } from '@nutui/nutui'; @@ -18,33 +18,24 @@ app.use(Picker); :::demo -```html +```vue - ``` @@ -56,352 +47,293 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。 :::demo -```html +```vue - ``` ::: -### 自定义字段名 +### 默认选中项 -可以使用 `fieldNames` 属性自定义`columns`中数据的格式。 +通过设置 `v-model` 实现默认选中项，`v-model` 是一个包含每项配置 value 值的数组。 :::demo -```html +```vue - ``` -### 默认选中项 +::: -通过设置 `modelValue` 实现默认选中项，`modelValue` 是一个包含每项配置 value 值的数组。 +### 3D 展示 + +属性 `three-dimensional` 可用于开启 3D 滚动效果。开启后可能会影响性能。 :::demo -```html +```vue - ``` ::: -### 平铺展示 +### 多列展示 -属性 `threeDimensional` 可关闭 3D 滚动效果。 +`columns` 属性可以通过二维数组的形式配置多列选择。 :::demo -```html +```vue - ``` ::: -### 多列展示 +### 多级联动 -`columns` 属性可以通过二维数组的形式配置多列选择。 +使用 `columns` 属性的 `children` 字段可以实现选项级联的效果。 :::demo -```html +```vue - ``` ::: -### 多级联动 +### 异步获取 -使用 `columns` 属性的 `children` 字段可以实现选项级联的效果。 +在实际开发中，大部分情况 `Columns` 属性的数据是通过异步方式获取的。 :::demo -```html +```vue ``` ::: -### 异步获取 +### 自定义字段名 v4.1.4 -在实际开发中，大部分情况 `Columns` 属性的数据是通过异步方式获取的。 +可以使用 `field-names` 属性自定义 `columns` 中数据的格式。 :::demo -```html +```vue - ``` @@ -411,19 +343,19 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。 ### Props -| 参数 | 说明 | 类型 | 默认值 | -| ------------------ | ------------------------------ | ---------------------------------- | -------------------------------------------------------- | -| v-model:value | 默认选中项 | Array | `[]` | -| columns | 对象数组，配置每一列显示的数据 | PickerOption[] \| PickerOption[][] | - | -| field-names | 自定义 columns 中的字段 | object | `{ text: 'text', value: 'value', children: 'children' }` | -| title | 设置标题 | string | - | -| cancel-text | 取消按钮文案 | string | `取消` | -| ok-text | 确定按钮文案 | string | `确定` | -| three-dimensional | 是否开启 3D 效果 | boolean | `true` | -| swipe-duration | 惯性滚动时长 | number \| string | `1000` | -| visible-option-num | 可见的选项个数 | number \| string | `7` | -| option-height | 选项高度 | number \| string | `36` | -| show-toolbar | 是否显示顶部导航 | boolean | `true` | +| 参数 | 说明 | 类型 | 默认值 | +| ------------------- | ------------------------------ | ---------------------------------- | -------------------------------------------------------- | +| v-model:value | 默认选中项 | Array | `[]` | +| columns | 对象数组，配置每一列显示的数据 | PickerOption[] \| PickerOption[][] | - | +| field-names`v4.1.4` | 自定义 columns 中的字段 | object | `{ text: 'text', value: 'value', children: 'children' }` | +| title | 设置标题 | string | - | +| cancel-text | 取消按钮文案 | string | `取消` | +| ok-text | 确定按钮文案 | string | `确定` | +| three-dimensional | 是否开启 3D 效果 | boolean | `false` | +| swipe-duration | 惯性滚动时长 | number \| string | `1000` | +| visible-option-num | 可见的选项个数 | number \| string | `7` | +| option-height | 选项高度 | number \| string | `36` | +| show-toolbar | 是否显示顶部导航 | boolean | `true` | ### Events diff --git a/src/packages/__VUE/picker/doc.taro.md b/src/packages/__VUE/picker/doc.taro.md index b080f0d0c0..a4c03abb71 100644 --- a/src/packages/__VUE/picker/doc.taro.md +++ b/src/packages/__VUE/picker/doc.taro.md @@ -4,11 +4,9 @@ 提供多个选项集合供用户选择其中一项，通常与弹出层组件配合使用。 -> Picker 组件暂时只支持微信小程序、H5，暂不支持支付宝小程序、钉钉小程序、百度小程序等 - ### 安装 -```javascript +```js import { createApp } from 'vue'; import { Picker } from '@nutui/nutui-taro'; @@ -20,35 +18,24 @@ app.use(Picker); :::demo -```html +```vue - ``` @@ -60,362 +47,294 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。 :::demo -```html +```vue - ``` ::: -### 自定义字段名 +### 默认选中项 -可以使用 `fieldNames` 属性自定义`columns`中数据的格式。 +通过设置 `v-model` 实现默认选中项，`v-model` 是一个包含每项配置 value 值的数组。 :::demo -```html +```vue - ``` ::: -### 默认选中项 +### 3D 展示 -通过设置 `modelValue` 实现默认选中项，`modelValue` 是一个包含每项配置 value 值的数组。 +属性 `three-dimensional` 可用于开启 3D 滚动效果。开启后可能会影响性能。 :::demo -```html +```vue - ``` ::: -### 平铺展示 +### 多列展示 -属性 `threeDimensional` 可关闭 3D 滚动效果。 +`columns` 属性可以通过二维数组的形式配置多列选择。 :::demo -```html +```vue - ``` ::: -### 多列展示 +### 多级联动 -`columns` 属性可以通过二维数组的形式配置多列选择。 +使用 `columns` 属性的 `children` 字段可以实现选项级联的效果。 :::demo -```html +```vue - ``` ::: -### 多级联动 +### 异步获取 -使用 `columns` 属性的 `children` 字段可以实现选项级联的效果。 +在实际开发中，大部分情况 `Columns` 属性的数据是通过异步方式获取的。 :::demo -```html +```vue ``` ::: -### 异步获取 +### 自定义字段名 v4.1.4 -在实际开发中，大部分情况 `Columns` 属性的数据是通过异步方式获取的。 +可以使用 `field-names` 属性自定义 `columns` 中数据的格式。 :::demo -```html +```vue - ``` @@ -425,19 +344,19 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。 ### Props -| 参数 | 说明 | 类型 | 默认值 | -| ------------------ | ------------------------------ | ---------------------------------- | -------------------------------------------------------- | -| v-model:value | 默认选中项 | Array | `[]` | -| columns | 对象数组，配置每一列显示的数据 | PickerOption[] \| PickerOption[][] | - | -| field-names | 自定义 columns 中的字段 | object | `{ text: 'text', value: 'value', children: 'children' }` | -| title | 设置标题 | string | - | -| cancel-text | 取消按钮文案 | string | `取消` | -| ok-text | 确定按钮文案 | string | `确定` | -| three-dimensional | 是否开启 3D 效果 | boolean | `true` | -| swipe-duration | 惯性滚动时长 | number \| string | `1000` | -| visible-option-num | 可见的选项个数 | number \| string | `7` | -| option-height | 选项高度 | number \| string | `36` | -| show-toolbar | 是否显示顶部导航 | boolean | `true` | +| 参数 | 说明 | 类型 | 默认值 | +| ------------------- | ------------------------------ | ---------------------------------- | -------------------------------------------------------- | +| v-model:value | 默认选中项 | Array | `[]` | +| columns | 对象数组，配置每一列显示的数据 | PickerOption[] \| PickerOption[][] | - | +| field-names`v4.1.4` | 自定义 columns 中的字段 | object | `{ text: 'text', value: 'value', children: 'children' }` | +| title | 设置标题 | string | - | +| cancel-text | 取消按钮文案 | string | `取消` | +| ok-text | 确定按钮文案 | string | `确定` | +| three-dimensional | 是否开启 3D 效果 | boolean | `false` | +| swipe-duration | 惯性滚动时长 | number \| string | `1000` | +| visible-option-num | 可见的选项个数 | number \| string | `7` | +| option-height | 选项高度 | number \| string | `36` | +| show-toolbar | 是否显示顶部导航 | boolean | `true` | ### Events diff --git a/src/packages/__VUE/picker/index.taro.vue b/src/packages/__VUE/picker/index.taro.vue index dba9a86619..5c29958c71 100644 --- a/src/packages/__VUE/picker/index.taro.vue +++ b/src/packages/__VUE/picker/index.taro.vue @@ -1,11 +1,11 @@