uview select封装单选和多选

热忱学习

于 2021-10-29 16:26:04 发布

阅读量5.3k

点赞数 2

分类专栏： vue 前端保存代码文章标签： vue 前端

本文链接：https://blog.youkuaiyun.com/qq_42180156/article/details/121037234

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>{

最低0.47元/天解锁文章