rice-ui

暗黑模式

Picker 选择器 ​

预览
01:38
组件名：rice-image

此选择器用于单列，多列，多列联动的选择场景

平台兼容性 ​

uni-app x ​

AndroidiOS鸿蒙Next微信小程序h5
√√√√√

单列选择 ​

Picker 组件通过 columns 属性配置选项数据，columns是一个二维数组，类型为 PickerOption[][]
单列选择的 columns 格式为 [[]]

html
<rice-picker v-model:show="showColumns" :columns="columns" @confirm="onColumnsConfirm"></rice-picker>
<script setup lang="ts">
import { PickerOption, PickerEvent } from "@/uni_modules/rice-ui/index"
const showColumns = ref(false)
const columns = ref<PickerOption[][]>([
  [
    { text: '杭州', value: 'Hangzhou' },
    { text: '宁波', value: 'Ningbo' },
    { text: '温州', value: 'Wenzhou', },
    { text: '绍兴', value: 'Shaoxing' },
    { text: '湖州', value: 'Huzhou' },
    { text: '金华', value: 'JinHua' },
    { text: '嘉兴', value: 'JiaXing' },
  ]
])
const onColumnsConfirm = (e:PickerEvent) => {
console.log('PickerEvent', e)
columnsValue.value = e.selectedValues as string[]
}
</script>

多列选择 ​

多列选择的 columns 格式为 [[],[]]

html
<rice-picker v-model:show="showMultiple" :columns="multiple"></rice-picker>

<script setup>
const showMultiple=ref(false)
const multiple = ref<PickerOption[][]>(
  [
    // 第一列
    [
      { text: '周一', value: 'Monday' },
      { text: '周二', value: 'Tuesday' },
      { text: '周三', value: 'Wednesday' },
      { text: '周四', value: 'Thursday', },
      { text: '周五', value: 'Friday' },
    ],
    // 第二列
    [
      { text: '上午', value: 'Morning' },
      { text: '下午', value: 'Afternoon' },
      { text: '晚上', value: 'Evening' },
    ],
  ]);
</script>

级联选择 ​

级联选择的 columns 格式为[[{value:x,children:{}}]]

html
<rice-picker v-model:show="showCascade" :columns="cascade"></rice-picker>

<script setup>
const showCascade=ref(false)
const cascade = ref<PickerOption[][]>([
  [
    {
      text: '浙江',
      value: 'Zhejiang',
      children: [
        {
          text: '杭州',
          value: 'Hangzhou',
          children: [
            { text: '西湖区', value: 'Xihu' },
            { text: '余杭区', value: 'Yuhang' },
            { text: '滨江', value: 'BinJiang' },
          ],
        },
        {
          text: '温州',
          value: 'Wenzhou',
          children: [
            { text: '鹿城区', value: 'Lucheng' },
            { text: '瓯海区', value: 'Ouhai' },
          ],
        },
      ],
    },
    {
      text: '福建',
      value: 'Fujian',
      children: [
        {
          text: '福州',
          value: 'Fuzhou',
          children: [
            { text: '鼓楼区', value: 'Gulou', },
            { text: '台江区', value: 'Taijiang' },
          ],
        },
        {
          text: '厦门',
          value: 'Xiamen',
          children: [
            { text: '思明区', value: 'Siming' },
            { text: '海沧区', value: 'Haicang' },
          ],
        },
      ],
    },
  ]
])
</script>

省市区选择 ​

很多时候开发者拿到的数据格式不一定是PickerOption 类型，那么就要手动转为 PickerOption 类型了，因为uniappx是有严格的类型校验的。

html
<rice-picker v-model:show="showArea" :columns="areaList"/>

<script setup>
const showArea = ref(false)
const areaList = ref<PickerOption[][]>([])
let transformAreaData : ((list : AreaData[]) => PickerOption[]) | null = null

transformAreaData = (list : AreaData[]) => {
  const result = list.map(item => {
    const children = item['children'] as AreaData[] | null
    return {
      value: item.code,
      text: item.name,
      extend: { code: item.code },
      children: (children != null && children.length > 0) ? transformAreaData!(children) : null
    } as PickerOption
  })
  return result
}

// 假设area为后端返回的数据
areaList.value = [transformAreaData!(area!)] as PickerOption[][]

</script>

顶部标题栏 ​

设置 toolbar-position 为 top 即可设置顶部标题栏

html
<rice-picker v-model:show="showTopColumns" :columns="columns" title="顶部标题栏" toolbar-position="top"
confirm-button-text="完成" cancel-button-text="关闭" />

双向绑定 ​

Picker 组件支持 v-model 双向绑定

html
<rice-picker v-model:show="showColumns2" v-model="columnsValues2" :columns="columns" toolbar-position="top"
:title="`双向绑定值：${columnsValues2.join('')}`" cancel-button-text="" confirm-button-text="" />

<script setup>
  const showColumns2 = ref(false)
  const columnsValues2=ref<string>(['Wenzhou'])
</script>

不使用 Popup ​

设置use-popup 为 false 即可不使用 popup

html
<rice-picker :use-popup="false" :model-value="columnsValues2" :columns="columns" toolbar-position="none" />

API ​

Props ​

属性名类型说明默认值
model-valueArray绑定的数据-
columnsArray数据，二维数组格式 ,默认[[]] ,单列：[[]] 多列:[[],[]]，联动:[[{value:x,children:{}}]]-
toolbar-positionString顶部栏位置，可选值：top、bottom、nonebottom
titleString顶部栏标题-
confirm-button-textString确定按钮文字，设置为空字符串可以隐藏确定
cancel-button-textString取消按钮文字，设置为空字符串可以隐藏取消
font-sizeString|Number选项的文字大小16px
option-heightString|Number每个选项的高度50px
visible-option-numNumber可见的选项个数5
close-on-click-overlayBoolean是否在点击遮罩层后关闭true
close-on-click-confirmBoolean是否在点击确认按钮后关闭true
close-on-click-cancelBoolean是否在点击取消按钮后关闭true
loadingBoolean是否为加载状态-
safe-area-inset-bottomBoolean是否开启底部安全区适配-
use-popupBoolean是否使用popup 默认 true-
immediate-changeBoolean是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件。默认true，仅微信小程序支持-
z-indexBooleanz-index 层级10099
empty-textString空数据时的提示语 默认 暂无数据-

Event ​

事件名说明回调参数
confirm点击确认按钮时触发 (event: PickerEvent)
cancel点击取消按钮时触发 (event: PickerEvent)
change选项改变时触发 (event: PickerEvent)

类型定义 ​

类型 ​

ts
type PickerOption = {
	text : string | number,
	value : string | number,
	disabled ?: boolean,
	children ?: PickerOption[],
	extend ?: UTSJSONObject
}

type PickerModelValue = string | number | null

type PickerEvent = {
	selectedValues : PickerModelValue[],
	selectedOptions : PickerOption[],
	selectedIndex : number[],
}

组件导出如下类型

ts
import { PickerOption, PickerModelValue, PickerEvent } from '@/uni_modules/rice-ui';
//组件类型
const buttonRef=ref<RicePickerComponentPublicInstance|null>(null)