Filter 筛选
本文介绍了使用 Filter 筛选组件的不同方式以及相关 API。
在 Kylin 工程中使用该组件。
在其他工程中使用,通过 ESModule 的方式导入组件。
API 说明 提供了 props、slots、events 的接口信息。此外,如需查看该组件的视觉效果及示例代码,参考本文的 Demo。
Kylin
<dependency component="{ AFilter, FilterList, FilterItem }" src="@alipay/antui-vue" ></dependency>
ESModule
import { AFilter, FilterList, FilterItem } from '@alipay/antui-vue';
API 说明
AFilter
type 为 dialog
时(默认)
props
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
value | 是否显示 | boolean | false |
animation | 是否有打开动画 | boolean | true |
slots
属性 | 说明 | scope |
---|---|---|
- | 默认 slot,填充布局内部内容 | - |
events
属性 | 说明 | 函数 |
---|---|---|
input | 单击阴影部分时触发,值为 | Function(value: boolean): void |
type
为 page
时
props
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
value | 是否显示 | boolean | false |
animation | 是否有打开动画 | boolean | true |
slots
属性 | 说明 | scope |
---|---|---|
- | 默认 slot,填充布局内部内容 | - |
footer | 用于改变底部按钮 | - |
events
属性 | 说明 | 函数 |
---|---|---|
reset | 单击重置按钮时触发 | Function(): void |
confirm | 单击确认按钮时触发 | Function(): void |
FilterList
props
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
recommend | 推荐选项 | boolean | false |
title | 选项分组标题 | string | "" |
slots
属性 | 说明 | scope |
---|---|---|
- | 默认 slot,填充元素内部内容 | - |
FilterItem
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
selected | 是否选中,值为 null 时,根据 option 与 value 进行判断 | boolean,null | null |
option | 该选项的标识值 | string,number | - |
value | 当前选中的选项的标识值,若与 option 相同则为选中,selected 不为 | string,number | - |
disabled | 是否被禁用 | boolean | false |
slots
属性 | 说明 | scope |
---|---|---|
- | 默认 slot,填充元素内部内容 | - |
events
属性 | 说明 | 函数 |
---|---|---|
input | 选择选项时触发,disabled 时不触发 | Function(option: [string, number]): void |
Demo
筛选框
截图

代码
<template>
<div style="min-height: 200px;">
<AFilter type="dialog" v-model="show">
<FilterList>
<FilterItem v-for="i in 8" :option="i" v-model="selected">
{{ i }}
</FilterItem>
</FilterList>
</AFilter>
<div class="button-wrap">
<button class="am-button white" @click="show = true">单击显示筛选框</button>
</div>
</div>
</template>
<style lang="less" scoped>
.button-wrap {
padding: 15px;
}
</style>
<script>
export default {
data() {
return {
show: true,
selected: null,
};
},
};
</script>
多分类筛选
截图

代码
<template>
<div style="min-height: 400px;">
<AFilter v-model="show">
<FilterList recommend>
<FilterItem v-for="i in 3" :option="'recommend-' + i" v-model="selected">
{{ i }}
</FilterItem>
</FilterList>
<FilterList title="分类名称">
<FilterItem v-for="i in 5" :option="'a-' + i" v-model="selected">
{{ i }}
</FilterItem>
</FilterList>
<FilterList title="分类名称">
<FilterItem v-for="i in 6" :option="'b-' + i" v-model="selected">
{{ i }}
</FilterItem>
</FilterList>
</AFilter>
<div class="button-wrap">
<button class="am-button white" @click="show = true">单击显示筛选框</button>
</div>
</div>
</template>
<style lang="less" scoped>
.button-wrap {
padding: 15px;
}
</style>
<script>
export default {
data() {
return {
show: false,
selected: null,
};
},
};
</script>
全屏筛选
截图

代码
<template>
<div>
<div class="button-wrap">
<button class="am-button white" @click="show = true">单击显示筛选框</button>
</div>
<AFilter type="page" v-model="show">
<FilterList>
<FilterItem option="disabled" :selected="!!~selected.indexOf('disabled')" @input="onSelect" disabled>
disabled
</FilterItem>
<FilterItem option="selected" :selected="!!~selected.indexOf('selected')" @input="onSelect" disabled selected>
selected
</FilterItem>
<FilterItem v-for="i in 6" :option="i" :selected="!!~selected.indexOf(i)" @input="onSelect">
{{ i + 1 }}
</FilterItem>
</FilterList>
</AFilter>
</div>
</template>
<style lang="less" scoped>
.button-wrap {
padding: 15px;
}
</style>
<script>
export default {
data() {
return {
selected: [],
show: true
};
},
methods: {
onSelect(v) {
if (~this.selected.indexOf(v)) {
this.selected = this.selected.filter(i => i !== v);
} else {
this.selected.push(v);
}
},
},
};
</script>