refactor(picker, taro): modify to gen better dts (#2720)

jd-opensource · Dec 8, 2023 · 6916314 · 6916314
1 parent db53c39
commit 6916314
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 164 deletions.
diff --git a/src/packages/__VUE/picker/common.ts b/src/packages/__VUE/picker/common.ts
diff --git a/src/packages/__VUE/picker/index.taro.vue b/src/packages/__VUE/picker/index.taro.vue
@@ -42,7 +42,7 @@
     </picker-view>
 
     <!-- Taro 下转换成 H5 -->
-    <view v-if="ENV == ENV_TYPE.WEB" class="nut-picker__column" :style="columnStyle">
+    <view v-else class="nut-picker__column" :style="pickerViewStyles">
       <view v-for="(column, columnIndex) in columnsList" :key="columnIndex" class="nut-picker__columnitem">
         <nut-picker-column
           :ref="swipeRef"
@@ -68,12 +68,119 @@
 </template>
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
-import { componentWeb, componentWeapp } from './common';
 import Taro from '@tarojs/taro';
+import { ref, reactive, computed, CSSProperties, toRefs } from 'vue';
+import { pxCheck } from '@/packages/utils/pxCheck';
+import { usePicker } from './usePicker';
+import NutPickerColumn from './Column.vue';
+import baseProps from './baseProps';
+import { useLocale } from '@/packages/utils/useLocale';
 const { create } = createComponent('picker');
-import { Component } from 'vue';
 
-const component: Component = Taro.getEnv() == Taro.ENV_TYPE.WEB ? componentWeb : componentWeapp;
+const cN = 'NutPicker';
 
-export default create(component);
+export default create({
+  components: {
+    NutPickerColumn
+  },
+  props: baseProps,
+  emits: ['cancel', 'change', 'confirm', 'update:modelValue'],
+  setup(props, { emit }) {
+    const translate = useLocale(cN);
+    const {
+      changeHandler,
+      confirm,
+      defaultValues,
+      defaultIndexes,
+      columnsList,
+      columnsType,
+      columnFieldNames,
+      cancel
+    } = usePicker(props, emit);
+    const state = reactive({
+      show: false,
+      picking: false,
+      ENV: Taro.getEnv(),
+      ENV_TYPE: Taro.ENV_TYPE
+    });
+
+    const pickerColumn = ref<any[]>([]);
+
+    const swipeRef = (el: any) => {
+      if (el && pickerColumn.value.length < columnsList.value.length) {
+        pickerColumn.value.push(el);
+      }
+    };
+
+    const confirmHandler = () => {
+      if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
+        pickerColumn.value.length > 0 &&
+          pickerColumn.value.forEach((column) => {
+            column.stopMomentum();
+          });
+        confirm();
+      } else {
+        if (state.picking) {
+          setTimeout(() => {
+            confirm();
+          }, 0);
+        } else {
+          confirm();
+        }
+      }
+    };
+
+    const pickerViewStyles = computed(() => {
+      const styles: CSSProperties = {};
+      styles.height = `${+props.visibleOptionNum * +props.optionHeight}px`;
+      styles['--lineHeight'] = `${+props.optionHeight}px`;
+      return styles;
+    });
+
+    // 平铺展示时，滚动选择
+    const tileChange = (data: any) => {
+      const prevDefaultValue = defaultIndexes.value;
+      let changeIndex = 0;
+      // 判断变化的是第几个
+      for (let i = 0; i < data.detail.value?.length; i++) {
+        if (prevDefaultValue[i] !== data.detail.value?.[i]) {
+          changeIndex = i;
+          break;
+        }
+      }
+
+      // 选择的是哪个 option
+      changeHandler(changeIndex, columnsList.value[changeIndex][data.detail.value[changeIndex]]);
+    };
+
+    // 开始滚动
+    const handlePickstart = () => {
+      state.picking = true;
+    };
+    // 开始滚动
+    const handlePickend = () => {
+      state.picking = false;
+    };
+
+    return {
+      ...toRefs(state),
+      columnsType,
+      columnsList,
+      columnFieldNames,
+      cancel,
+      changeHandler,
+      confirmHandler,
+      defaultValues,
+      pickerColumn,
+      swipeRef,
+      defaultIndexes,
+      tileChange,
+      handlePickstart,
+      translate,
+      handlePickend,
+      pickerViewStyles,
+      pxCheck
+    };
+  }
+});
 </script>