uview-plus

# Choose 选择器 3.5.31

打开

选择器组件，用于实现一组选项的单选或自定义操作。

# 使用场景

  • 从一组选项中选择单个项目
  • 时间段选择
  • 快递时间预约等场景
  • 可自定义选项的外观和交互

# 平台差异说明

App（vue） App（nvue） H5 小程序
√ √ √ √

# 基本使用

  • 通过options设置选项数据，数据元素需要有id和title字段
  • 通过v-model绑定当前选中项的索引值
<template>
  <up-choose v-model="value" :options="options"></up-choose>
</template>

<script setup>
import { ref } from 'vue'

const value = ref(0)
const options = ref([
  {id: 1, title: '选项1'},
  {id: 2, title: '选项2'},
  {id: 3, title: '选项3'},
  {id: 4, title: '选项4'},
  {id: 5, title: '选项5'},
  {id: 6, title: '选项6'}
])
</script>

<script>
export default {
  data() {
    return {
      value: 0,
      options: [
        {id: 1, title: '选项1'},
        {id: 2, title: '选项2'},
        {id: 3, title: '选项3'},
        {id: 4, title: '选项4'},
        {id: 5, title: '选项5'},
        {id: 6, title: '选项6'}
      ]
    }
  }
}
</script>

# 不换行显示

通过设置wrap为false可使选项在一行内显示，超出部分可通过滚动查看。

<template>
  <up-choose v-model="value" :options="options" :wrap="false"></up-choose>
</template>

# 自定义尺寸

通过itemWidth和itemHeight可以自定义选项的宽高。

<template>
  <up-choose 
    v-model="value" 
    :options="options" 
    item-width="250rpx" 
    item-height="220rpx">
  </up-choose>
</template>

# 快递上门时间预约

结合up-cate-tab组件可以实现更复杂的交互场景，如快递上门时间预约。

<template>
  <up-cate-tab height="300px" :tab-list="deliveryOptions" v-model:current="deliveryCurrent">
    <template v-slot:itemList="{item}">
      <view class="delivery-time-container">
        <view class="item-title">
          <text>{{item.name}}</text>
        </view>
        <view class="item-container">
          <up-choose 
            v-model="item.selectedIndex" 
            :options="item.times" 
            item-width="460rpx" 
            item-height="60rpx"
            @change="onDeliveryTimeChange">
          </up-choose>
        </view>
      </view>
    </template>
  </up-cate-tab>
</template>

# 自定义选项插槽

通过插槽可以完全自定义选项的显示内容和样式。

<template>
  <up-choose v-model="value" :options="options">
    <template v-slot="slotProps">
      <view class="custom-option">
        <text>{{ slotProps.item.title }}</text>
      </view>
    </template>
  </up-choose>
</template>

# 自定义点击事件

通过设置customClick为true并监听custom-click事件可以实现自定义点击逻辑。

<template>
  <up-choose 
    v-model="value" 
    :options="options" 
    :custom-click="true"
    @custom-click="onCustomClick">
  </up-choose>
</template>

<script setup>
import { ref } from 'vue'

const value = ref(0)
const options = ref([
  {id: 1, title: '选项1'},
  {id: 2, title: '选项2'},
  {id: 3, title: '选项3'}
])

function onCustomClick(index) {
  console.log('自定义点击事件，选中索引：', index)
  // 在这里实现自定义逻辑
}
</script>

<script>
export default {
  data() {
    return {
      value: 0,
      options: [
        {id: 1, title: '选项1'},
        {id: 2, title: '选项2'},
        {id: 3, title: '选项3'}
      ]
    }
  },
  methods: {
    onCustomClick(index) {
      console.log('自定义点击事件，选中索引：', index)
      // 在这里实现自定义逻辑
    }
  }
}
</script>

# 右侧演示页面源代码地址

点击以下链接以查看右侧演示页面的源码


 github  gitee

# API

# Props

参数 说明 类型 默认值 可选值
v-model 当前选中项的索引，可使用 v-model 双向绑定数据 Number | String - -
options 选项数据，元素需要包含 id 和 title 字段 Array [] -
type 选择类型，当前只支持 radio String radio radio
itemWidth 选项宽度，如传入 250rpx 这样的值 String auto -
itemHeight 选项高度，如传入 50px 这样的值 String 50px -
itemPadding 选项内边距 String 8px -
labelName 选项显示文字的字段名 String title -
valueName 选项值的字段名 String value -
customClick 是否自定义点击事件，设置为 true 时只触发 custom-click 事件 Boolean false true
wrap 是否换行显示 Boolean true false

# Events

事件名 说明 回调参数
update:modelValue 选中项改变时触发（v-model绑定值改变） 选中项索引
custom-click 自定义点击事件，需要设置 customClick 为 true 点击项索引

# Slots

名称 说明 slotProps
default 自定义选项内容 { item: 选项数据, index: 选项索引 }

← Color 色彩 →