UviewUltra 4.0

Appearance

Choose 选择器 4.4.0 ​

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

使用场景 ​

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

平台差异说明 ​

|App（vue）|App（uvue/uni-app-x）|App（nvue）|H5|小程序| |:-😐:-😐:-😐:-😐:-😐:-😐 |√|√|√|√|

基本使用 ​

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

不换行显示 ​

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

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

自定义尺寸 ​

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

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

快递上门时间预约 ​

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

html
<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>

自定义选项插槽 ​

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

html
<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事件可以实现自定义点击逻辑。

html
<template>
  <up-choose 
    v-model="value" 
    :options="options" 
    :custom-click="true"
    @custom-click="onCustomClick">
  </up-choose>
</template>
js
<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>

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

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


 github  gitee

API ​

Props ​

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

Events ​

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

Slots ​

名称说明slotProps
default自定义选项内容