投稿

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

网友投稿 • • 全球云 • 阅读 0

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

type 为 dialog 时（默认）

props

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

slots

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

events

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

type 为 page 时

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 筛选阿里云移动开发平台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>
  16. <style lang="less" scoped>
  17.   .button-wrap {
  18.     padding: 15px;
  19.   }
  20. </style>
  22. <script>
  23.   export default {
  24.     data() {
  25.       return {
  26.         show: true,
  27.         selected: null,
  28.       };
  29.     },
  30.   };
  32. </script>

多分类筛选

截图

阿里云移动开发平台mPaaSFilter 筛选阿里云移动开发平台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>
  26. <style lang="less" scoped>
  27.   .button-wrap {
  28.     padding: 15px;
  29.   }
  30. </style>
  32. <script>
  33.   export default {
  34.     data() {
  35.       return {
  36.         show: false,
  37.         selected: null,
  38.       };
  39.     },
  40.   };
  42. </script>

全屏筛选

截图

阿里云移动开发平台mPaaSFilter 筛选阿里云移动开发平台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>
  22. <style lang="less" scoped>
  23.   .button-wrap {
  24.     padding: 15px;
  25.   }
  26. </style>
  29. <script>
  30.   export default {
  31.     data() {
  32.       return {
  33.         selected: [],
  34.         show: true
  35.       };
  36.     },
  37.     methods: {
  38.       onSelect(v) {
  39.         if (~this.selected.indexOf(v)) {
  40.           this.selected = this.selected.filter(i => i !== v);
  41.         } else {
  42.           this.selected.push(v);
  43.         }
  44.       },
  45.     },
  46.   };
  48. </script>

原创文章，作者：网友投稿，如若转载，请注明出处：https://www.cloudads.cn/archives/33554.html

赞 (0)
网友投稿网友投稿
0 0
上一篇 2023年2月2日 am10:30
下一篇 2023年2月2日 am10:30

相关推荐

发表评论

登录后才能评论