All Products
Search
Document Center

Filter

Last Updated: May 27, 2021

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

 
  1. <dependency component="{ AFilter, FilterList, FilterItem }" src="@alipay/antui-vue" ></dependency>

ESModule

 
  1. 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 false. 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 null, the value of selected is used preferentially. 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

 
  1. <template>
  2. <div style="min-height: 200px;">
  3. <AFilter type="dialog" v-model="show">
  4. <FilterList>
  5. <FilterItem v-for="i in 8" :option="i" v-model="selected">
  6. {{ i }}
  7. </FilterItem>
  8. </FilterList>
  9. </AFilter>
  10. <div class="button-wrap">
  11. <button class="am-button white" @click="show = true">点击显示筛选框</button>
  12. </div>
  13. </div>
  14. </template>
  15. <style lang="less" scoped>
  16. .button-wrap {
  17. padding: 15px;
  18. }
  19. </style>
  20. <script>
  21. export default {
  22. data() {
  23. return {
  24. show: true,
  25. selected: null,
  26. };
  27. },
  28. };
  29. </script>

Multi-classification filter

Sample image

Sample code

 
  1. <template>
  2. <div style="min-height: 400px;">
  3. <AFilter v-model="show">
  4. <FilterList recommend>
  5. <FilterItem v-for="i in 3" :option="'recommend-' + i" v-model="selected">
  6. {{ i }}
  7. </FilterItem>
  8. </FilterList>
  9. <FilterList title="分类名称">
  10. <FilterItem v-for="i in 5" :option="'a-' + i" v-model="selected">
  11. {{ i }}
  12. </FilterItem>
  13. </FilterList>
  14. <FilterList title="分类名称">
  15. <FilterItem v-for="i in 6" :option="'b-' + i" v-model="selected">
  16. {{ i }}
  17. </FilterItem>
  18. </FilterList>
  19. </AFilter>
  20. <div class="button-wrap">
  21. <button class="am-button white" @click="show = true">点击显示筛选框</button>
  22. </div>
  23. </div>
  24. </template>
  25. <style lang="less" scoped>
  26. .button-wrap {
  27. padding: 15px;
  28. }
  29. </style>
  30. <script>
  31. export default {
  32. data() {
  33. return {
  34. show: false,
  35. selected: null,
  36. };
  37. },
  38. };
  39. </script>

Full-screen filter

Sample image

Sample code

 
  1. <template>
  2. <div>
  3. <div class="button-wrap">
  4. <button class="am-button white" @click="show = true">点击显示筛选框</button>
  5. </div>
  6. <AFilter type="page" v-model="show">
  7. <FilterList>
  8. <FilterItem option="disabled" :selected="!!~selected.indexOf('disabled')" @input="onSelect" disabled>
  9. disabled
  10. </FilterItem>
  11. <FilterItem option="selected" :selected="!!~selected.indexOf('selected')" @input="onSelect" disabled selected>
  12. selected
  13. </FilterItem>
  14. <FilterItem v-for="i in 6" :option="i" :selected="!!~selected.indexOf(i)" @input="onSelect">
  15. {{ i + 1 }}
  16. </FilterItem>
  17. </FilterList>
  18. </AFilter>
  19. </div>
  20. </template>
  21. <style lang="less" scoped>
  22. .button-wrap {
  23. padding: 15px;
  24. }
  25. </style>
  26. <script>
  27. export default {
  28. data() {
  29. return {
  30. selected: [],
  31. show: true
  32. };
  33. },
  34. methods: {
  35. onSelect(v) {
  36. if (~this.selected.indexOf(v)) {
  37. this.selected = this.selected.filter(i => i !== v);
  38. } else {
  39. this.selected.push(v);
  40. }
  41. },
  42. },
  43. };
  44. </script>