更新记录
1.0(2021-06-05)
v1.0
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
下拉选择搜索组件
文档说明
1、属性说明
参数 |
类型 |
默认值 |
说明 |
selectList |
Array |
[] |
下拉框数据集 |
placeholder |
String |
请输入搜索内容 |
搜索框 提示信息 |
button |
String |
outside |
按钮在搜索框里面(inside)还是外面(outside) |
showSeachIcon |
Boolean |
true |
显示搜索小图标 |
showSeachBth |
Boolean |
true |
显示搜索按钮 |
radius |
String |
60 |
圆角的边框大小 |
2、事件说明
事件名 |
返回值 |
说明 |
search |
搜索关键词和下拉框 index |
搜索按钮事件 |
confirm |
搜索关键词和下拉框 index |
回车事件 |
基本用法
在 template 中使用组件
<nx-search :selectList="selectList" button="inside" @search="doSearch" @confirm="doSearc" v-model="searchQuery.keyword" />
<script>
export default {
components: {},
data() {
return {
searchQuery: {
keyword: '',
selectIndex: 0
},
selectList: [{
id: 1,
name: '产品'
},
{
id: 2,
name: '内容'
},
],
}
},
methods: {
// 执行搜索
doSearch(searchQuery) {
console.log('searchQuery', searchQuery);
},
}
}
</script>