FilterPanel

Demos

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

Props

NameTypeDefaultDescription
datasourceArray<Object>[]Datasource of the filter with the type being {label: string, ...}.
searchablebooleantrueWhether to allow search.
filterfunctionSee description.

The filter function. The function signature is function(keyword, item, index, datasource): boolean. Items that make filter function returns false will be hidden.

NameTypeDescription
keywordstringThe search keyword.
itemObjectEach item in datasource.
indexnumberThe index of each item among its siblings.
datasourceArray<{label: string, ...}>Same as the datasource prop.
import { includes } from 'lodash'

function (keyword, { label }) {
  return includes(label, keyword)
}
search-on-inputbooleantrueWhether to trigger search while typing.
placeholderstring-The placeholder text of the search input.

Slots

NameDescription
headThe head area of the filter panel. Displays the title prop by default.
no-dataContent to be displayed when datasource is empty.
default

The content of the filter panel.

NameTypeDescription
itemsArray<Object>The filtered items from the datasource prop and shares the same type with datasource.