feat: picker-taro

src/packages/__VUE/picker/demo.taro.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="demo">
+    <h2>基础用法</h2>
+    <nut-picker mode="selector" :list-data="listData1" @confirm="confirm">
+      <nut-cell title="请选择城市" :desc="desc"></nut-cell>
+    </nut-picker>
+    <h2>多列样式</h2>
+    <nut-picker mode="multiSelector" :list-data="listData2" @confirm="confirm2">
+      <nut-cell title="请选择时间" :desc="desc2"></nut-cell>
+    </nut-picker>
+  </div>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+import { createComponent } from './../../utils/create';
+import Picker from './index.taro.vue';
+import Cell from './../cell/index.taro.vue';
+const { createDemo } = createComponent('picker');
+export default createDemo({
+  components: {
+    'nut-picker': Picker,
+    'nut-cell': Cell
+  },
+  props: {},
+  setup() {
+    const listData1 = [
+      '南京市',
+      '无锡市',
+      '海北藏族自治区',
+      '北京市',
+      '连云港市',
+      '浙江市',
+      '江苏市'
+    ];
+    const listData2 = ref([
+      {
+        values: ['周一', '周二', '周三', '周四', '周五'],
+        defaultIndex: 2
+      },
+      {
+        values: ['上午', '下午', '晚上'],
+        defaultIndex: 1
+      }
+    ]);
+
+    const desc = ref(listData1[0]);
+    const desc2 = ref(
+      `${listData2.value[0].values[listData2.value[0].defaultIndex]} ${
+        listData2.value[1].values[listData2.value[1].defaultIndex]
+      }`
+    );
+    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,
+      desc,
+      desc2,
+      confirm,
+      confirm2
+    };
+  }
+});
+</script>

src/packages/__VUE/picker/index.taro.vue

@@ -0,0 +1,86 @@
+<template>
+  <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 './commonProps';
+import { createComponent } from './../../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) => {
+      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);
+      }
+      emit('confirm', e.detail.value, ret);
+    };
+
+    watch(
+      props.listData,
+      (val: any) => {
+        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,
+      value,
+      range,
+      onColumnChange
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped></style>