fix: picker 增加 fullyStop 属性

didi · Oct 16, 2024 · 588d2a4 · 588d2a4
1 parent 8421be8
commit 588d2a4
Show file tree

Hide file tree

Showing 12 changed files with 63 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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"
     />
   </cube-picker-popup-base>

diff --git 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"
   />
 </template>
 

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
@@ -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"
     />
   </cube-picker-popup-base>
 </template>

diff --git 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"
   />
 </template>
 

diff --git 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"
     />
     <!-- 尾部位置插槽 -->
     <slot name="footer" slot="footer" />

diff --git 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"
     />
   </cube-picker-popup-base>
 </template>

diff --git 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">
       <picker-view-column
         class="cube-picker-wheel-scroll"
         ref="pickerColumns"

diff --git a/packages/mpx-cube-ui/src/components/time-picker-popup/index.mpx b/packages/mpx-cube-ui/src/components/time-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"
     />
   </cube-picker-popup-base>
 </template>

diff --git 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"
   />
 </template>