如何使用Filter筛选组件,有哪些方式_移动开发平台 mPaaS-阿里云帮助中心

本文介绍了使用 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

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 不为 `null` 时优先判断 selected	string，number	-
disabled	是否被禁用	boolean	false

slots

属性	说明	scope
-	默认 slot，填充元素内部内容	-

events

属性	说明	函数
input	选择选项时触发，disabled 时不触发	Function(option: [string, number]): void

筛选框

截图

代码

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