更新记录
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>