uview select封装单选和多选

本文介绍了如何在uview中封装一个支持单选和多选的组件。通过添加字段来判断多选状态,并在changeItem()方法中处理已选择项的增删,利用indexOf()判断值是否存在。同时展示了相关的代码示例,涉及到数组的join()和splice()方法的使用。
摘要由CSDN通过智能技术生成

uview是没有多选的,根据业务需求就自己封装了一个组件

一般多选的话是要加字段,根据字段判断,这个思路值得记录下

<template>
	<view class="slot-v">
		<!-- 单选 -->

		<u-input v-model="inputValue" type="select" @click="selectShow = true" :placeholder="placeholder" />
	
		<!-- 多选 -->
		<u-popup title="请选择角色" mode="bottom" v-model="selectShow" :mask-close-able="false">
			<view class="slot-content" style="background-color: #FFFFFF;">
				<view class="slot_title">
					<view @click="handleCancel" style="padding: 0 24rpx;">取消</view>
					<view @click="handleOK" style="color: #0181ff;padding: 0 24rpx;">确认</view>
				</view>
				<scroll-view scroll-y="true" style="height: 400rpx;">
					<view v-for="(item,index) in selectList" :key="index" @click="changeItem(item)" :class="[multiple?'':'multiple',selectedRoles.indexOf(item.value)>-1?'selected':'']"
						class="safe-area-inset-bottom itemstyle">
						<text>{
  
  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,下面是一个使用 uview-ui 多列选择器组件进行二次封装的示例: ``` <template> <view> <u-popup v-model="showPicker" position="bottom" :overlay="true"> <view> <u-picker-view :value="selectedValues" @change="onPickerChange"> <u-picker-view-column v-for="(column, index) in columns" :key="index"> <view v-for="(item, i) in column" :key="i"> <u-checkbox v-model="item.checked"> {{ item.label }} </u-checkbox> </view> </u-picker-view-column> </u-picker-view> <u-button type="primary" @click="confirm">确定</u-button> </view> </u-popup> <u-input :value="selectedLabels.join(',')" @click="showPicker = true" disabled></u-input> </view> </template> <script> export default { props: { columns: { type: Array, default: () => [] } }, data() { return { showPicker: false, selectedValues: [], selectedLabels: [] } }, mounted() { this.initSelectedValues() }, methods: { initSelectedValues() { this.selectedValues = this.columns.map(column => { return column.findIndex(item => item.checked) }) this.updateSelectedLabels() }, onPickerChange(e) { this.selectedValues = e.detail.value this.updateSelectedLabels() }, updateSelectedLabels() { this.selectedLabels = this.selectedValues.map((value, index) => { return this.columns[index][value].label }) }, confirm() { this.showPicker = false this.$emit('change', this.selectedLabels) } } } </script> ``` 在这个示例中,我们使用了 u-popup、u-picker-view、u-picker-view-column 和 u-checkbox 组件来构建一个多列联动多选选择器。它接收一个 columns 数组作为参数,每个元素代表一列数据,每个元素包含 label 和 checked 两个属性,分别表示选项的文本和是否被选中。通过 u-checkbox 组件来实现多选功能。 组件内部使用了 selectedValues 数组来存储每列选中的值的索引,使用 selectedLabels 数组来存储每列选中的值的文本。在初始化和选择变化时,通过 updateSelectedLabels 方法来更新 selectedLabels 数组。在点击确定按钮时,通过 emit 方法将选中的值传递给父组件。 这是一个简单的示例,你可以根据自己的业务需求进行修改和扩展。希望对你有所帮助!
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值