uniapp完成用户选择做模糊检索

最新推荐文章于 2024-07-26 16:15:39 发布

咿口薄荷糖

最新推荐文章于 2024-07-26 16:15:39 发布

阅读量1.7k

点赞数 1

文章标签： uni-app vue js

本文链接：https://blog.csdn.net/weixin_43936040/article/details/112615689

版权

本文介绍了如何利用uni-app框架结合Vue.js和JavaScript技术，实现用户在输入时进行实时模糊搜索的功能。通过监听用户的输入事件，动态过滤数据并展示匹配结果，为移动应用提供便捷的搜索体验。

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

/**
 * 用户模糊检索组件
 * type：控制单选复选，部分用户选择需要复选
 * chooseUser：组件按确认后最后返回的值，是一个用户对象数组
 */
<template>
	<view class="user_popup_box">
		<u-popup class='popup_box' height='600' v-model="show" mode='bottom'>
			<!-- 搜索框部分 -->
			<view class="instruction_search">
				<u-search
				 placeholder="搜索" 
				 v-model="searchKeyword" 
				:clearabled="true" 
				:show-action="false"
				 @search="getUserData"
				 @custom="getUserData" 
				 @clear="clear"
				 bg-color="#F5F5F5"
				 placeholder-color="#333333" 
				 shape="square" 
				 ></u-search>
			</view>
			<!-- 复选框框 -->
			<u-checkbox-group 
				v-if="type !== 'radio'"
				:max="maxNumber" 
				:wrap='true' 
				@change="checkboxGroupChange">
				<u-checkbox
					v-model="item.checked" 
					v-for="(item, index) in leaderList"
					:shape="shape"
					:key="item.id" 
					:name="item.id"
				>{
   {
   item.name}}</u-checkbox>
			</u-checkbox-group>
			<!-- 单选框 -->
			<u-radio-group 
				v-else
				v-model="radioValue" 
				:wrap='true'
				@change='radioGroupChange'
				>
				<u-radio
					v-for="(item, inde