QaUI

# 筛选栏 filter

# 描述

用于对数据进行筛选。

# 使用效果

# 使用方法

在.ux文件中引入组件

<import name="q-filter" src="../../components/filter"></import>
1

# 示例

<template>
  <div class="wrap">
    <q-filter
      bar-option="{{barOption}}"
      popup-option="{{popupOption}}"
      show-filter-icon="{{showFilterIcon}}"
      onselect-bar="handleSelectBar"
      onselect-popup="handleSelectPopup"
    ></q-filter>
    <div style="flex-direction: column">
      <text>文字文字文字</text>
      <text>文字文字文字</text>
      <text>文字文字文字</text>
      <text>文字文字文字</text>
      <text>文字文字文字</text>
      <text>文字文字文字</text>
      <text>文字文字文字</text>
      <text>文字文字文字</text>
      <text>文字文字文字</text>
      <text>文字文字文字</text>
    </div>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
export default {
  data: {
    barOption: [
      {
        type: 'drawer',
        label: '标题文字',
        value: 'barValue1',
        select: 'radio',
        direction: 'column',
        children: [
          {
            label: '描述文字描述文字',
            value: 'value1',
          },
          {
            label: '描述文字',
            value: 'value2',
          },
          {
            label: '描述文字',
            value: 'value3',
          },
          {
            label: '描述文字描述文字',
            value: 'value4',
            size: 'large',
          },
          {
            label: '描述文字',
            value: 'value5',
          },
        ],
      },
      {
        type: 'singleState',
        label: '标题文字',
        value: 'barValue2',
      },
      {
        type: 'sort',
        label: '标题文字',
        value: 'barValue3',
      },
    ],
    popupOption: [
      {
        type: 'radio',
        label: '标题文字',
        value: 'popupValue1',
        children: [
          {
            label: '描述文字描述文字',
            value: 'value1',
          },
          {
            label: '描述文字',
            value: 'value2',
          },
          {
            label: '描述文字',
            value: 'value3',
          },
          {
            label: '描述文字描述文字',
            value: 'value4',
          },
          {
            label: '描述文字',
            value: 'value5',
          },
        ],
      },
      {
        type: 'checkbox',
        label: '标题文字',
        value: 'popupValue2',
        children: [
          {
            label: '描述文字描述文字',
            value: 'value1',
          },
          {
            label: '描述文字',
            value: 'value2',
          },
          {
            label: '描述文字',
            value: 'value3',
          },
          {
            label: '描述文字描述文字',
            value: 'value4',
          },
          {
            label: '描述文字',
            value: 'value5',
          },
        ],
      },
      {
        type: 'checkbox',
        label: '标题文字',
        value: 'popupValue3',
        children: [
          {
            hasSecond: true,
            firstLabel: '标题',
            secondLabel: '辅助文字',
            value: 'value1',
          },
          {
            hasSecond: true,
            firstLabel: '标题',
            secondLabel: '辅助文字',
            value: 'value2',
          },
          {
            hasSecond: true,
            firstLabel: '标题',
            secondLabel: '辅助文字',
            value: 'value3',
          },
        ],
      },
      {
        type: 'range',
        label: '标题文字',
        value: 'popupValue3',
        leftRange: {
          default: '100',
          placeholder: '可输入文字',
        },
        rightRange: {
          default: '',
          placeholder: '可输入文字',
        },
      },
      {
        type: 'checkbox',
        label: '标题文字',
        value: 'popupValue3',
        canFold: true,
        isFolded: false,
        children: [
          {
            label: '描述文字描述文字',
            value: 'value1',
          },
          {
            label: '描述文字',
            value: 'value2',
          },
          {
            label: '描述文字',
            value: 'value3',
          },
          {
            label: '描述文字描述文字',
            value: 'value4',
          },
          {
            label: '描述文字',
            value: 'value5',
          },
        ],
      },
      {
        type: 'checkbox',
        label: '标题文字',
        value: 'popupValue3',
        canFold: true,
        isFolded: true,
        children: [
          {
            label: '描述文字描述文字',
            value: 'value1',
          },
          {
            label: '描述文字',
            value: 'value2',
          },
          {
            label: '描述文字',
            value: 'value3',
          },
          {
            label: '描述文字描述文字',
            value: 'value4',
          },
          {
            label: '描述文字',
            value: 'value5',
          },
        ],
      },
      {
        type: 'checkbox',
        label: '标题文字',
        value: 'popupValue3',
        canFold: true,
        isFolded: true,
        children: [
          {
            label: '描述文字描述文字',
            value: 'value1',
          },
          {
            label: '描述文字',
            value: 'value2',
          },
          {
            label: '描述文字',
            value: 'value3',
          },
          {
            label: '描述文字描述文字',
            value: 'value4',
          },
          {
            label: '描述文字',
            value: 'value5',
          },
        ],
      },
    ],
    showFilterIcon: true,
    drawerTop: '40px',
  },

  handleSelectBar(e) {
    console.log('选中的项为：', e.detail.barResult)
  },

  handleSelectPopup(e) {
    console.log('选中的项为：', e.detail.popupResult)
  },
}
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
.wrap {
  flex-direction: column;
}
1
2
3

# API

# 组件属性

属性 类型 默认值 说明
barOption Array [] 顶部筛选栏配置项
popupOption Array [] 筛选弹出框配置项
showFilterIcon Boolean true 是否显示筛选按钮

# bar-option 属性

属性 类型 默认值 说明
type String '' 筛选项类型，可为 drawer,singleState,sort
label String '' 筛选项描述
value String '' 筛选项值
select String '' drawer 内的项是单选还是多选,只有 type 为 drawer 时生效
direction String '' drawer 内子项的排列方式，可选值为 column 和 row,只有 type 为 drawer 时生效
children Array [] 子元素,只有 type 为 drawer 时生效
children.label String '' 子元素的描述
children.value String '' 子元素的值
children.size String 'small' 子元素的尺寸，可选值包括 small、middle、large
属性 类型 默认值 说明
type String '' 筛选项类型，可为 radio、checkbox、range
label String '' 筛选项描述
value String '' 筛选项值
canFold Boolean false 该筛选项是否可折叠
isFolded Boolean false 该筛选项是否已为折叠状态
children Array [] 子元素
children.label String '' 子元素的描述
children.value String '' 子元素的值
leftRange Object {} 左输入框配置，type 为 range 时生效
leftRange.default String '' 左输入框默认值
leftRange.placeholder String '' 左输入框 placeholder
rightRange Object {} 右输入框配置，type 为 range 时生效
rightRange.default String '' 右输入框默认值
rightRange.placeholder String '' 右输入框 placeholder

# 组件事件

事件名称 事件描述 返回值
selectBar 顶部筛选栏选中事件 {value:value}
selectPopup 弹出搜索框确定按钮点击事件 [ {value:value} ]

← 验证码 vcode →