vue-dropdown-filter v0.0.2

dropdown-filter

a dropdown filter component that's based on element-ui.

Install

npm install vue-dropdown-filter -S

Quick Start

import Vue from 'vue'
import DropdownFilter from 'vue-dropdown-filter'
# Vue.component('vue-dropdown-filter', DropdownFilter) # 可以指定组件名称
Vue.use(DropdownFilter) # 组件名称 `vue-dropdown-filter`

For more information, please refer to DropdownFilter in our documentation.

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for demo with minification
npm run demo:build

# build for gh-pages with minification
npm run demo:prepublish

# build for production with minification
npm run build

# generate gh-pages
npm run deploy

LICENSE

MIT

截图

基本用法

<template>
  <div class="vd-demo__block vd-demo__block-2">
    <vue-dropdown-filter
      v-model="filter"
      :options="filterOptions"
      :render-content="renderContent"
      @change="handleFilter"
    />
  </div>
</template>

<script>

<script>
  export default {
    data () {
      return {
        filter: '',
        filterOptions: [{
          label: '公开项',
          value: 'public',
          disabled: true
        }, {
          label: '未公开项',
          value: 'private'
        }, {
          label: '租户内',
          value: 'within'
        }, {
          label: '租户外',
          value: 'outside',
          className: 'class-name-test'
        }]
      }
    },
    methods: {
      handleFilter(value) {
        console.log(value);
      },
      renderContent(h, data) {
        return (<span>自定义渲染_{data.label}</span>);
      }
    }
  }
</script>

DropdownFilter props

Option props

DropdownFilter events

DropdownFilter slot