v-cascade

A lovely component of cascade selector with vue.js (Support both of PC and Mobile) 中文文档

Introduction

Demo

Screenshot

basic-selector

remote-selector

Install

// npm
$ npm install v-cascade --save

// or

// cdn
<script src="https://unpkg.com/v-cascade/lib/v-cascade.min.js"></script>

Usage

<v-cascade
  v-model="locationModal"
  :data="location"
  :title="['省份','城市','区县']"
  addClass="cascade-location"
  @success="locationSuccess"
  @cancel="cancel"
></v-cascade>

// ES6
import vCascade from 'v-cascade'

Vue.use(vCascade)

Props

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- | | v-model| Boolean | false | Cascade display and hide | | data | Array | [] | Cascade list data, Must use a fixed format.{'key':key,'label','children':[]},children is a option key| | title | Array | [] | Cascade top title | | addClass | String | '' | Add an extra outer class to the cascade| | filterable | Boolean | false | enable the cascade's local search,if it is true,there are a input of search in cascade | | remote | Boolean | false | enable the cascade's remote search,if this item is true, you need to add a remoteMethod to the cascade to get the remote data| | remoteMethod | Function | none | A function to get remote data,you need format the reponse data to accepted format of the cascade (See data prop for details) | | loading | Boolean | false | enable the loader display or hide | | scrollable | Boolean | false | whether the document page can be scrolled | | placeholder | String | Please enter... | default placeholder for the search box | | noFoundStr | String | Nothing found, click Button to use custom content | No search returns a copy when the result is empty | | spLevel | Number | 9999 | Maximum number of levels selected |

Events

| Name | Description | return | | ---- | ------------ | ------ | | success | Callback function after successful cascade selection | Json of Selected value | | cancel | Callback function after cancel cascade selection | none | | on-query-change | Callback function after search query changed | query value |

Todo

• [x] Transitions, Animations
• [ ] Multiple
• [ ] Globle event
• [ ] ...

Contribute

Feel free to open an issue if you find a bug.

Feature requests and PRs are welcome.

LICENSE

MIT Licensed. See LICENSE.