FilterPanel 过滤面板

示例

Browsers

Google Chrome
Apple Safari
Microsoft Edge
Mozilla Firefox
Opera
Vivaldi
Internet Explorer
Maxthon
Android Browser
UC Browser
Samsung Internet
QQ Browser 
<template>
<article>
  <veui-filter-panel
    title="Browsers"
    :datasource="browsersDatasource"
  >
    <template slot-scope="{ items }">
      <div
        v-for="item in items"
        v-show="!item.hidden"
        :key="item.value"
        class="item"
      >
        {{ item.label }}
      </div>
    </template>
  </veui-filter-panel>
</article>
</template>

<script>
import { FilterPanel } from 'veui'

export default {
  components: {
    'veui-filter-panel': FilterPanel
  },
  data () {
    return {
      browsers: [
        'Google Chrome',
        'Apple Safari',
        'Microsoft Edge',
        'Mozilla Firefox',
        'Opera',
        'Vivaldi',
        'Internet Explorer',
        'Maxthon',
        'Android Browser',
        'UC Browser',
        'Samsung Internet',
        'QQ Browser'
      ]
    }
  },
  computed: {
    browsersDatasource () {
      return this.browsers.map(label => {
        return {
          label,
          value: label.toLowerCase().replace(/\s+/g, '-')
        }
      })
    }
  }
}
</script>

API

属性

名称类型默认值描述
datasourceArray<Object>[]数据源，项目类型为 {label: string, ...}。
searchablebooleantrue是否允许搜索。
filterfunction见描述

搜索过滤函数，签名为 function(keyword, item, index, datasource): boolean。返回值为 false 的项目将被从结果中过滤掉。

名称类型描述
keywordstring搜索关键词。
itemObject当前遍历到的数据节点。
indexnumber当前数据节点在兄弟节点中的索引。
datasourceArray<{label: string, ...}>与 datasource 属性一致。
import { includes } from 'lodash'

function (keyword, { label }) {
  return includes(label, keyword)
}
search-on-inputbooleantrue是否在输入的时候触发搜索。
placeholderstring-搜索框的占位符。

插槽

名称描述
head标题区域。默认显示 title 属性值。
no-datadatasource 中没数据时显示的内容。
default

主内容区域。

名称类型描述
itemsArray<Object>datasource 经过过滤后的数据，类型与 datasource 保持一致。