vue-multi-layered-choose

Developing...

A Vue.js component that choose item from a multiple layered structure. eg. Choose a person from an organization structure, or choose a file from a file system

Installation

npm i --save vue-multi-layered-choose

Browser

Include the script file, then install the component with Vue.use(VueMultiLayeredChoose); e.g.:

<script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/vue-multi-layered-choose/vue-multi-layered-choose.min.js"></script>
<script type="text/javascript">
  Vue.use(VueMultiLayeredChoose);
</script>

Module

import VueMultiLayeredChoose from 'vue-multi-layered-choose';

Once installed, it can be used in a template as simply as:

<multi-layered-choose></multi-layered-choose>

Usage

Properties

Prop	Type	Description
initialPathItems	Array	Initial path items which will be displayed on the top
contentItems	Array	The content items which will be displayed on the body. You need change this after every path change
displayProp	String	The name of the property in path item and content item which is used to display, eg. 'name' of person object
isEnterable	Function	A function to judge whether a item is enterable
isDirectlyChoosable	Function	A function to judge whether a item can be choosed directly
maxHeight	String	If the list height exceed this, the list will be scrollable, eg. '16px'

Events

Event	Description	Parameters
on-enter-item	Enter some item	The item to enter, from pathItems or contentItems
on-choose-item	Choose the item which is not enterable	The chose item, from contentItems