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

feat: ✨ Pickerview选择器新增immediate-change属性，目前微信和支付宝小程序支持。

Browse Source
This commit is contained in:
weisheng 2024-06-09 14:56:06 +08:00
parent 61004d30ed
commit 3428ae1788
20 changed files with 57 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/component/calendar-view.md
View File

@ -236,6 +236,7 @@ function handleChange({ value }) {
| panel-height | 可滚动面板的高度 | number | - | 378 | - |
| time-filter | type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据 | function | - | - | - |
| hide-second | type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改 | boolean | - | false | - |
| immediate-change | type 为 'datetime' 或 'datetimerange' 时有，是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。 | boolean | - | false | $LOWEST_VERSION$ |
## Events

2
docs/component/calendar.md
View File

@ -398,6 +398,8 @@ function handleConfirm4({ value }) {
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | - |
| prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - |
| rules | 表单验证规则，结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - |
| immediate-change | type 为 'datetime' 或 'datetimerange' 时有，是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。 | boolean | - | false | $LOWEST_VERSION$ |
### FormItemRule 数据结构

1
docs/component/datetime-picker-view.md
View File

@ -133,6 +133,7 @@ const filter = (type, values) => {
| maxHour | 最大小时，time类型时生效 | number | - | 23 | - |
| minMinute | 最小分钟，time类型时生效 | number | - | 0 | - |
| maxMinute | 最大分钟，time类型时生效 | number | - | 59 | - |
| immediate-change | 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。 | boolean | - | false | $LOWEST_VERSION$ |
## Events
| 事件名称 | 说明 | 参数 | 最低版本 |

1
docs/component/datetime-picker.md
View File

@ -296,6 +296,7 @@ const displayFormatTabLabel = (items) => {
| ellipsis | 是否超出隐藏 | boolean | - | false | - |
| prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - |
| rules | 表单验证规则，结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - |
| immediate-change | 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。 | boolean | - | false | $LOWEST_VERSION$ |
### FormItemRule 数据结构

4
docs/component/picker-view.md
View File

@ -114,6 +114,10 @@ const onChangeDistrict = (pickerView, value, columnIndex, resolve) => {
| value-key | 选项对象中，value对应的 key | string | - | value | - |
| label-key | 选项对象中，展示的文本对应的 key | string | - | label | - |
| column-change | 接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参，根据选中项和列下标进行判断，通过 pickerView 实例暴露出来的 `setColumnData` 方法修改其他列的数据源。 | function | - | - | - |
| immediate-change | 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。 | boolean | - | false | $LOWEST_VERSION$ |
## Methods

1
docs/component/picker.md
View File

@ -262,6 +262,7 @@ function handleConfirm({ value }) {
| ellipsis | 是否超出隐藏 | boolean | - | false | - |
| prop | 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 | string | - | - | - |
| rules | 表单验证规则，结合`wd-form`组件使用 | `FormItemRule []` | - | `[]` | - |
| immediate-change | 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。 | boolean | - | false | $LOWEST_VERSION$ |
### FormItemRule 数据结构

8
src/pages/pickerView/Index.vue
View File

@ -5,7 +5,11 @@
</demo-block>
<demo-block :title="`禁用选项，数值: ${value2}`">
<wd-picker-view v-model="value2" :immediate-change="true" :columns="columns2" @change="(e) => onChange(2, e)" />
<wd-picker-view v-model="value2" :columns="columns2" @change="(e) => onChange(2, e)" />
</demo-block>
<demo-block :title="`立即触发 change，数值: ${value6}`">
<wd-picker-view v-model="value6" :immediate-change="true" :columns="columns2" @change="(e) => onChange(2, e)" />
</demo-block>
<demo-block :title="`加载中，数值: ${value3}`">
@ -70,6 +74,8 @@ const value1 = ref<string>('选项1')
const columns1 = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'])
const value2 = ref<string>('选项1')
const value6 = ref<string>('选项1')
const columns2 = ref([
{ label: '选项1' },
{ label: '选项2' },

1
src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue
View File

@ -40,6 +40,7 @@
v-model="timeValue"
:columns="timeData"
:columns-height="125"
:immediate-change="immediateChange"
@change="handleTimeChange"
@pickstart="handlePickStart"
@pickend="handlePickEnd"

6
src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/types.ts
View File

@ -27,7 +27,11 @@ export const monthPanelProps = {
panelHeight: makeRequiredProp(Number),
// type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据
timeFilter: Function as PropType<CalendarTimeFilter>,
hideSecond: makeBooleanProp(false)
hideSecond: makeBooleanProp(false),
/**
* 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
*/
immediateChange: makeBooleanProp(false)
}
export type MonthPanelProps = ExtractPropTypes<typeof monthPanelProps>

6
src/uni_modules/wot-design-uni/components/wd-calendar-view/types.ts
View File

@ -61,7 +61,11 @@ export const calendarViewProps = {
/**
* type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改
*/
hideSecond: makeBooleanProp(false)
hideSecond: makeBooleanProp(false),
/**
* 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
*/
immediateChange: makeBooleanProp(false)
}
export type CalendarViewProps = ExtractPropTypes<typeof calendarViewProps>

1
src/uni_modules/wot-design-uni/components/wd-calendar-view/wd-calendar-view.vue
View File

@ -31,6 +31,7 @@
:show-panel-title="showPanelTitle"
:default-time="formatDefauleTime"
:panel-height="panelHeight"
:immediate-change="immediateChange"
:time-filter="timeFilter"
:hide-second="hideSecond"
@change="handleChange"

10
src/uni_modules/wot-design-uni/components/wd-calendar/types.ts
View File

@ -1,10 +1,10 @@
/*
* @Author: weisheng
* @Date: 2024-03-15 20:40:34
* @LastEditTime: 2024-03-18 13:37:40
* @LastEditTime: 2024-06-09 14:38:57
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-calendar\types.ts
* @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-calendar/types.ts
* 记得注释
*/
import type { PropType } from 'vue'
@ -180,7 +180,11 @@ export const calendarProps = {
/**
* value 外部自定义样式
*/
customValueClass: makeStringProp('')
customValueClass: makeStringProp(''),
/**
* 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
*/
immediateChange: makeBooleanProp(false)
}
export type CalendarDisplayFormat = (value: number | number[], type: CalendarType) => string

1
src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
View File

@ -93,6 +93,7 @@
:time-filter="timeFilter"
:hide-second="hideSecond"
:show-panel-title="!range(type)"
:immediate-change="immediateChange"
@change="handleChange"
/>
</view>

4
src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/types.ts
View File

@ -86,6 +86,10 @@ export const datetimePickerViewProps = {
* 最大分钟，time类型时生效
*/
maxMinute: makeNumberProp(59),
/**
* 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
*/
immediateChange: makeBooleanProp(false),
startSymbol: makeBooleanProp(false)
}

3
src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/wd-datetime-picker-view.vue
View File

@ -1,9 +1,10 @@
<template>
<view>
<wd-picker-view
ref="datePickerview"
:custom-class="customClass"
:custom-style="customStyle"
ref="datePickerview"
:immediate-change="immediateChange"
v-model="pickerValue"
:columns="columns"
:columns-height="columnsHeight"

6
src/uni_modules/wot-design-uni/components/wd-datetime-picker/types.ts
View File

@ -166,7 +166,11 @@ export const datetimePickerProps = {
/**
* value 外部自定义样式
*/
customValueClass: makeStringProp('')
customValueClass: makeStringProp(''),
/**
* 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
*/
immediateChange: makeBooleanProp(false)
}
export type DatetimePickerDisplayFormat = (items: Record<string, any>[]) => string

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

@ -102,6 +102,7 @@
:max-minute="maxMinute"
:min-minute="minMinute"
:start-symbol="true"
:immediate-change="immediateChange"
@change="onChangeStart"
@pickstart="onPickStart"
@pickend="onPickEnd"
@ -128,6 +129,7 @@
:max-minute="maxMinute"
:min-minute="minMinute"
:start-symbol="false"
:immediate-change="immediateChange"
@change="onChangeEnd"
@pickstart="onPickStart"
@pickend="onPickEnd"

2
src/uni_modules/wot-design-uni/components/wd-picker-view/types.ts
View File

@ -39,7 +39,7 @@ export const pickerViewProps = {
*/
labelKey: makeStringProp('label'),
/**
* 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
* 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
*/
immediateChange: makeBooleanProp(false),
/**

6
src/uni_modules/wot-design-uni/components/wd-picker/types.ts
View File

@ -143,7 +143,11 @@ export const pickerProps = {
/**
* 表单验证规则，结合wd-form组件使用
*/
rules: makeArrayProp<FormItemRule>()
rules: makeArrayProp<FormItemRule>(),
/**
* 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
*/
immediateChange: makeBooleanProp(false)
}
export type PickerProps = ExtractPropTypes<typeof pickerProps>

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

@ -57,6 +57,7 @@
:columns-height="columnsHeight"
:value-key="valueKey"
:label-key="labelKey"
:immediate-change="immediateChange"
@change="pickerViewChange"
@pickstart="onPickStart"
@pickend="onPickEnd"