上传代码

distribution/picker滚动选择器/plugin/IPicker.vue

@@ -0,0 +1,60 @@
+<template>
+<view class="ipicker" :style="containerStyle">
+  <IPickerColumn
+      v-for="(list,index) in value"
+      :list="list"
+      :value="targets[index]"
+      :key="index"
+      :indicator-class="indicatorClass"
+      :select-row-style="selectRowStyle"
+      :indicator-style="indicatorStyle"
+      :height="pickerHeight"
+      :row-height="rowHeight"
+      @change="value=>changeColumn(index,value)"
+  >
+    <template #default="{item}">
+      <slot :item="item">
+      </slot>
+    </template>
+  </IPickerColumn>
+</view>
+</template>
+
+<script setup lang="ts">
+import IPickerColumn from "@/components/IPickerColumn.vue";
+import {ref, watch} from "vue";
+const props=withDefaults(defineProps<{
+  value: Array<Array<any>>,
+  indicatorStyle?: object,
+  indicatorClass?: string,
+  selectRowStyle?: object,
+  containerStyle?: object,
+  pickerHeight?: number,
+  rowHeight?: number,
+}>(),{
+})
+// 选中的下标
+const targets=ref<Array<number>>([])
+watch(()=>targets.value,value=>{
+  emits('change',value);
+},{deep: true})
+// 根据value元素个数设置选中的下标个数
+watch(()=>props.value,value=>{
+  targets.value=[];
+  value.forEach(()=>targets.value.push(0));
+},{deep: true})
+const changeColumn=(index:number,value:number)=>{
+  targets.value[index]=value;
+}
+const emits=defineEmits<{
+  (e:'change',index:Array<number>):void;
+}>()
+</script>
+
+<style scoped lang="scss">
+.ipicker{
+  width: 100%;
+  display: flex;
+  background: #D7FFFBFF;
+}
+</style>