SearchBar
说明
- 基于d-select、RichBar等组件，组合而成的SearchBar
import SearchBar from '@/components/SearchBar/index.vue';
<SearchBar
:typeOptions="typeOptions"
:searchOptions="searchOptions"
:filter="filterFunc"
@onSearch="handleSearch"
>
<!-- 右侧内容插槽 可以为空 -->
<template #right>
<RichLabel icon="milestone" :number="6522223" black group>里程碑</RichLabel>
</template>
</SearchBar>
const typeOptions = ref([{ name: '全部', value: '' }, { name: '类1', value: 'class1' }]);
const searchOptions = ref([{ name: '全部', value: 'all' }, { name: '类1', value: 'class1' }]);
const filterFunc = (query: string): void => {
// query为搜索框输入的文字，自动触发。d-select已自动debounce
// 直接更新searchOptions数据
};
const handleSearch = ({ type, query }): void => {
// type对应左侧类型，query对应搜索框的搜索条件
};
Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| searchOptions? | 搜索框搜索词关联的下拉框数据 | Array | - | - |
| typeOptions? | 左侧类型下拉框数据。若数据为空切不插槽，则隐藏类型选择组件 | Array | - | - |
| placeholder? | 搜索框提示语 | string | - | '搜索...' |
| resetTip? | 搜索框下方重置的文字 | string | - | '清空当前搜索、筛选及排序条件' |
| filter? | d-select参数透传，是否开启过滤筛选，也可以直接传入过滤方法 | boolean | function | - | false |
| loading? | d-select参数透传，数据加载中(需搭配filter和remote) | boolean | - | false |
| remote? | d-select参数透传，是否开启远程搜索（需搭配filter和loading） | boolean | - | false |
| defaultType | d-select 默认选中项 | string | - | '' |
其中，type Option = { name: string, value: string }
Emits
| 方法 | 说明 | 返回值 |
|---|---|---|
| onSearch | 搜索框或者左侧下拉框选中 | { type: string, search: string } |
| onReset | 重置搜索，清空左侧下拉框和搜索框输入 |
Slots
| 名称 | 说明 |
|---|---|
| default | 搜索框下拉内容 |
| search | 搜索框整体插槽 |
| type | 左侧类型下拉框 |
| right | 搜索框右侧 |
| reset | 重置行整体插槽 |