多级组件

+<template>
+    <uc-multilevel></uc-multilevel>
+</template>
+
+<script>
+    import multilevel from '../../../../components/multilevel/index';
+
+    export default {
+        components:{
+            ucMultilevel: multilevel
+        }
+    }
+</script>

@@ -3,6 +3,6 @@ var Vue = require("vue");
 new Vue({
 new Vue({
     el: 'body',
     el: 'body',
     components: {
     components: {
-        app:require("./app.vue")
+        app:require("./app1.vue")
     }
     }
 });
 });

+<style>
+    .multilevel{position: relative; font-family: 'microsoft yahei'; font-size:14px; color: #585858}
+    .multilevel a,.multilevel span{cursor: pointer; text-decoration: none; color:#585858}
+
+    .picker-data{display: inline-block; width: 250px; height: 34px; border: 1px solid #ccd0d4; padding:6px 12px; position: relative; border-radius: 3px}
+    .placeholder{display: block}
+    .select-item a:hover{background: #CCCCCC}
+    .select-item i{margin: 0 2px}
+    .arrow{position: absolute; top: 50%; right: 8px; width: 10px; margin-top: -3px; height: 5px; background: url(./drop-arrow.png) -10px -25px no-repeat}
+
+    .picker-dropdown{position: absolute; top: 34px; left: 1px;}
+    .select-wrap{box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); border-radius: 4px; width: 300px}
+
+    .select-tab{background: #f0f0f0; border-bottom: 1px solid #ccc;}
+    .select-tab a{display: inline-block; padding: 8px 15px; border-left: 1px solid #ccc; border-bottom: 1px solid transparent; margin-bottom: -1px}
+    .select-tab a:first-child {  border-left: none}
+    .select-tab a.active{background: #FFFFFF; border-bottom: 1px solid #FFFFFF;}
+
+    .select-content{background: #FFFFFF;}
+    .levelContent{clear: both; list-style: none; margin: 0; padding: 10px;}
+    .levelContent li{display: inline-block; padding: 5px 10px;}
+</style>
+
+<template>
+    <div class="multilevel">
+        <span class="picker-data">
+            <span v-show="dataList.length==0" class="placeholder" @click="showDropdown">请选择类目</span>
+            <span v-show="dataList.length>0" class="data">
+                <span class="select-item" v-for="data in dataList">
+                    <i v-if="$index>0">/</i>
+                    <a href="javascript:" @click="selectTab($index)">{{data}}</a>
+                </span>
+            </span>
+            <div class="arrow"></div>
+        </span>
+
+        <div class="picker-dropdown" v-show="isShowDropdown">
+            <div class="select-wrap">
+                <div class="select-tab">
+                    <a v-for="tab in levelContent" class="level {{$index==activeTab?'active':''}}" @click="selectTab($index)">{{tab.name}}</a>
+                </div>
+                <div class="select-content">
+                    <ul v-for="content in levelContent" class="levelContent" v-show="activeTab==$index">
+                        <li v-for="item in content.list"><a href="javascript:" @click="selectItem(item)">{{item}}</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                levelContent:[
+                    {name:"一级目录", list:["a1","a2","a3"]},
+                    {name:"二级目录", list:["b1","b2","b3"]},
+                    {name:"三级目录", list:["c1","c2","c3"]}
+                ],
+                isShowDropdown:false,
+                activeTab:0,
+                maxTab:2,
+                dataList:[]
+            }
+        },
+        computed:{
+            dataArray(){
+                console.log(this.dataList);
+                return this.dataList.join('/');
+            }
+        },
+        methods: {
+            showDropdown(){
+                if(this.isShowDropdown){
+                    this.isShowDropdown = false;
+                }else{
+                    this.isShowDropdown = true;
+                }
+            },
+
+            selectTab(index){
+                this.isShowDropdown = true;
+                this.activeTab = index;
+            },
+
+            selectItem(item){
+                this.dataList.$set(this.activeTab,item);
+                this.dataList.splice(this.activeTab+1, this.dataList.length-this.activeTab-1);
+
+                if(this.activeTab < this.maxTab){
+                    this.activeTab ++;
+                }else{
+                    this.activeTab = 0;
+                    this.isShowDropdown = false;
+                }
+            }
+        }
+    }
+</script>