diff --git a/docs/component/calendar-view.md b/docs/component/calendar-view.md index 442cb254..59fa22e4 100644 --- a/docs/component/calendar-view.md +++ b/docs/component/calendar-view.md @@ -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 diff --git a/docs/component/calendar.md b/docs/component/calendar.md index 29dde050..3bbd51f1 100644 --- a/docs/component/calendar.md +++ b/docs/component/calendar.md @@ -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 数据结构 diff --git a/docs/component/datetime-picker-view.md b/docs/component/datetime-picker-view.md index d7cb6133..764fc88d 100644 --- a/docs/component/datetime-picker-view.md +++ b/docs/component/datetime-picker-view.md @@ -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 | 事件名称 | 说明 | 参数 | 最低版本 | diff --git a/docs/component/datetime-picker.md b/docs/component/datetime-picker.md index 489fcd63..aeaa606e 100644 --- a/docs/component/datetime-picker.md +++ b/docs/component/datetime-picker.md @@ -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 数据结构 diff --git a/docs/component/picker-view.md b/docs/component/picker-view.md index 2e14c4a4..85f3db45 100644 --- a/docs/component/picker-view.md +++ b/docs/component/picker-view.md @@ -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 diff --git a/docs/component/picker.md b/docs/component/picker.md index 3eadc5a8..d26c9b05 100644 --- a/docs/component/picker.md +++ b/docs/component/picker.md @@ -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 数据结构 diff --git a/src/pages/pickerView/Index.vue b/src/pages/pickerView/Index.vue index 8e248cdd..c2f76782 100644 --- a/src/pages/pickerView/Index.vue +++ b/src/pages/pickerView/Index.vue @@ -5,7 +5,11 @@ - + + + + + @@ -70,6 +74,8 @@ const value1 = ref('选项1') const columns1 = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7']) const value2 = ref('选项1') +const value6 = ref('选项1') + const columns2 = ref([ { label: '选项1' }, { label: '选项2' }, diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue b/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue index 156fc40b..629843d3 100644 --- a/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue +++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue @@ -40,6 +40,7 @@ v-model="timeValue" :columns="timeData" :columns-height="125" + :immediate-change="immediateChange" @change="handleTimeChange" @pickstart="handlePickStart" @pickend="handlePickEnd" diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/types.ts b/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/types.ts index 6512f7f6..bd27a852 100644 --- a/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/types.ts +++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/types.ts @@ -27,7 +27,11 @@ export const monthPanelProps = { panelHeight: makeRequiredProp(Number), // type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据 timeFilter: Function as PropType, - hideSecond: makeBooleanProp(false) + hideSecond: makeBooleanProp(false), + /** + * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。 + */ + immediateChange: makeBooleanProp(false) } export type MonthPanelProps = ExtractPropTypes diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/types.ts b/src/uni_modules/wot-design-uni/components/wd-calendar-view/types.ts index ced7b53f..6a900d66 100644 --- a/src/uni_modules/wot-design-uni/components/wd-calendar-view/types.ts +++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/types.ts @@ -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 diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/wd-calendar-view.vue b/src/uni_modules/wot-design-uni/components/wd-calendar-view/wd-calendar-view.vue index 058ef0a7..42512d2d 100644 --- a/src/uni_modules/wot-design-uni/components/wd-calendar-view/wd-calendar-view.vue +++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/wd-calendar-view.vue @@ -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" diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar/types.ts b/src/uni_modules/wot-design-uni/components/wd-calendar/types.ts index bf09b102..6049a51d 100644 --- a/src/uni_modules/wot-design-uni/components/wd-calendar/types.ts +++ b/src/uni_modules/wot-design-uni/components/wd-calendar/types.ts @@ -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 diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue b/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue index 9b3bf376..7686309b 100644 --- a/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue +++ b/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue @@ -93,6 +93,7 @@ :time-filter="timeFilter" :hide-second="hideSecond" :show-panel-title="!range(type)" + :immediate-change="immediateChange" @change="handleChange" /> diff --git a/src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/types.ts b/src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/types.ts index 8b30f799..bac886dc 100644 --- a/src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/types.ts +++ b/src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/types.ts @@ -86,6 +86,10 @@ export const datetimePickerViewProps = { * 最大分钟，time类型时生效 */ maxMinute: makeNumberProp(59), + /** + * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。 + */ + immediateChange: makeBooleanProp(false), startSymbol: makeBooleanProp(false) } diff --git a/src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/wd-datetime-picker-view.vue b/src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/wd-datetime-picker-view.vue index 595bea62..72f29316 100644 --- a/src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/wd-datetime-picker-view.vue +++ b/src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/wd-datetime-picker-view.vue @@ -1,9 +1,10 @@