1. 星速云首页
  2. 阿里云文档

阿里云移动开发平台mPaaSFilter 筛选

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

筛选框

截图

阿里云移动开发平台mPaaSFilter 筛选

代码

  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>

多分类筛选

截图

阿里云移动开发平台mPaaSFilter 筛选

代码

  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>

全屏筛选

截图

阿里云移动开发平台mPaaSFilter 筛选

代码

  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>

注明:本文为星速云原创版权所有,禁止转载,一经发现将追究版权责任!

发表评论

登录后才能评论
问答社区 QQ客服
微信客服
微信客服
分享本页
返回顶部