FilterBar 筛选栏 
概述
FilterBar 筛选栏，主要用于数据的筛选。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
温馨提示
组件内部使用了 fui-icon（字体图标）组件，非 easycom 组件模式下需要手动引入组件（打开组件内部注释的引入内容，引入路径按实际调整）。
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiFilterBar from "@/components/firstui/fui-filter-bar/fui-filter-bar.vue"
export default {
components:{
fuiFilterBar
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API（以下示例写于.vue页面中）。
基础使用
通过 items 属性设置筛选栏数据，@change 事件为点击筛选栏选项时触发。
<fui-filter-bar :items="items" @change="change"></fui-filter-bar>
1
data() {
return {
items: [{
text: '综合',
value: '',
type: 'dropdown',
active: false
}, {
text: '价格',
type: 'sort',
sort: 1
}, {
text: '销量',
type: 'text',
active: false
}, {
type: 'switch',
switch: 1
}, {
text: '筛选',
value: '',
type: 'filter'
}]
}
},
methods: {
change(e) {
console.log(e)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
颜色调整
通过 items 属性设置筛选栏数据，background 属性设置筛选栏背景色，color 属性设置默认字体颜色，lineColor 属性设置底部边框颜色，activeColor 属性设置选中后字体颜色。
<fui-filter-bar :items="items" background="#222" color="#A3A3A3" lineColor="#333" activeColor="#465CFF"></fui-filter-bar>
1
# Slots
| 插槽名称 | 说明 |
|---|---|
| - | - |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| items | Array | 筛选栏数据，具体格式见下方说明 | [ ] | - |
| coexist V1.9.0+ | Boolean | dropdown、text、sort等类型筛选条件是否不互斥，条件共存 | false | - |
| height | Number, String | 筛选栏高度，单位rpx | 88 | - |
| background | String | 筛选栏背景色 | #fff | - |
| isLine | Boolean | 是否显示下边框 | true | - |
| lineColor | String | 边框颜色 | #eee | - |
| color | String | 默认字体颜色 | #7F7F7F | - |
| activeColor | String | 选中后字体颜色 | #181818 | - |
| size | Number, String | 筛选栏文本字体大小，单位rpx | 28 | - |
//items 筛选栏数据 数据格式以及属性值说明。以下属性值为约定属性，其他属性可自定义扩展。
//注意：dropdown、filter 等类型选择筛选条件后需要设置value值来控制item项为高亮选中状态，具体参考示例程序。
//初始化选中同样通过value值来表示是否选中，默认值为空，表示未选中，设置为非false值则表示高亮选中状态
[{
//item项显示文本
text: '综合',
//value值，该值不为空时表示选中状态
//dropdown、filter 等类型选择筛选条件后需要设置value值来表示选中状态
value: '',
//item项类型，可选值：dropdown（下拉）、text（文本）、switch（大图和列表切换）、sort（排序：升序或降序）、filter（筛选）
type: 'switch',
//标记状态，控制样式，结合value使用
active: false,
//列表大图：1-大图，2-列表，type = switch 时使用
switch: 1,
//排序：1-升序 2-降序，type = sort 时使用
sort: 1，
//图标字体大小，单位rpx，不建议修改
size:32
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# Events
温馨提示：通过index 以及 items 得到当前操作的数据，直接使用即可，如排序类型：可使用 sort 值来判断是升序还是降序。
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @change | 点击筛选栏选项时触发 | { index:筛选栏索引值 items:筛选栏数据 } |
示例预览
# 示例代码地址
VIP内容代码请查看订单页下载的组件库示例源码。# 特别说明
该组件为付费组件，UNI-APP版VIP用户可免费使用 。