uniapp uView picker组件多选封装改造

已于 2025-04-26 13:30:13 修改
阅读量6.1k 收藏 40
点赞数 22
分类专栏： 组件封装 文章标签： uni-app vue.js 前端
于 2024-01-15 18:02:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62234646/article/details/135606438
版权

更新记录

2024-06-19：

  1. this.$emit(‘change’, name.join(“,”))，name来源未知，其实就是上面的label，已更正。
  2. 点击input区域点击事件不生效。原因：input被禁用。解决办法：input样式增添 pointer-events: none，意义自查，这里不多赘述。
    注意：
  • 组件根据我的需求封装，我的需求是：组件绑定值为选项的name字段拼接字符串，所以组件绑定值和内部input绑定值共用。
  • 如果组件绑定值为选项的code字段拼接，需要把绑定值换成value，this.$emit('change', value.join(","))，同时组件内部的input绑定值单独定义。
  • 如果不想改的话，confirm事件中也可以取到code集合。

2024-08-08

  • 更新了绑定值为 code 拼接字符串的组件。（推荐使用）

2025-04-26
两个月没上平台，CSDN竟然直接擅自给我改成了 VIP 收费文章，真是太6了。
声明一下，我写文章就是做个记录，分享一些日常问题，全部都是免费的！如果你有需要但是我的文章又被迫收费的话，请联系我，我会重新发布的。
以后转平台了，这个平台确实一言难尽！

最近写项目遇到一个需求，手机端（uniapp H5）下拉选需要多选，用的是uView组件库，但是原有的picker组件并没有这个功能，索性自己上手了，简单封装一下。

1. 效果图

在这里插入图片描述—在这里插入图片描述

