ui-picker 选择器组

版本：v2.3.11

选择器组件用于从一组选项中选择一个或多个值，支持自定义样式和联动选择

基本使用

<template>
  <div class="picker-demo">
    <ui-button @click="showPicker = true">打开选择/ui-button>
    <ui-picker v-model:show="showPicker" :columns="columns" @confirm="onConfirm">
      <template #toolbar>
        <div class="picker-toolbar">
          <span @click="showPicker = false">取消</span>
          <span>选择器标/span>
          <span @click="onConfirm">确定</span>
        </div>
      </template>
    </ui-picker>
    <p v-if="selectedValue">选择结果：{{ selectedValue }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const showPicker = ref(false);
const selectedValue = ref('');
const columns = [
  {
    values: ['选项1', '选项2', '选项3', '选项4', '选项5']
  }
];

const onConfirm = (value) => {
  selectedValue.value = value[0];
  showPicker.value = false;
};
</script>

<style scoped>
.picker-demo {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.picker-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
}
</style>

Props

参数	类型	默认值	说明
show	Boolean	false	是否显示选择
columns	Array	-	选择器列配置
valueKey	String	'value'	选项值的键名
labelKey	String	'label'	选项文本的键
defaultIndex	Number/Array	0	默认值选中的索
loading	Boolean	false	是否显示加载状

Events

事件	说明	回调参数
confirm	点击确认按钮时触	(values: Array) 选择的值数
cancel	点击取消按钮时触	-
change	选择器值变化时触发	(values: Array, columnIndex: Number) 选择的值数组和列索

Slots

名称	说明
toolbar	自定义选择器顶部工具栏
columns-top	自定义选择器列顶部内容
columns-bottom	自定义选择器列底部内容

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/functional/picker/picker