uview-plus中Picker 选择器的用法

uView Plus 中的 Picker 选择器组件可以用于在多个选项中选择一个或多个选项。Picker 支持多种选择模式，如单列模式、多列模式、时间选择器等。以下是 Picker 组件的基本用法：

1. 单列模式

<uni-picker mode="selector" :range="{{['选项1','选项2','选项3']}}" @confirm="onPickerConfirm">
  <view>请选择</view>
</uni-picker>

在单列模式中，我们通过设置 mode 属性为"selector"来指定选择器的模式。通过设置 range 属性来指定选项列表。在用户选择完选项并点击确定按钮后，会触发 confirm 事件，我们可以在事件处理函数中获取选中的值。示例代码中的 onPickerConfirm 函数如下：

onPickerConfirm(event) {
  console.log(event.detail.value) // 打印选中的值
}

2. 多列模式

<uni-picker mode="multiSelector" :range="{{multiRange}}" @confirm="onPickerConfirm">
  <view>请选择</view>
</uni-picker>

在多列模式中，我们通过设置 mode 属性为"multiSelector"来指定选择器的模式。通过设置 range 属性来指定多列选项列表。我们需要将每列选项列表保存在一个数组中，然后将这些数组组成一个数组，作为 range 属性的值。在用户选择完选项并点击确定按钮后，会触发 confirm 事件，我们可以在事件处理函数中获取选中的值。此外，我们还需要在 data 中定义一个 multiIndex 变量来保存每列选中的索引值。示例代码如下：

<template>
  <view>
    <uni-picker mode="multiSelector" :range="{{multiRange}}" @confirm="onPickerConfirm" :value="{{multiIndex}}"
      @change="onMultiPickerChange">
      <view>请选择</view>
    </uni-picker>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        multiRange: [
          ['选项1', '选项2', '选项3'],
          ['选项A', '选项B', '选项C']
        ],
        multiIndex: [0, 0]
      }
    },
    onPickerConfirm(event) {
      console.log(event.detail.value) // 打印选中的值
    },
    onMultiPickerChange(event) {
      this.multiIndex = event.detail.value // 更新选中的索引值
    }
  }
</script>

在上述示例代码中，我们定义了一个包含两列选项的多列模式的 Picker 组件。通过设置 multiRange 属性来指定每列选项列表。通过设置 value 属性来指定每列选中的索引值。在用户选择完选项并点击确定按钮后，会触发 confirm 事件，我们可以在事件处理函数中获取选中的值。同时，我们还绑定了 change 事件，当用户选择了某一列的选项时，就会触发该事件，我们在事件处理函数中更新 multiIndex 变量的值，以便正确显示选中的选项。

3. 时间选择器

<uni-picker mode="time" @confirm="onPickerConfirm">
  <view>请选择时间</view>
</uni-picker>

在时间选择器中，我们通过设置 mode 属性为"time"来指定选择器的模式。在用户选择完时间并点击确定按钮后，会触发 confirm 事件，我们可以在事件处理函数中获取选中的时间值。示例代码中的 onPickerConfirm 函数如下：

onPickerConfirm(event) {
  console.log(event.detail.value) // 打印选中的时间值
}

在以上示例代码中，我们都绑定了 confirm 事件，然后在事件处理函数中获取选中的值。我们可以根据实际需求来选择合适的模式和设置选项，以满足我们的业务需求。