Merge branch 'taro-vue-test' of https://github.com/jdf2e/nutui into taro-vue-test

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

@@ -1,31 +1,21 @@
 <template>
   <div class="demo">
     <h2>基础用法</h2>
-    <nut-picker :list-data="listData1" @confirm="confirm">
+    <nut-picker mode="selector" :list-data="listData1" @confirm="confirm">
       <nut-cell title="请选择城市" :desc="desc"></nut-cell>
     </nut-picker>
     <h2>多列样式</h2>
-    <nut-cell title="请选择时间" :desc="desc2"></nut-cell>
-    <h2>多级联动</h2>
-    <nut-cell title="请选择地址" :desc="desc3"></nut-cell>
-
-    <!-- <nut-picker
-      v-model:visible="show2"
-      :list-data="listData2"
-      title="多列选择"
-      @confirm="confirm2"
-      @close="close"
-    ></nut-picker>
-    <nut-picker
-      v-model:visible="show3"
-      :list-data="listData3"
-      title="地址选择"
-      @confirm="confirm3"
-    ></nut-picker> -->
+    <nut-picker mode="multiSelector" :list-data="listData2" @confirm="confirm2">
+      <nut-cell title="请选择时间" :desc="desc2"></nut-cell>
+    </nut-picker>
+    <!-- <h2>多级联动</h2>
+    <nut-picker :list-data="listData3" @confirm="confirm3">
+      <nut-cell title="请选择地址" :desc="desc3"></nut-cell>
+    </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';
@@ -46,83 +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 descList = [desc, desc2, desc3];
+    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

@@ -1,26 +1,87 @@
 <template>
-  <picker mode="selector" :range="listData" @change="onChange">
+  <picker
+    :mode="mode"
+    :range="range"
+    @change="onChange"
+    @columnChange="onColumnChange"
+    :value="value"
+  >
     <slot></slot>
   </picker>
 </template>
 
 <script lang="ts">
+import { onUpdated, ref, watch } from 'vue';
 const { create } = createComponent('picker');
 import { commonProps } from '../../../../../../packages/__VUE/picker/commonProps';
 import { createComponent } from './../../../../../../packages/utils/create';
 export default create({
   props: {
+    mode: {
+      type: String,
+      default: 'selector'
+    },
     ...commonProps
   },
   emits: ['confirm'],
   setup(props, { emit }) {
+    let value = ref<any>([]);
+    let range = ref<any>([]);
+
+    onUpdated(() => {
+      console.log('updated', props.listData);
+    });
+
     const onChange = (e: any) => {
-      emit('confirm', props.listData[e.detail.value]);
+      let ret;
+
+      if (props.mode === 'selector') {
+        ret = props.listData[e.detail.value];
+      } else if (props.mode === 'multiSelector') {
+        ret = range.value
+          ?.map((item: any, idx: number) => item[e.detail.value[idx]])
+          .filter((res: any) => res);
+      }
+      console.log(e.detail.value, ret);
+
+      emit('confirm', e.detail.value, ret);
+    };
+
+    watch(
+      props.listData,
+      (val: any) => {
+        console.log('change');
+
+        try {
+          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: any) => {
+      console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
     };
 
     return {
       confirm,
-      onChange
+      onChange,
+      value,
+      range,
+      onColumnChange
     };
   }
 });