feat: picker多列

src/sites/mobile-taro/vue/src/pages/picker/demo.vue

@@ -8,14 +8,14 @@
     <nut-picker mode="multiSelector" :list-data="listData2" @confirm="confirm2">
       <nut-cell title="请选择时间" :desc="desc2"></nut-cell>
     </nut-picker>
-    <h2>多级联动</h2>
+    <!-- <h2>多级联动</h2>
     <nut-picker :list-data="listData3" @confirm="confirm3">
       <nut-cell title="请选择地址" :desc="desc3"></nut-cell>
-    </nut-picker>
+    </nut-picker> -->
   </div>
 </template>
 <script lang="ts">
-import { toRefs, ref } from 'vue';
+import { ref } from 'vue';
 import { createComponent } from './../../../../../../packages/utils/create';
 import Picker from './index.taro.vue';
 import Cell from './../cell/index.taro.vue';
@@ -36,82 +36,41 @@ export default createDemo({
       '浙江市',
       '江苏市'
     ];
-    const listData2 = [
+    const listData2 = ref([
       {
         values: ['周一', '周二', '周三', '周四', '周五'],
         defaultIndex: 2
       },
-      // 第二列
       {
         values: ['上午', '下午', '晚上'],
         defaultIndex: 1
       }
-    ];
-    const listData3 = [
-      {
-        text: '浙江',
-        children: [
-          {
-            text: '杭州',
-            children: [{ text: '西湖区' }, { text: '余杭区' }]
-          },
-          {
-            text: '温州',
-            children: [{ text: '鹿城区' }, { text: '瓯海区' }]
-          }
-        ]
-      },
-      {
-        text: '福建',
-        children: [
-          {
-            text: '福州',
-            children: [{ text: '鼓楼区' }, { text: '台江区' }]
-          },
-          {
-            text: '厦门',
-            children: [{ text: '思明区' }, { text: '海沧区' }]
-          }
-        ]
-      }
-    ];
-    const show = ref(false);
-    const show2 = ref(false);
-    const show3 = ref(false);
-    const showList = [show, show2, show3];
+    ]);
+
     const desc = ref(listData1[0]);
     const desc2 = ref(
-      `${listData2[0].values[listData2[0].defaultIndex]} ${
-        listData2[1].values[listData2[1].defaultIndex]
+      `${listData2.value[0].values[listData2.value[0].defaultIndex]} ${
+        listData2.value[1].values[listData2.value[1].defaultIndex]
       }`
     );
-    const desc3 = ref(
-      `${listData3[0].text}
-      ${listData3[0].children[0].text}
-      ${listData3[0].children[0].children[0].text}`
-    );
+    const confirm = (value: any, res: any) => {
+      desc.value = res;
+    };
+
+    const confirm2 = (value: any, res: any) => {
+      desc2.value = res.join(' ');
+      listData2.value.forEach((item, idx) => {
+        item.defaultIndex = value[idx];
+      });
+    };
+
     return {
       listData1,
       listData2,
-      listData3,
-      show,
-      show2,
-      show3,
       desc,
       desc2,
-      desc3,
-      open: (index: number) => {
-        showList[index - 1].value = true;
-      },
-      confirm: (res: any) => {
-        desc.value = res;
-      },
-      confirm2: (res: any) => {
-        desc2.value = res.join(' ');
-      },
-      confirm3: (res: any) => {
-        desc3.value = res.join(' ');
-      }
+      confirm,
+      confirm2
     };
   }
 });

src/sites/mobile-taro/vue/src/pages/picker/index.taro.vue

 <template>
   <picker
     :mode="mode"
-    :range="computedData"
+    :range="range"
     @change="onChange"
     @columnChange="onColumnChange"
     :value="value"
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import { toRefs, onMounted, reactive, computed, CSSProperties, ref } from 'vue';
+import { onUpdated, ref, watch } from 'vue';
 const { create } = createComponent('picker');
 import { commonProps } from '../../../../../../packages/__VUE/picker/commonProps';
 import { createComponent } from './../../../../../../packages/utils/create';
@@ -26,47 +26,61 @@ export default create({
   emits: ['confirm'],
   setup(props, { emit }) {
     let value = ref<any>([]);
+    let range = ref<any>([]);
+
+    onUpdated(() => {
+      console.log('updated', props.listData);
+    });
 
     const onChange = (e: any) => {
       let ret;
+
       if (props.mode === 'selector') {
         ret = props.listData[e.detail.value];
       } else if (props.mode === 'multiSelector') {
-        ret = computedData.value?.map(
-          (item: any, idx) => item[e.detail.value[idx]]
-        );
+        ret = range.value
+          ?.map((item: any, idx: number) => item[e.detail.value[idx]])
+          .filter((res: any) => res);
       }
-      emit('confirm', ret);
+      console.log(e.detail.value, ret);
+
+      emit('confirm', e.detail.value, ret);
     };
 
-    const computedData = computed(() => {
-      if (props.mode === 'selector') {
-        return props.listData;
-      } else if (props.mode === 'multiSelector') {
+    watch(
+      props.listData,
+      (val: any) => {
+        console.log('change');
+
         try {
-          if (props.listData.length) {
-            const range: object[] = []; // 构造range
-            props.listData.forEach((item: any, idx: number) => {
-              value.value.push(item.defaultIndex);
-              range.push(item.values);
-            });
-            return range;
+          if (val.length) {
+            value.value = [];
+            range.value = [];
+            if (props.mode === 'selector') {
+              range.value = props.listData;
+            } else if (props.mode === 'multiSelector') {
+              val.forEach((item: any) => {
+                value.value.push(item.defaultIndex);
+                range.value.push(item.values);
+              });
+            }
           }
         } catch (error) {
           console.log('listData参数格式错误', error);
         }
-      }
-    });
+      },
+      { immediate: true, deep: true }
+    );
 
-    const onColumnChange = e => {
+    const onColumnChange = (e: any) => {
       console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
     };
 
     return {
       confirm,
       onChange,
-      computedData,
       value,
+      range,
       onColumnChange
     };
   }