FilterBar 筛选栏，主要用于数据的筛选。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

基础使用

通过 items 属性设置筛选栏数据，@change 事件为点击筛选栏选项时触发。

<wui-filter-bar :items="items" @change="change"></wui-filter-bar>

const items = ref<any>([
    {
        text: '综合',
        value: '',
        type: 'dropdown',
        active: false,
    },
    {
        text: '价格',
        type: 'sort',
        sort: 1,
    },
    {
        text: '销量',
        type: 'text',
        active: false,
    },
    {
        type: 'switch',
        switch: 1,
    },
    {
        text: '筛选',
        value: '',
        type: 'filter',
    },
]);
const change = (e)=> {
    console.log(e)
}

颜色调整

通过 items 属性设置筛选栏数据，background 属性设置筛选栏背景色，color 属性设置默认字体颜色，lineColor 属性设置底部边框颜色，activeColor 属性设置选中后字体颜色。

<wui-filter-bar :items="items" background="#222" color="#A3A3A3" lineColor="#333" activeColor="#465CFF"></wui-filter-bar>

//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
}]

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	平台差异说明
items	Array	筛选栏数据，具体格式见下方说明	[ ]	-
coexist	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	-

Events

温馨提示：通过 index 以及 items 得到当前操作的数据，直接使用即可，如排序类型：可使用 sort 值来判断是升序还是降序。

事件名	说明	回调参数
@change	点击筛选栏选项时触发	{ index:筛选栏索引值 items:筛选栏数据 }