更新记录
1.0(2021-06-05) 下载此版本
v1.0
平台兼容性
下拉选择搜索组件
文档说明
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>

收藏人数:
下载插件并导入HBuilderX
下载插件ZIP
赞赏(5)
下载 5968
赞赏 11
下载 11830253
赞赏 1818
赞赏
京公网安备:11010802035340号