vue选择器组件_Vue 2的层叠选择器的一个可爱组件

vue选择器组件

级联 (v-cascade)

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

带有vue.js的层叠选择器的一个可爱组件(同时支持PC和Mobile)

View demo 查看演示 Download Source 下载源

安装 (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-modal	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

名称	类型	默认	描述
模态	布尔型	假	级联显示和隐藏
数据	数组	[]	级联列表数据，必须使用固定格式。{'key'：key，'label'，'children'：[]}， children是一个选项键
标题	数组	[]	级联头衔
addClass	串	''	向级联添加额外的外部类
可过滤的	布尔型	假	启用级联的本地搜索，如果为true，则有级联搜索的输入
远程	布尔型	假	启用级联的远程搜索，如果此项为true，则需要在级联中添加remoteMethod以获得远程数据
remoteMethod	功能	没有	获取远程数据的功能，您需要将响应数据格式化为已接受的级联格式(有关详细信息，请参见data道具)
装货	布尔型	假	启用加载程序显示或隐藏
可滚动	布尔型	假	文档页面是否可以滚动

大事记 (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

名称	描述	返回
成功	成功选择级联后的回调功能	选定值的Json
取消	取消级联选择后的回调功能	没有
查询变更	搜索查询更改后的回调功能	查询值

去做 (Todo)

• [x] Transitions, Animations

  [x]过渡，动画

• [ ] Multiple

  [ ] 多

• [ ] Globle event

  []重大事件

• [ ] ...

  [] ...

翻译自: https://vuejsexamples.com/a-lovely-component-of-cascade-selector-with-vue-2/

vue选择器组件