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
}
相关推荐
红辣椒...3 分钟前
codex+第三方模型
java·服务器·前端
木子雨廷5 分钟前
Flutter 使用 flutter_flavorizr 多渠道打包
前端·flutter
环境工程笔记7 分钟前
浏览器自动化跑成功了,为什么结果还是不对?
前端
东风破_9 分钟前
一文搞懂 JavaScript 变量声明:var、let、const 到底有什么区别?
前端·javascript
问心无愧051312 分钟前
ctf show web入门261
android·前端·笔记
触底反弹14 分钟前
你真的理解 JavaScript 变量提升(Hoisting)吗?从 V8 引擎编译原理深入剖析
前端·面试
蜡台26 分钟前
Vue2 使用 typescript 教程
前端·vue.js·typescript
光影少年39 分钟前
Redux Toolkit 用法、解决原生Redux 冗余问题
开发语言·前端·javascript·react.js·中间件·前端框架·ecmascript
云水一下1 小时前
JavaScript 从零基础到精通系列:DOM 操作与事件驱动编程
前端·javascript