增强uni-app的uni-picker-view组件（添加搜索和禁选功能）

最新推荐文章于 2024-08-09 15:31:19 发布

swiftlinlei

最新推荐文章于 2024-08-09 15:31:19 发布

阅读量4.7k

点赞数 2

分类专栏：前端文章标签： vue.js css uni-app

本文链接：https://blog.csdn.net/swiftlinlei/article/details/121859056

版权

本文介绍了如何在uni-app中增强uni-picker-view组件，增加了搜索和禁选功能。通过组件文件的修改和配置，实现了用户在选择列表中能够进行搜索过滤，并能对特定选项进行禁用，提升用户体验。

摘要由CSDN通过智能技术生成

1、组件文件如下：

<template>
	<view>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" @change="change">
				<view>
					<view>
						<uni-row>
						    <uni-col :span="6">
								<button plain="true" style="margin-top: 20rpx;border-style:none;" @click="cancelChange()"><text class="button-text">取消</text></button>
						    </uni-col>
						    <uni-col :span="12">
						        <uni-search-bar style="margin-top: 15rpx;font-size: 3em;" :value="searchKey" radius="0" placeholder="搜索" clearButton="none" cancelButton="none" @input="search"/>
						    </uni-col>
							<uni-col :span="6">
								<button plain="true" style="margin-top: 20rpx;border-style:none;" @click="sureSelect()"><text class="button-text">确定</text></button>
							</uni-col>
						</uni-row>
						<picker-view v-if="visible" :value="pickerValue" indicator-style="height:50px;" @change="bindChange">
							<picker-view-column>
								<view class="item" v-for="(item,index) in pickerList" :key="index">{
  {item}}</view>
							</picker-view-column>
						</picker-view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</templa