VEUI

Examples

<template>
<article>
  <veui-filter-panel
    title="Browsers"
    :datasource="browsersDatasource"
  >
    <template #default="{ 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>

<style lang="less" scoped>
.item {
  padding: 8px 15px;
}
</style>

API

Props

Name Type Default Description

datasource Array<Object> [] Data source, with item type {label: string, ...}.

searchable boolean true Whether to allow searching.

filter

function

See description

Search filter function with signature function(keyword, item, index, datasource): boolean. Items with a return value of false will be filtered from the result.

Name	Type	Description
`keyword`	`string`	Search keyword.
`item`	`Object`	Current data node in the loop.
`index`	`number`	Index of the current data node in the sibling nodes.
`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 on input.

placeholder string - Placeholder for search box.

title string - Title of the filter panel.

Slots

Name Description

head Title area. Displays the title prop value by default.

no-data Content displayed when there is no data in the datasource.

default

Main content area.

Name	Type	Description
`items`	`Array<Object>`	Filtered data from `datasource`, with the same type as `datasource`.

Edit this page on GitHubEdit