This topic describes different methods of using the Filter component and the API descriptions:
Use this component in the Kylin project.
Use this component in other projects. Import it through ESModule.
API description provides API information for props, slots, and events.
To view the visual effects and code sample of the component, see Demo.
Kylin
<dependency component="{ AFilter, FilterList, FilterItem }" src="@alipay/antui-vue" ></dependency>
ESModule
import { AFilter, FilterList, FilterItem } from '@alipay/antui-vue';
API description
AFilter
The type
is dialog
(default).
props
Property | Description | Type | Default value |
---|---|---|---|
value | Whether to display the content. | Boolean | false |
animation | Whether startup animation is enabled. | Boolean | true |
slots
Name | Description | Scope |
---|---|---|
- | Default slot used to populate the content of the layout. | - |
events
Name | Description | Function |
---|---|---|
input | Triggered when you tap the shadow part. The value is | Function(value: boolean): void |
The type
is page
.
props
Property | Description | Type | Default value |
---|---|---|---|
value | Whether to display the content. | Boolean | false |
animation | Whether startup animation is enabled. | Boolean | true |
slots
Name | Description | Scope |
---|---|---|
- | Default slot used to populate the content of the layout. | - |
footer | Used to change a bottom button. | - |
events
Name | Description | Function |
---|---|---|
reset | Triggered when you tap the Reset button. | Function(): void |
confirm | Triggered when you tap the Confirm button. | Function(): void |
FilterList
props
Property | Description | Type | Default value |
---|---|---|---|
recommend | Recommended option. | Boolean | false |
title | Option group title. | String | “” |
slots
Name | Description | Scope |
---|---|---|
- | Default slot used to populate the content of the element. | - |
FilterItem
Property | Description | Type | Default value |
---|---|---|---|
selected | Whether an option is selected. When the value of this property is null, the values of option and value are used. | Boolean, null | null |
option | Identifier of this option. | String, Number | - |
value | Identifier of the currently selected option. If the value is the same as that of option, the option is selected. If selected is not | String, Number | - |
disabled | Whether the option is disabled. | Boolean | false |
slots
Name | Description | Scope |
---|---|---|
- | Default slot used to populate the content of the element. | - |
events
Name | Description | Function |
---|---|---|
input | Triggered when the option is selected, and not triggered when the option is disabled. | Function(option: [string, number]): void |
Demo
Filter box
Sample image
Sample code
<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">Tap to show the filter box</button>
</div>
</div>
</template>
<style lang="less" scoped>
.button-wrap {
padding: 15px;
}
</style>
<script>
export default {
data() {
return {
show: true,
selected: null,
};
},
};
</script>
Multi-classification filter
Sample image
Sample code
<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="Category Name">
<FilterItem v-for="i in 5" :option="'a-' + i" v-model="selected">
{{ i }}
</FilterItem>
</FilterList>
<FilterList title="Category Name">
<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">Tap to show the filter box</button>
</div>
</div>
</template>
<style lang="less" scoped>
.button-wrap {
padding: 15px;
}
</style>
<script>
export default {
data() {
return {
show: false,
selected: null,
};
},
};
</script>
Full-screen filter
Sample image
Sample code
<template>
<div>
<div class="button-wrap">
<button class="am-button white" @click="show = true">Tap to show the filter box</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>