文档

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

单击阴影部分时触发,值为 false

Function(value: boolean): void

typepage

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 不为 null 时优先判断 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>