2. 使用方法
<template>
	<view class="content">
		<view class="chk_val">value：{{ value }}</view>
		<view class="option">
			<view class="label">选项：</view>
			<g-picker v-model="value" :columns="columns" @confirm="confirm"></g-picker>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: "",
				columns: [
					{ label: "选项一", value: "code1" },
					{ label: "选项二", value: "code2" },
					{ label: "选项三", value: "code3" },
					{ label: "选项四", value: "code4" },
					{ label: "选项五", value: "code5" },
					{ label: "选项六", value: "code6" },
					{ label: "选项七", value: "code7" },
				],
			}
		},
		methods: {
			confirm(data, value, label) {
				console.log(data, value, label)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.option {
		display: flex;
		align-items: center;
		.label {
			width: 160rpx;
		}
	}
</style>
3. 使用说明
props：
  • value (v-model)：picker组件绑定值，所选值用逗号拼接
  • columns： 数据源
  • filter：数据显示格式化，label 为组件显示名称 name 字段（默认为label），value 为数据相对应的 code 字段（默认为value）
  • disabled：是否禁用
  • activedColor：选中后的颜色
  • inputAlign：文本对齐方式，默认右对齐
  • placeholder：默认提示
Events：
  • confirm：点击确定按钮触发。(data, value, label) => {}
    • data：选中的数据集合
    • value：选中的数据 value 集合
    • label：选中的数据 label 集合
4. 源码
  1. 直接在 components 里面创建相同的文件夹和文件名，这样可以省去注册步骤直接引用。
    在这里插入图片描述
  2. g-picker.vue （绑定值为 name 拼接字符串）
<template>
	<view class="g-picker">
		<view class="g-picker-value" @click.native="showPicker">
			<u-input v-model="value" disabled disabledColor="#fff" :inputAlign="inputAlign" :placeholder="placeholder" style="pointer-events: none">
			</u-input>
			<u-icon v-if="!disabled" name="arrow-right" color="#c0c4cc"></u-icon>
		</view>
		<u-popup :show="show" :round="6" mode="bottom">
			<view class="g-picker-con">
				<view class="g-picker-operate">
					<text @click="show = false">取消</text>
					<text @click="confirm">确认</text>
				</view>
				<view class="g-picker-list">
					<view class="g-picker-item" v-for="(col, inx) in columnsList" :key="inx"
						@click="checkItem(col, inx)">
						<view :class="['g-picker-item_label', col._check ? 'g-picker-item--actived' : '']"
							:style="{color: col._check ? activedColor : '#333'}">{{ col[filter.label] }}</view>
						<u-icon class="g-picker-item_icon" v-show="col._check" name="checkbox-mark"
							:color="activedColor"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		model: {
			prop: 'value',
			event: 'change'
		},
		props: {
			// picker组件绑定值，默认 name 用，拼接
			value: {
				type: String,
				default: ""
			},
			// 数据源
			columns: {
				type: Array,
				default: () => {
					return []
				}
			},
			// 数据显示格式化
			filter: {
				type: Object,
				default: () => {
					return {
						label: 'label',
						value: 'value'
					}
				}
			},
			// 是否禁用
			disabled: {
				type: Boolean,
				default: false
			},
			// 选中后颜色
			activedColor: {
				type: String,
				default: "#F58621"
			},
			// 文本对齐方式
			inputAlign: {
				type: String,
				default: "right"
			},
			// 默认提示
			placeholder: {
				type: String,
				default: "请选择"
			}
		},
		data() {
			return {
				show: false,
				columnsList: [],
				value_chx: []
			}
		},
		watch: {
			value: {
				handler(n) {
					if (n) this.reShow();
				},
				immediate: true
			},
			columns: {
				handler(n) {
					if (n.length) {
						this.columnsList = n
						for (let val of this.columnsList) {
							this.$set(val, '_check', false)
						}
					}
				},
				immediate: true
			}
		},
		methods: {
			showPicker() {
				if (this.disabled) return
				this.show = true
			},
			reShow() {
				let data = this.value.split(",")
				setTimeout(() => {
					for (let val of this.columnsList) {
						if (data.includes(val[this.filter.label])) val._check = true
					}
				}, 100)
			},
			checkItem(col, inx) {
				col._check = !col._check
			},
			// close() {
			// 	this.show = false
			// 	this.$emit("close")
			// },
			confirm() {
				let value = [],
					label = []
				this.value_chx = this.columns.filter(v => v._check)
				for (let val of this.value_chx) {
					value.push(val[this.filter.value])
					label.push(val[this.filter.label])
				}
				this.show = false
				this.$emit('confirm', this.value_chx, value, label)
				this.$emit('change', label.join(","))
			}
		}
	}
</script>
<style lang="scss" scoped>
	.g-picker {
		width: 100%;
		.g-picker-value {
			display: flex;
		}

		.g-picker-con {
			color: #333;
			font-size: 28rpx;

			.g-picker-operate {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 80rpx;
				padding: 0 32rpx;

				text {
					color: #999;

					&:last-child {
						color: #3c9cff;
					}
				}
			}

			.g-picker-list {
				min-height: 30vh;
				max-height: 60vh;
				overflow-y: scroll;

				.g-picker-item {
					position: relative;
					width: 100%;
					height: 80rpx;

					.g-picker-item_label {
						width: 66%;
						margin: 0 auto;
						text-align: center;
						line-height: 80rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.g-picker-item--actived {
						font-weight: 600;
					}

					.g-picker-item_icon {
						position: absolute;
						top: 50%;
						right: 40rpx;
						transform: translateY(-50%);
					}
				}
			}
		}
	}
</style>
  1. g-picker.vue （绑定值为 code 拼接字符串）
<template>
	<view class="g-picker">
		<view class="g-picker-value" @click="showPicker">
			<u-input v-model="val" disabled disabledColor="#fff" :inputAlign="inputAlign" border="none"
				:placeholder="placeholder" style="pointer-events:none">
			</u-input>
			<u-icon v-if="!disabled" name="arrow-right" color="#c0c4cc"></u-icon>
		</view>
		<u-popup :show="show" :round="6" mode="bottom">
			<view class="g-picker-con">
				<view class="g-picker-operate">
					<text @click="show = false">取消</text>
					<text @click="confirm">确认</text>
				</view>
				<view class="g-picker-list">
					<view class="g-picker-item" v-for="(col, inx) in columnsList" :key="inx"
						@click="checkItem(col, inx)">
						<view :class="['g-picker-item_label', col._check ? 'g-picker-item--actived' : '']"
							:style="{color: col._check ? activedColor : '#333'}">{{ col[filter.label] }}</view>
						<u-icon class="g-picker-item_icon" v-show="col._check" name="checkbox-mark"
							:color="activedColor"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		// model: {
		// 	prop: 'value',
		// 	event: 'change'
		// },
		props: {
			// picker组件绑定值，默认 name 用，拼接
			value: {
				type: String,
				default: ""
			},
			// 数据源
			columns: {
				type: Array,
				default: () => {
					return []
				}
			},
			// 数据显示格式化
			filter: {
				type: Object,
				default: () => {
					return {
						label: 'label',
						value: 'value'
					}
				}
			},
			// 是否禁用
			disabled: {
				type: Boolean,
				default: false
			},
			// 选中后颜色
			activedColor: {
				type: String,
				default: "#F58621"
			},
			// 文本对齐方式
			inputAlign: {
				type: String,
				default: "right"
			},
			// 默认提示
			placeholder: {
				type: String,
				default: "请选择"
			}
		},
		data() {
			return {
				show: false,
				val: "",
				columnsList: [],
				value_chx: []
			}
		},
		watch: {
			value: {
				handler(n) {
					if (n) this.reShow();
				},
				immediate: true
			},
			columns: {
				handler(n) {
					if (n.length) {
						this.columnsList = n
						for (let val of this.columnsList) {
							this.$set(val, '_check', false)
						}
					}
				},
				immediate: true
			}
		},
		methods: {
			showPicker() {
				if (this.disabled) return
				this.show = true
			},
			reShow() {
				let data = this.value.split(",")
				setTimeout(() => {
					let ary = []
					for (let val of this.columnsList) {
						if (data.includes(val[this.filter.value])) {
							val._check = true
							ary.push(val[this.filter.label])
						}
					}
					this.val = ary.join(",")
				}, 100)
			},
			checkItem(col, inx) {
				col._check = !col._check
			},
			confirm() {
				let value = [],
					label = []
				this.value_chx = this.columns.filter(v => v._check)
				for (let val of this.value_chx) {
					value.push(val[this.filter.value])
					label.push(val[this.filter.label])
				}
				this.show = false
				this.val = label.join(",")
				this.$emit('input', value.join(","))
				this.$emit('confirm', this.value_chx, value, label)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.g-picker {
		width: 100%;
		.g-picker-value {
			display: flex;
		}

		.g-picker-con {
			color: #333;
			font-size: 28rpx;

			.g-picker-operate {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 80rpx;
				padding: 0 32rpx;

				text {
					color: #999;

					&:last-child {
						color: #3c9cff;
					}
				}
			}

			.g-picker-list {
				min-height: 30vh;
				max-height: 60vh;
				overflow-y: scroll;

				.g-picker-item {
					position: relative;
					width: 100%;
					height: 80rpx;

					.g-picker-item_label {
						width: 66%;
						margin: 0 auto;
						text-align: center;
						line-height: 80rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.g-picker-item--actived {
						font-weight: 600;
					}

					.g-picker-item_icon {
						position: absolute;
						top: 50%;
						right: 40rpx;
						transform: translateY(-50%);
					}
				}
			}
		}
	}
</style>

封装的比较简单，够我目前使用，大家可以根据自己的需求修改。

UIPickerView多选
07-31
这是一个实现了UIPickerView的多选的情况。根据别人的代码，根据自己的需要而做了修改，感觉还不错就拿来和大家一起分享，希望对您有所帮助。大家一起学习了。
封装uniApp内置组件picker
小刘
01-09 1107
这里请求方法是封装过的，有想法可以去看看。
uniapp多选下拉框（vue2）
最新发布
Yui_NIE的博客
03-07 592
【代码】uniapp多选下拉框（vue2）
uniapp picker封装
weixin_58762885的博客
02-08 397
uniapp picker封装
uni-app中下拉框多选
Achong999的博客
05-05 2392
注意：插件的colums中的key 值是label和value，如果项目中数据的key值和插件不一致，需要在获取到数据后替换key值。step2:使用HBuilderX导入插件。在获取到人员列表后替换key值，再打开。step 3：在要使用的页面直接使用。实现如上图的可多选的下拉框。step1:打开链接。
【多选picker】uniapp改造uview组件，改造picker为多选，适用uniapp和vue
pengpm的博客
03-23 4248
适用于平板或手机端的picker选择器，具备多选功能 完全复制uview-ui的代码 origin-component/custom-picker/custom-picker.vue 改造了picker-view-column标签下的代码，之前只是文字形式，现在让叶子节点也就是最后一集级以复选框的形式展示，leafLevel是外面传进来的叶子节点的层级 增加方法boxItemChange 监听checkbox的选择状态，并调用父组件的boxChange方法
uniapp 多列picker选择
weixin_50639421的博客
01-17 1363
【代码】uniapp 多列picker选择。
vue 多项选择器 picker组件——动态绑定数组实现多项选择器
weixin_45896868的博客
04-13 3155
基于这个演示的效果我们可以很直观的知道各个属性的作用：range是我们选择的范围，range-key是要它显示的内容，value是每次选定的下标（类似[0,0,0]这样），@columnchange是滑动改变选择触发的方法。一开始我认为是同步的问题，就是接口的数据还没来及给multiAdress这个数组，picker就已经显示了，于是使用了promise来解决这个问题，但是没有作用，于是我又想了很久，终于在别人的博客中找到了答案，那就是。省市区的格式是这样的，Code可以不用管，这是我调用接口用的参数。
uni-app picker多列选项
Queen-Shir的博客
06-24 2295
【代码】uni-app picker多列选项。
uview3.0picker实现多级选择
m0_61848095的博客
12-14 1829
实现效果如图：先给大家看下我们的数据结构，然后大家根据自己的数据结构来 1.定义一个初始数数据用于存放数组 2.初始获取数据，在onLoad中调用方法，因为初始化只会展示所有的第一层数据，因此只需要获取第一层的数据，index为0就可以了。 3.滑动更新数据，使用picker事件：@change="departmentChangeHandler" 如果有更好的方法，希望大家告诉我谢谢~
UIPickerView 实现多列选择栏
1097195326的专栏
05-18 3345
首先要实现以下两个代理：UIPickerViewDelegate、UIPickerViewDatasource UIPickerViewDelegate中的方法： – pickerView:rowHeightForComponent: – pickerView:widthForComponent: – pickerView:titleForRow:forComponent: – p
change-uview:修改uview-ui组件的组价
03-23
修改uview-ui组件 1.修改选项卡组件可以竖向导航 npm安装github：GitPengrui / change-uview
uniapp多选标签/多选按钮/多选框源码
12-01
该项目用hbuilder可直接导入运行，实现多选框操作，对于初学者，学习遍历，动态给样式赋值。
uniapp基于uview表单二次封装
add-oil的博客
08-08 1459
uniapp基于uview的表单二次封装，方便使用，表单开发
uniapp 小程序如何使用uview 进行封装多选多列联动选择器，可以自定义数据
06-08
好的，下面是一个使用 uview-ui 多列选择器组件进行二次封装的示例，可以自定义数据： ``` <u-picker-view :value="selectedValues" @change="onPickerChange"> <u-picker-view-column v-for="(column, ...
uniapp使用uview 二次封装多列多选选择器
06-08
好的，下面是一个使用 uview-ui 多列选择器组件进行二次封装的示例： ``` <u-picker-view :value="selectedValues" @change="onPickerChange"> <u-picker-view-column v-for="(column, index) in columns...
uni-app—— uniapp vue3.0 实现 级联选择器几室几厅
qq_43201350的博客
11-29 130
uni-app—— uniapp vue3.0 实现 级联选择器几室几厅
uniapp开发是使用多级联动aui-picker
Allen-Ye博客
04-08 896
uniapp开发是使用多级联动aui-picker
uni-app使用picker的多种选择器（多列，时间）效果demo（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
03-15 1522
uni-app使用picker的多种选择器（多列，时间）效果demo
评论 19
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值