feat: picker增加多列样式

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

@@ -1,27 +1,17 @@
 <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>
+    <nut-picker mode="multiSelector" :list-data="listData2" @confirm="confirm2">
+      <nut-cell title="请选择时间" :desc="desc2"></nut-cell>
+    </nut-picker>
     <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 :list-data="listData3" @confirm="confirm3">
+      <nut-cell title="请选择地址" :desc="desc3"></nut-cell>
+    </nut-picker>
   </div>
 </template>
 <script lang="ts">
@@ -100,7 +90,6 @@ export default createDemo({
       ${listData3[0].children[0].text}
       ${listData3[0].children[0].children[0].text}`
     );
-    const descList = [desc, desc2, desc3];
     return {
       listData1,
       listData2,

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

@@ -1,26 +1,73 @@
 <template>
-  <picker mode="selector" :range="listData" @change="onChange">
+  <picker
+    :mode="mode"
+    :range="computedData"
+    @change="onChange"
+    @columnChange="onColumnChange"
+    :value="value"
+  >
     <slot></slot>
   </picker>
 </template>
 
 <script lang="ts">
+import { toRefs, onMounted, reactive, computed, CSSProperties, ref } 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>([]);
+
     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 = computedData.value?.map(
+          (item: any, idx) => item[e.detail.value[idx]]
+        );
+      }
+      emit('confirm', ret);
+    };
+
+    const computedData = computed(() => {
+      if (props.mode === 'selector') {
+        return props.listData;
+      } else if (props.mode === 'multiSelector') {
+        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;
+          }
+        } catch (error) {
+          console.log('listData参数格式错误', error);
+        }
+      }
+    });
+
+    const onColumnChange = e => {
+      console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
     };
 
     return {
       confirm,
-      onChange
+      onChange,
+      computedData,
+      value,
+      onColumnChange
     };
   }
 });