全部产品
云市场
云游戏

Filter 筛选

更新时间:2020-08-07 20:22:35

Filter 筛选文档介绍了使用该组件的不同方式以及 API 文档:

  • Kylin 工程中使用该组件。
  • 在其他工程中使用,通过 ESModule 的方式导入组件。

API 文档 提供了 props、slots、events 的接口信息。

Kylin

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

ESModule

  1. import { AFilter, FilterList, FilterItem } from '@alipay/antui-vue';

API 文档

AFilter

typedialog 时(默认)

props

属性 说明 类型 默认值
value 是否显示 boolean false
animation 是否有打开动画 boolean true

slots

name 说明 scope
- 默认 slot, 填充布局内部内容 -

events

name 说明 函数
input 点击阴影部分时触发,值为 false Function(value: boolean): void

typepage

props

属性 说明 类型 默认值
value 是否显示 boolean false
animation 是否有打开动画 boolean true

slots

name 说明 scope
- 默认 slot, 填充布局内部内容 -
footer 用于改变底部按钮 -

events

name 说明 函数
reset 点击重置按钮时触发 Function(): void
confirm 点击确认按钮时触发 Function(): void

FilterList

props

属性 说明 类型 默认值
recommend 推荐选项 boolean false
title 选项分组标题 string ""

slots

name 说明 scope
- 默认 slot, 填充元素内部内容 -

FilterItem

属性 说明 类型 默认值
selected 是否选中,值为 null 时,根据 option 与 value 进行判断 boolean, null null
option 该选项的标识值 string, number -
value 当前选中的选项的标识值,若与 option 相同则为选中,selected 不为 null 时优先判断 selected string, number -
disabled 是否被禁用 boolean false

slots

name 说明 scope
- 默认 slot, 填充元素内部内容 -

events

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

Demo

筛选框

截图

代码

  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>

多分类筛选

截图

代码

  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>

全屏筛选

截图

代码

  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>