From 588d2a40e7d1ae53ddb8bda9ddeb1ce0ffd983e1 Mon Sep 17 00:00:00 2001 From: QiuShuiBai <1125097005@qq.com> Date: Wed, 16 Oct 2024 14:43:03 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20picker=20=E5=A2=9E=E5=8A=A0=20fullyStop?= =?UTF-8?q?=20=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/pages/picker-modal/basic-picker.mpx | 3 +- .../src/common/mixins/picker-popup/index.ts | 41 ++++++++++++++++++- .../components/cascade-picker-modal/index.mpx | 4 +- .../components/cascade-picker-popup/index.mpx | 4 +- .../src/components/cascade-picker/index.mpx | 4 +- .../components/date-picker-popup/index.mpx | 4 +- .../src/components/date-picker/index.mpx | 4 +- .../src/components/picker-modal/index.mpx | 6 +-- .../src/components/picker-popup/index.mpx | 4 +- .../src/components/picker/index.mpx | 4 +- .../components/time-picker-popup/index.mpx | 4 +- .../src/components/time-picker/index.mpx | 4 +- 12 files changed, 63 insertions(+), 23 deletions(-) diff --git a/example/pages/picker-modal/basic-picker.mpx b/example/pages/picker-modal/basic-picker.mpx index 49c1008..8f54e93 100644 --- a/example/pages/picker-modal/basic-picker.mpx +++ b/example/pages/picker-modal/basic-picker.mpx @@ -7,6 +7,7 @@ content="content 内容" list="{{ dataList }}" selected-index="{{ selectedIndex }}" + fully-stop="{{ true }}" bindchange="onChange" bindcolumnChange="onColumnChange" bindtoggle="onToggle" @@ -49,7 +50,7 @@ createComponent({ data: { selectedIndex: [0, 1, 0], dataList: [ - [ { text: '剧毒', value: '剧毒' }, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' } ], + [ { text: '剧毒', value: '剧毒' }, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' }, { text: '剧毒1', value: '剧毒1' }, { text: '蚂蚁1', value: '蚂蚁1' }, { text: '幽鬼1', value: '幽鬼1' }, { text: '剧毒2', value: '剧毒2' }, { text: '蚂蚁2', value: '蚂蚁2' }, { text: '幽鬼2', value: '幽鬼2' } ], [ { text: '输出', value: '输出' }, { text: '控制', value: '控制' }, { text: '核心', value: '核心' } ], [ { text: '梅肯', value: '梅肯' }, { text: '假腿', value: '假腿' }, { text: '飞鞋', value: '飞鞋' } ] ], diff --git a/packages/mpx-cube-ui/src/common/mixins/picker-popup/index.ts b/packages/mpx-cube-ui/src/common/mixins/picker-popup/index.ts index eff008b..03c0001 100644 --- a/packages/mpx-cube-ui/src/common/mixins/picker-popup/index.ts +++ b/packages/mpx-cube-ui/src/common/mixins/picker-popup/index.ts @@ -5,9 +5,41 @@ const EVENT_VALUE_CHANGE = 'valueChange' const EVENT_CANCEL = 'cancel' const EVENT_CHANGE = 'change' const EVENT_COLUMN_CHANGE = 'columnChange' - +const EVENT_PICK_START = 'pickstart' +const EVENT_PICK_END = 'pickend' export default getMixin({ + properties: { + // 点击确认时，是否需要滚动选项完全停止 + fullyStop: { + type: Boolean, + value: false + } + }, + data: { + pickStartCount: 0 + }, methods: { + // 不能通过 pickstart 及 pickend 来判断 + // web 单独点击时，不触发 pickstart 事件，只派发 change 和 pickend 事件 + // 小程序点击当前选中值时，派发 pickstart，但不派发 pickend 事件 + // 这令人头大的差异 ！！ + onPickstart(e) { + if (this.fullyStop) { + if (this.pickStartCount < 0) { + this.pickStartCount = 0 + } + this.pickStartCount++ + } + // 当滚动选择开始时候触发事件 + this.triggerEvent(EVENT_PICK_START, e.detail) + }, + onPickend(e) { + if (this.fullyStop) { + this.pickStartCount-- + } + // 当滚动选择结束时候触发事件 + this.triggerEvent(EVENT_PICK_END, e.detail) + }, onColumnChange(e) { // 列变化事件，某列选中的 value 及 index 任意一个变化后触发事件 // @arg event.detail = { column, index, text, value } @@ -29,6 +61,13 @@ export default getMixin({ this.triggerEvent(EVENT_CHANGE, e.detail) }, onConfirm() { + if (this.fullyStop) { + if (this.pickStartCount > 0) { + return + } + this.pickStartCount = 0 + } + this.hide() const { selectedIndex, selectedVal, diff --git a/packages/mpx-cube-ui/src/components/cascade-picker-modal/index.mpx b/packages/mpx-cube-ui/src/components/cascade-picker-modal/index.mpx index 1efdcde..f0ff4b5 100644 --- a/packages/mpx-cube-ui/src/components/cascade-picker-modal/index.mpx +++ b/packages/mpx-cube-ui/src/components/cascade-picker-modal/index.mpx @@ -30,8 +30,8 @@ theme-type="{{ themeType }}" bind:change="onChange" bind:columnChange="onColumnChange" - bind:pickstart@wx="onPickstart" - bind:pickend@wx="onPickend" + bind:pickstart="onPickstart" + bind:pickend="onPickend" bind:pendingChange="onPendingChange" /> diff --git a/packages/mpx-cube-ui/src/components/cascade-picker-popup/index.mpx b/packages/mpx-cube-ui/src/components/cascade-picker-popup/index.mpx index d76b76e..579a299 100644 --- a/packages/mpx-cube-ui/src/components/cascade-picker-popup/index.mpx +++ b/packages/mpx-cube-ui/src/components/cascade-picker-popup/index.mpx @@ -24,8 +24,8 @@ theme-type="{{ themeType }}" bind:change="onChange" bind:columnChange="onColumnChange" - bind:pickstart@wx="onPickstart" - bind:pickend@wx="onPickend" + bind:pickstart="onPickstart" + bind:pickend="onPickend" bind:pendingChange="onPendingChange" /> diff --git a/packages/mpx-cube-ui/src/components/cascade-picker/index.mpx b/packages/mpx-cube-ui/src/components/cascade-picker/index.mpx index 5396e9f..3d96836 100644 --- a/packages/mpx-cube-ui/src/components/cascade-picker/index.mpx +++ b/packages/mpx-cube-ui/src/components/cascade-picker/index.mpx @@ -7,8 +7,8 @@ immediate-change="{{ immediateChange }}" theme-type="{{ themeType }}" bind:columnChange="onColumnChange" - bind:pickstart@wx="onPickstart" - bind:pickend@wx="onPickend" + bind:pickstart="onPickstart" + bind:pickend="onPickend" /> diff --git a/packages/mpx-cube-ui/src/components/date-picker-popup/index.mpx b/packages/mpx-cube-ui/src/components/date-picker-popup/index.mpx index 99d571e..0f18c90 100644 --- a/packages/mpx-cube-ui/src/components/date-picker-popup/index.mpx +++ b/packages/mpx-cube-ui/src/components/date-picker-popup/index.mpx @@ -27,8 +27,8 @@ theme-type="{{ themeType }}" bind:columnChange="onColumnChange" bind:change="onChange" - bind:pickstart@wx="onPickstart" - bind:pickend@wx="onPickend" + bind:pickstart="onPickstart" + bind:pickend="onPickend" /> diff --git a/packages/mpx-cube-ui/src/components/date-picker/index.mpx b/packages/mpx-cube-ui/src/components/date-picker/index.mpx index 90076fc..3b4927f 100644 --- a/packages/mpx-cube-ui/src/components/date-picker/index.mpx +++ b/packages/mpx-cube-ui/src/components/date-picker/index.mpx @@ -7,8 +7,8 @@ immediate-change="{{ immediateChange }}" theme-type="{{ themeType }}" bind:columnChange="onColumnChange" - bind:pickstart@wx="onPickstart" - bind:pickend@wx="onPickend" + bind:pickstart="onPickstart" + bind:pickend="onPickend" /> diff --git a/packages/mpx-cube-ui/src/components/picker-modal/index.mpx b/packages/mpx-cube-ui/src/components/picker-modal/index.mpx index 5001531..092efee 100644 --- a/packages/mpx-cube-ui/src/components/picker-modal/index.mpx +++ b/packages/mpx-cube-ui/src/components/picker-modal/index.mpx @@ -13,7 +13,7 @@ cancel-text="{{ cancelText }}" cancel-btn-align="{{ cancelBtnAlign }}" no-built-in-btns="{{ noBuiltInBtns }}" - hide-on-confirm="{{ hideOnConfirm }}" + hide-on-confirm="{{ hideOnConfirm && !fullyStop }}" hide-on-cancel="{{ hideOnCancel }}" hide-on-close="{{ hideOnClose }}" theme-type="{{ themeType }}" @@ -33,8 +33,8 @@ theme-type="{{ themeType }}" bind:change="onChange" bind:columnChange="onColumnChange" - bind:pickstart@wx="onPickstart" - bind:pickend@wx="onPickend" + bind:pickstart="onPickstart" + bind:pickend="onPickend" /> diff --git a/packages/mpx-cube-ui/src/components/picker-popup/index.mpx b/packages/mpx-cube-ui/src/components/picker-popup/index.mpx index e10e99a..762f6f2 100644 --- a/packages/mpx-cube-ui/src/components/picker-popup/index.mpx +++ b/packages/mpx-cube-ui/src/components/picker-popup/index.mpx @@ -22,8 +22,8 @@ theme-type="{{ themeType }}" bind:change="onChange" bind:columnChange="onColumnChange" - bind:pickstart@wx="onPickstart" - bind:pickend@wx="onPickend" + bind:pickstart="onPickstart" + bind:pickend="onPickend" /> diff --git a/packages/mpx-cube-ui/src/components/picker/index.mpx b/packages/mpx-cube-ui/src/components/picker/index.mpx index 2ee9328..e44d408 100644 --- a/packages/mpx-cube-ui/src/components/picker/index.mpx +++ b/packages/mpx-cube-ui/src/components/picker/index.mpx @@ -8,8 +8,8 @@ immediate-change="{{ immediateChange }}" value="{{ finalIndex }}" bind:change="onPickchange" - bind:pickstart@wx="onPickstart" - bind:pickend@wx="onPickend"> + bind:pickstart="onPickstart" + bind:pickend="onPickend"> diff --git a/packages/mpx-cube-ui/src/components/time-picker/index.mpx b/packages/mpx-cube-ui/src/components/time-picker/index.mpx index 35e942e..40769d6 100644 --- a/packages/mpx-cube-ui/src/components/time-picker/index.mpx +++ b/packages/mpx-cube-ui/src/components/time-picker/index.mpx @@ -8,8 +8,8 @@ theme-type="{{ themeType }}" bind:change="onChange" bind:columnChange="onColumnChange" - bind:pickstart@wx="onPickstart" - bind:pickend@wx="onPickend" + bind:pickstart="onPickstart" + bind:pickend="onPickend" />