更新记录

1.0.0（2026-06-30） 下载此版本

1.0.0

• 支持单列数组、多列二维数组和树形联动数据
• 支持 v-model 绑定选中值，支持 v-model:show 控制弹层显示
• 支持自定义字段名：labelKey、valueKey、childrenKey
• 支持自定义标题、按钮文字、占位文本、弹层高度和触发器样式
• 支持 trigger 插槽自定义触发区域

平台兼容性

uni-app(5.07)

una-picker

uni-app 选择器组件，基于 Vue3 和 picker-view 实现，支持单列、多列、联动选择、底部弹出、插槽触发器以及 v-model 双向绑定。

特性

• 支持单列数组、多列二维数组和树形联动数据
• 支持 v-model 绑定选中值，支持 v-model:show 控制弹层显示
• 支持自定义字段名：labelKey、valueKey、childrenKey
• 支持自定义标题、按钮文字、占位文本、弹层高度和触发器样式
• 支持 trigger 插槽自定义触发区域

基础用法

<template>
    <view>
        <una-picker
            v-model="city"
            title="选择城市"
            :columns="cityColumns"
            @confirm="handleConfirm"
        />

        <una-picker
            v-model="area"
            :cascade="true"
            title="选择地区"
            :columns="areaColumns"
        />
    </view>
</template>

<script setup>
import { ref } from "vue";

const city = ref("");
const area = ref([]);

const cityColumns = [
    { label: "杭州", value: "hangzhou" },
    { label: "上海", value: "shanghai" },
    { label: "深圳", value: "shenzhen" }
];

const areaColumns = [
    {
        label: "浙江",
        value: "zhejiang",
        children: [
            { label: "杭州", value: "hangzhou" },
            { label: "宁波", value: "ningbo" }
        ]
    },
    {
        label: "广东",
        value: "guangdong",
        children: [
            { label: "广州", value: "guangzhou" },
            { label: "深圳", value: "shenzhen" }
        ]
    }
];

function handleConfirm(event) {
    console.log(event.value, event.options);
}
</script>

自定义颜色

<template>
    <view>
        <una-picker
            v-model="fruit"
            title="选择水果"
            placeholder="请选择水果"
            :columns="fruitColumns"
            backgroundColor="#FFF5F5"
            borderRadius="24rpx 24rpx 0 0"
            color="#7A1F24"
            selectedColor="#FF4D4F"
            cancelColor="#B25A5F"
            confirmColor="#FF4D4F"
        />
    </view>
</template>

<script setup>
import { ref } from "vue";

const fruit = ref("");

const fruitColumns = [
    { label: "苹果", value: "apple" },
    { label: "草莓", value: "strawberry" },
    { label: "樱桃", value: "cherry" }
];
</script>

Props

Events

插槽

• trigger：自定义触发区域，插槽参数为 { text, value }