uni-app:firstUI框架的选择器Select改造,添加一个搜索的插槽

html 复制代码
<fui-select :show="showSiteType" :options="siteTypeList" textKey="dict_label" title="请选择站点类型"
@confirm="chooseSiteType" @close="onCloseSiteType">
	<template v-slot:search>
		<view>
			<fui-search-bar background="#ffffff" inputBackground="#FAFAFA"
				@search="searchSiteType"></fui-search-bar>
		</view>
	</template>
</fui-select>
javascript 复制代码
const showSiteType = ref(false) //站点类型选择
// 站点类型
function getSiteTypeList(key) {
	api.getSiteTypeList({
		keyworld: key,
	}).then(res => {
		if (res.code == 200) {
			console.log(res);
			siteTypeList.value = res.data
		}
	})
}

function searchSiteType(e) {
	let key = e.detail.value
	getSiteTypeList(key)
}

function chooseSiteType(e) {
	state.type_id = e.options.dict_value//站点类型id
	state.typeIdName = e.options.dict_label//站点类型名称
	onCloseSiteType()
}

function onCloseSiteType() {
	showSiteType.value = false
}
相关推荐
安大桃子4 分钟前
Mapbox GL + Deck.gl 三维实战:Mapbox 加载 Tileset3D 倾斜摄影模型
前端·webgl
yede7 分钟前
多行文本省略号显示,更多按钮展开全部
前端
就是我9 分钟前
React 应用性能优化实战
前端·react.js·性能优化
G扇子12 分钟前
深入解析XSS攻击:从原理到防御的全方位指南
前端·安全
snakeshe101017 分钟前
入解析React性能优化策略:eagerState的工作原理
前端
六边形66618 分钟前
Vue中的 ref、toRef 和 toRefs 有什么区别
前端·vue.js·面试
kovli18 分钟前
红宝书第十八讲:详解JavaScript的async/await与错误处理
前端·javascript
前端付豪19 分钟前
🚀 React 应用国际化实战:深入掌握 react-i18next 的高级用法
前端·react.js·架构
代码小学僧19 分钟前
使用 Cloudflare workers 做一个定时发送消息的飞书机器人
前端·云原生·serverless
前端付豪20 分钟前
2、ArkTS 是什么?鸿蒙最强开发语言语法全讲解(附实操案例)
前端·后端·harmonyos