Picker 滚动选择

底部滚轮多列滑动选择器，支持单列选择、多列独立联动与多层级树状级联数据选择。

---

代码示例

1. 单列选择 (Single Column)

传入一维数组 columns 作为选择源，通过 v-model:show 控制弹出选择框。

<template>
  <mu-button type="primary" block @click="show = true">选择学历</mu-button>
  
  <mu-picker
    v-model:show="show"
    title="选择最高学历"
    :columns="columns"
    @confirm="handleConfirm"
  />
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
const columns = ['高中', '大专', '本科', '硕士', '博士']

const handleConfirm = (res) => {
  console.log('选中项:', res.items)
}
</script>

---

2. 多列独立选择 (Multi Column)

传入二维数组 columns 实现多列独立滚轮组合选择。

<template>
  <mu-picker
    v-model:show="show"
    title="选择预约日期与时间"
    :columns="multiColumns"
    @confirm="handleConfirm"
  />
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
const multiColumns = [
  ['周一', '周二', '周三', '周四', '周五'],
  ['上午 09:00', '下午 14:00', '晚上 19:00']
]
</script>

---

3. 树状级联选择 (Cascade Column)

传入包含 children 的树状结构数组，组件将自动识别并动态进行多列级联联动。

<template>
  <mu-picker
    v-model:show="show"
    title="选择所在省市"
    :columns="cascadeColumns"
    @confirm="handleConfirm"
  />
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
const cascadeColumns = [
  {
    label: '浙江省',
    children: [
      { label: '杭州市', children: [{ label: '西湖区' }, { label: '余杭区' }] },
      { label: '宁波市', children: [{ label: '海曙区' }, { label: '鄞州区' }] }
    ]
  }
]
</script>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model:show / show	控制选择器底部弹窗的显示与隐藏	Boolean	true | false	false
v-model / modelValue	当前选中的 values 索引或标识数组	Array	-	[]
columns	选择器的数据源数组 (一维/二维/树状)	Array	-	[]
title	顶部工具栏居中标题	String	-	'请选择'
labelKey	自定义 label 属性名	String	-	'label'
valueKey	自定义 value 属性名	String	-	'value'
childrenKey	级联树状结构的子列表键名	String	-	'children'

---

事件说明 (Events)

事件名	说明	回调参数
update:show	v-model:show 双向绑定更新	(show: boolean)
update:modelValue / update:value	v-model 双向绑定更新	(value: Array)
confirm	点击确定按钮时触发	({ indexs, items, values })
change	滚动列发生滑动变化时触发	({ indexs, items, values })
cancel	点击取消按钮或遮罩时触发	-
close	弹窗动画完全关闭后触发	-