All Products
Search
Document Center

Mobile Platform as a Service:Filter

Last Updated:Mar 04, 2022

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 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

<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

Category Name

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

Reset

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>