fix(ui/picker): 优化picker api

affects: @varlet/ui
varletjs · Feb 3, 2021 · 42ee8bf · 42ee8bf
1 parent 6c12f71
commit 42ee8bf
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 30 deletions.
diff --git a/packages/varlet-ui/src/picker/Picker.vue b/packages/varlet-ui/src/picker/Picker.vue
@@ -1,15 +1,22 @@
 <template>
   <component
-    position="bottom"
     :is="dynamic ? 'var-popup' : Transition"
-    :close-on-click-overlay="closeOnClickOverlay"
-    :teleport="teleport"
-    v-model:show="pickerShow"
-    @opened="onOpened"
-    @close="onClose"
-    @closed="onClosed"
-    @click-overlay="onClickOverlay"
-    @route-change="onRouteChange"
+    v-bind="
+      dynamic
+        ? {
+            onOpened,
+            onClose,
+            onClosed,
+            onClickOverlay,
+            onRouteChange,
+            closeOnClickOverlay,
+            teleport,
+            show,
+            'onUpdate:show': (value) => $props['onUpdate:show'] && $props['onUpdate:show'](value),
+            position: 'bottom',
+          }
+        : null
+    "
   >
     <div class="var-picker" v-bind="$attrs">
       <div class="var-picker__toolbar">
@@ -18,8 +25,8 @@
             {{ cancelButtonText }}
           </var-button>
         </slot>
-        <slot name="var-picker__title">
-          <div class="title">{{ title }}</div>
+        <slot name="title">
+          <div class="var-picker__title">{{ title }}</div>
         </slot>
         <slot name="confirm">
           <var-button class="var-picker__confirm-button" plain :text-color="confirmButtonColor" @click="confirm">
@@ -102,11 +109,10 @@ export default defineComponent({
   inheritAttrs: false,
   props,
   setup(props) {
-    const pickerShow: Ref<boolean> = ref(false)
     const scrollerEls: Ref<HTMLElement[]> = ref([])
     const scrollColumns: Ref<ScrollColumn[]> = ref([])
     const center: ComputedRef<number> = computed(
-      () => (props.optionCount * props.optionHeight) / 2 - props.optionCount / 2
+      () => (props.optionCount * props.optionHeight) / 2 - props.optionHeight / 2
     )
     const columnHeight: ComputedRef<number> = computed(() => props.optionCount * props.optionHeight)
     let prevIndexes: number[] = []
@@ -322,21 +328,12 @@ export default defineComponent({
       { immediate: true }
     )
 
-    watch(
-      () => props.show,
-      (newValue) => {
-        pickerShow.value = newValue
-      },
-      { immediate: true }
-    )
-
     return {
       scrollColumns,
       columnHeight,
       center,
       scrollerEls,
       Transition,
-      pickerShow,
       handleTouchstart,
       handleTouchmove,
       handleTouchend,

diff --git a/packages/varlet-ui/src/picker/example/index.vue b/packages/varlet-ui/src/picker/example/index.vue
@@ -1,8 +1,7 @@
 <template>
   <div class="example">
-    <!--    <var-picker :columns="cascadeColumns" cascade @change="log" @confirm="log" @cancel="log" />-->
-    <!--    <var-picker style="margin-top: 20px" :columns="columns" @change="log" @confirm="log" @cancel="log" />-->
-
+    <var-picker :columns="cascadeColumns" cascade @change="log" @confirm="log" @cancel="log" />
+    <var-picker style="margin-top: 20px" :columns="columns" @change="log" @confirm="log" @cancel="log" />
     <var-button @click="picker">弹出</var-button>
   </div>
 </template>
@@ -70,11 +69,17 @@ export default defineComponent({
         console.log(indexes)
       },
       async picker() {
-        const { state, texts, indexes } = await Picker([
+        const columns = [
           Array.from({ length: 20 }).map((_, index) => index),
           Array.from({ length: 20 }).map((_, index) => index),
           Array.from({ length: 20 }).map((_, index) => index),
-        ])
+        ]
+        const { state, texts, indexes } = await Picker({
+          columns,
+          onChange(texts, indexes) {
+            console.log(texts, indexes)
+          },
+        })
         console.log(state, texts, indexes)
       },
     }

diff --git a/packages/varlet-ui/src/picker/index.ts b/packages/varlet-ui/src/picker/index.ts
@@ -19,9 +19,7 @@ interface PickerOptions {
   cancelButtonColor?: string
   dynamic?: boolean
   onChange?: (texts: any[], indexes: number[]) => void
-  onConfirm?: (texts: any[], indexes: number[]) => void
-  onCancel?: (texts: any[], indexes: number[]) => void
-  onClose?: () => void
+  onClosed?: () => void
 }
 
 type PickerResolvedState = 'confirm' | 'cancel' | 'close'
@@ -64,6 +62,7 @@ function Picker(options: PickerOptions | any[]): Promise<PickerResolvedData> {
         unmountInstance()
       },
       onClosed: () => {
+        reactivePickerOptions.onClosed?.()
         unmountInstance()
       },
       'onUpdate:show': (value: boolean) => {

diff --git a/packages/varlet-ui/src/picker/picker.less b/packages/varlet-ui/src/picker/picker.less
@@ -5,6 +5,8 @@
 @picker-confirm-button-color: @color-primary;
 @picker-cancel-button-color: #888;
 @picker-picked-border: 1px solid #eee;
+@picker-title-font-size: 16px;
+@picker-toolbar-padding: 0 4px;
 @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));
 
@@ -63,6 +65,7 @@
     align-items: center;
     width: 100%;
     height: @picker-toolbar-height;
+    padding: @picker-toolbar-padding;
   }
 
   &__confirm-button {
@@ -72,4 +75,8 @@
   &__cancel-button {
     color: @picker-cancel-button-color;
   }
+
+  &__title {
+    font-size: @picker-title-font-size;
+  }
 }
diff --git a/packages/varlet-ui/src/picker/props.ts b/packages/varlet-ui/src/picker/props.ts
@@ -19,6 +19,7 @@ export const props = {
   },
   title: {
     type: String,
+    default: '请选择',
   },
   textKey: {
     type: String,
@@ -69,6 +70,7 @@ export const props = {
   },
   ...pickProps(popupProps, [
     'show',
+    'onUpdate:show',
     'closeOnClickOverlay',
     'teleport',
     'onClose',