fix(ui/picker): 级连模式完成

affects: @varlet/ui
varletjs · Feb 2, 2021 · dcd55b9 · dcd55b9
1 parent 10f27b7
commit dcd55b9
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 26 deletions.
diff --git a/packages/varlet-ui/src/picker/Picker.vue b/packages/varlet-ui/src/picker/Picker.vue
@@ -38,19 +38,20 @@
 
 <script lang="ts">
 import { defineComponent, watch, ref, Ref, computed, ComputedRef } from 'vue'
-import { NormalColumn, props } from './props'
+import { CascadeColumn, NormalColumn, props } from './props'
+import { isArray } from '../utils/shared'
 
 interface ScrollColumn {
   touching: boolean
   index: number
-  scrollIndex: number
   fromIndex: number
   prevY: number | undefined
   momentumPrevY: number | undefined
   momentumTime: number
   translate: number
   duration: number
   column: NormalColumn
+  columns?: CascadeColumn[]
 }
 
 const MOMENTUM_RECORD_TIME = 300
@@ -103,8 +104,13 @@ export default defineComponent({
 
     const scrollTo = (scrollColumn: ScrollColumn, index: number, duration: number) => {
       const { optionHeight } = props
+      const translate = center.value - boundaryIndex(scrollColumn, index) * optionHeight
 
-      scrollColumn.translate = center.value - boundaryIndex(scrollColumn, index) * optionHeight
+      if (translate === scrollColumn.translate) {
+        change(scrollColumn)
+      }
+
+      scrollColumn.translate = translate
       scrollColumn.duration = duration
     }
 
@@ -147,44 +153,85 @@ export default defineComponent({
 
         shouldMomentum && momentum(scrollColumn, distance, duration)
 
-        scrollColumn.scrollIndex = getIndex(scrollColumn)
-        scrollTo(scrollColumn, scrollColumn.scrollIndex, shouldMomentum ? 1000 : 200)
+        scrollColumn.index = getIndex(scrollColumn)
+        scrollTo(scrollColumn, scrollColumn.index, shouldMomentum ? 1000 : 200)
       })
     }
 
     const handleTransitionend = (scrollColumn: ScrollColumn) => {
-      scrollColumn.index = scrollColumn.scrollIndex
       change(scrollColumn)
     }
 
+    const normalizeNormalColumns = (normalColumns: NormalColumn[]) => {
+      return normalColumns.map((normalColumn) => {
+        const scrollColumn: ScrollColumn = {
+          prevY: undefined,
+          momentumPrevY: undefined,
+          touching: false,
+          translate: center.value,
+          index: normalColumn.initialIndex ?? 0,
+          fromIndex: normalColumn.initialIndex ?? 0,
+          duration: 0,
+          momentumTime: 0,
+          column: normalColumn,
+        }
+        scrollTo(scrollColumn, scrollColumn.index, 200)
+        return scrollColumn
+      })
+    }
+
+    const normalizeCascadeColumns = (cascadeColumns: CascadeColumn[]) => {
+      const scrollColumns = []
+
+      createChildren(scrollColumns, cascadeColumns)
+
+      return scrollColumns
+    }
+
+    const createChildren = (scrollColumns: ScrollColumn[], children: CascadeColumn[]) => {
+      if (isArray(children) && children.length) {
+        const scrollColumn: ScrollColumn = {
+          prevY: undefined,
+          momentumPrevY: undefined,
+          touching: false,
+          translate: center.value,
+          index: 0,
+          fromIndex: 0,
+          duration: 0,
+          momentumTime: 0,
+          column: {
+            texts: children.map((cascadeColumn) => cascadeColumn[props.textKey]),
+          },
+          columns: children,
+        }
+
+        scrollColumns.push(scrollColumn)
+        createChildren(scrollColumns, scrollColumn.columns[scrollColumn.index].children)
+      }
+    }
+
     const change = (scrollColumn: ScrollColumn) => {
       if (scrollColumn.fromIndex === scrollColumn.index) {
         return
       }
       scrollColumn.fromIndex = scrollColumn.index
 
-      console.log(scrollColumn.index)
+      if (props.cascade) {
+        scrollColumns.value.splice(scrollColumns.value.indexOf(scrollColumn) + 1)
+        createChildren(scrollColumns.value, scrollColumn.columns[scrollColumn.index].children)
+      }
+
+      const texts = scrollColumns.value.map((scrollColumn) => scrollColumn.column.texts[scrollColumn.index])
+      const indexes = scrollColumns.value.map((scrollColumn) => scrollColumn.index)
+      props.onChange?.(texts, indexes)
     }
 
     watch(
       () => props.columns,
       (newValue: any) => {
-        scrollColumns.value = newValue.map((column: NormalColumn) => {
-          const scrollColumn: ScrollColumn = {
-            prevY: undefined,
-            momentumPrevY: undefined,
-            touching: false,
-            translate: center.value,
-            index: column.initialIndex ?? 0,
-            scrollIndex: column.initialIndex ?? 0,
-            fromIndex: column.initialIndex ?? -1,
-            duration: 0,
-            momentumTime: 0,
-            column,
-          }
-          scrollTo(scrollColumn, scrollColumn.scrollIndex, 200)
-          return scrollColumn
-        })
+        scrollColumns.value = props.cascade
+          ? normalizeCascadeColumns(newValue as CascadeColumn[])
+          : normalizeNormalColumns(newValue as NormalColumn[])
       },
       { immediate: true }
     )

diff --git a/packages/varlet-ui/src/picker/example/index.vue b/packages/varlet-ui/src/picker/example/index.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="example">
-    <var-picker :columns="columns" />
+    <var-picker :columns="cascadeColumns" cascade @change="log" />
+    <var-picker style="margin-top: 20px" :columns="columns" @change="log" />
   </div>
 </template>
 
@@ -29,6 +30,42 @@ export default defineComponent({
           initialIndex: 2,
         },
       ]),
+      cascadeColumns: [
+        {
+          text: '四川省',
+          children: [
+            {
+              text: '成都市',
+              children: [
+                {
+                  text: '温江区',
+                },
+              ],
+            },
+            {
+              text: '乐山市',
+              children: [],
+            },
+          ],
+        },
+        {
+          text: '江苏省',
+          children: [
+            {
+              text: '无锡市',
+              children: [],
+            },
+            {
+              text: '常州市',
+              children: [],
+            },
+          ],
+        },
+      ],
+      log(texts, indexes) {
+        console.log(texts)
+        console.log(indexes)
+      },
     }
   },
 })

diff --git a/packages/varlet-ui/src/picker/picker.less b/packages/varlet-ui/src/picker/picker.less
@@ -1,5 +1,7 @@
 @picker-background: #fff;
 @picker-picked-border: 1px solid #eee;
+@picker-mask-background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4)),
+  linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));
 
 .var-picker {
   width: 100%;
@@ -45,8 +47,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4)),
-      linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));
+    background-image: @picker-mask-background-image;
     background-repeat: no-repeat;
     background-position: top, bottom;
   }

diff --git a/packages/varlet-ui/src/picker/props.ts b/packages/varlet-ui/src/picker/props.ts
@@ -26,6 +26,10 @@ export const props = {
     type: Boolean,
     default: true,
   },
+  cascade: {
+    type: Boolean,
+    default: false,
+  },
   optionHeight: {
     type: Number,
     default: 44,
@@ -42,4 +46,13 @@ export const props = {
     type: String,
     default: '取消',
   },
+  onChange: {
+    type: Function,
+  },
+  onConfirm: {
+    type: Function,
+  },
+  onCancel: {
+    type: Function,
+  },
 }