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