前言

推荐一个写博客的效率工具 🔧
CSDN AI数字营销会员，核心功能：
✅ 多平台一键同步 → 一次发文，同步6个平台
✅ 全维度数据监测 → 所有平台数据一个面板看
✅ 营销组件 → 文末合规放公众号/产品推广
✅ GEO检测 → 看你文章在AI平台的曝光情况
对我这种多平台发文的人来说，光同步功能就值回票价了。
写博客的朋友可以看看👇
https://mp.csdn.net/vip?utm_source=fx-blog-qq_45954390

本篇就是告诉大家如何引入使用的。

到 Uniapp 的插件市场，搜索 una-banner
快速通道：https://ext.dcloud.net.cn/search?q=una-picker

一、 插件介绍

1.✨ 特性

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

2. Props 参数

参数	说明	类型	默认值
modelValue	当前选中值，单列为单个值，多列/联动为数组	String / Number / Array	''
show	是否显示弹层，支持 v-model:show	Boolean	false
columns	选项数据，支持一维数组、二维数组、树形数组	Array	[]
title	顶部标题	String	请选择
placeholder	未选择时的占位文本	String	请选择
confirmText	确认按钮文字	String	确定
cancelText	取消按钮文字	String	取消
labelKey	选项显示字段名	String	label
valueKey	选项取值字段名	String	value
childrenKey	联动子级字段名	String	children
cascade	是否启用联动模式	Boolean	false
separator	多列显示文本分隔符	String	/
height	弹层高度	String / Number	520rpx
itemHeight	选项高度	String / Number	88rpx
fieldHeight	默认触发器高度	String / Number	88rpx
fieldPadding	默认触发器内边距	String / Number	0 28rpx
backgroundColor	弹层背景色	String	#FFFFFF
color	未选中选项文字颜色	String	#323233
selectedColor	选中选项文字颜色	String	#323233
cancelColor	取消按钮文字颜色	String	#969799
confirmColor	确认按钮文字颜色	String	#2979ff
borderRadius	弹层圆角	String / Number	24rpx 24rpx 0 0
disabled	是否禁用	Boolean	false
closeOnClickOverlay	点击遮罩是否关闭	Boolean	true

3.Events事件

事件名	说明	回调参数
change	滚动选择时触发	{ values, indexes, options }
confirm	点击确认时触发	{ value, values, indexes, options }
cancel	点击取消或遮罩关闭时触发	-
open	打开弹层时触发	-
close	关闭弹层时触发	-

4. 插槽

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

二、插件使用示例

1. 下载路径

https://ext.dcloud.net.cn/plugin?id=28579

这个广告30s，相当于激励俺继续维护，大部分插件都是这么设置了，大家在观看的时候页面不要关闭，看完在手机上关闭广告，等待uni变更状态就行。

手机端显示：
观看完毕后，点击关闭，等待状态文字变更，再关闭这个uni的小程序。

电脑端就会有个alert，是否运行打开Hbuilderx，点击允许，就跳到HbuilderX中了。选择你要导入的项目

tip： 可以只打开一个窗口，窗口内就一个项目，这样识别会好一些。
我再同一个窗口内，多开了几个项目，有几次没检测到，我又重新看了广告。

点击“确认”，查看此时在哪个目录里。
【注意】因为uniapp修改了传入的目录结构，我的项目结构为 components/una-picker，若有冲突，保证自己的项目不被影响的前提下，点击忽略冲突，别替换了自己项目的文件

2. 引入组件

1）方法一：放入uni_modules

在 uni_modules中新建一个目录una-picker，将下载的 componets下的文件都放入这个目录中。

2）放入components

可以删除无用的 文件，如package.json 、 README.md。

这里我留着是示例如果有同学需要看的话，就放入这个文件夹里，不然自己的其他组件多了之后不好管理文件。

3. 在微信小程序中的运行

1）单独的一列

代码实现：

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

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

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

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

2）展示两列

代码实现：

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

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

const area = ref([]);

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>

3）展示自定义样式

代码实现：

<template>
	<view class="page">
		<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 fruitColumns = [
	{ label: "苹果", value: "apple" },
	{ label: "草莓", value: "strawberry" },
	{ label: "樱桃", value: "cherry" }
];

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

如果大家用着不错，可以动动手指打赏俺，有问题可以私信我，需要qq群维护也请留言，多的话，我再建群哦

三、其他插件文章

1. 【Uniapp 插件 una-banner 】轮播图 / banner / swiper

快速通道

2. 【Uniapp 插件 una-bubble 】气泡 / 聊天框 / 对话框

快速通道

3.【Uniapp 插件 una-upload-resource 】上传资源组件｜ 图片上传｜视频上传｜混传

快速通道

4.【Uniapp 插件 una-img-cropper 】 支持自定义裁剪比例、拖拽缩放调整画面，可导出指定尺寸与画质的图片，跨端兼容，适用于头像上传、图片裁切等业务场景。

快速通道

5.【Uniapp 插件 una-picker 】自定义样式选择器插件

快速通道

6.【Uniapp 插件 una-app-skeleton】骨架屏 / Skeleton / 加载占位 / uni-app x

快速通道