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
}
相关推荐
今禾几秒前
Git完全指南(中篇):GitHub团队协作实战
前端·git·github
Tech_Lin几秒前
前端工作实战:如何在vite中配置代理解决跨域问题
前端·后端
coldriversnow3 分钟前
uni-app从后端返回的富文本中的视频截取一帧为封面
uni-app
XiaoSong4 分钟前
React Native 主题配置终极指南,一篇文章说透
前端·react native·react.js
NicolasCage5 分钟前
Eslint v9 扁平化配置学习
前端·eslint
shayudiandian6 分钟前
Chrome性能优化秘籍技术
前端·chrome·性能优化
嬉皮客10 分钟前
TailwindCSS 初探
前端·css
林希_Rachel_傻希希11 分钟前
Express 入门全指南:从 0 搭建你的第一个 Node Web 服务器
前端·后端·node.js
京东云开发者16 分钟前
集团前端部署新方案-技术篇(总体架构设计)
前端