VEUI

Demos

<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

Name Type Default Description

datasource Array<Object> [] Datasource of the filter with the type being {label: string, ...}.

searchable boolean= true Whether to allow search.

filter

function=

See description.

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

Name	Type	Description
`keyword`	`string`	The search keyword.
`item`	`Object`	Each item in `datasource`.
`index`	`number`	The index of each item among its siblings.
`datasource`	`Array<{label: string, ...}>`	Same as the `datasource` prop.

import { includes } from 'lodash'

function (keyword, { label }) {
  return includes(label, keyword)
}

search-on-input boolean= true Whether to trigger search while typing.

placeholder string= - The placeholder text of the search input.

Slots

Name Description

head The head area of the filter panel. Displays the title prop by default.

no-data Content to be displayed when datasource is empty.

default

The content of the filter panel.

Name	Type	Description
`items`	`Array<Object>`	The filtered items from the `datasource` prop and shares the same type with `datasource`.