voinc+vue实现级联选择

需求： vonic中实现级联选择

<!DOCTYPE html>
<html>
<head>
    <title>下拉框</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.css">
    <style>
        .areaCom .tab-item{float:left; width:33%!important; flex:none;}
        .areaCom .page-content{ padding-top:92px!important;}
    </style>
</head>
<body>

<von-app></von-app>

<script type="text/x-template" id="index">
    <div class="ss" v-nav="{ title: '首页' }">
        <div class="list list-borderless hl-list list-ios von-cascade areaCom">
            <label class="item item-ios item-icon-right" v-on:click="areaSel" style="margin-top: 80px;">
                <span>下拉选择</span> <i class="icon ion-ios-arrow-right"></i>
                <span class="item-note">{{area}}{{street}}{{community}}</span>
                <div class="hairline-bottom"></div>
            </label>
        </div>
        <div class="areaCom von-cascade-panel active" v-if="areaShow" style="height:300px">
            <div class="title">选择</div>
            <div class="page has-navbar">
                <div class="tabs-striped tabs-top tabs-background-light tabs-color-positive">
                    <div class="tabs">
                        <a class="tab-item" v-bind:class="{'active':tabShow==1}" v-on:click="areaLi(1)">{{area}}</a>
                        <a class="tab-item" v-bind:class="{'active':tabShow==2}" v-on:click="areaLi(2)" v-if="streetList.length>0">{{street}}</a>
                        <a class="tab-item" v-bind:class="{'active':tabShow==3}" v-on:click="areaLi(3)" v-if="communityList.length>0">{{community}}</a>
                    </div>
                </div>
                <div class="page-content" v-if="tabShow==1">
                    <div class="list list-borderless options">
                        <div class="item" v-for="(item,index) in areaList" v-on:click="reStreet(item)">
                            <div class="hairline-top"></div>
                            <span>{{item}}</span>
                            <div class="hairline-bottom" v-if="index!=areaList.length-1"></div>
                        </div>
                    </div>
                </div>
                <div class="page-content" v-if="tabShow==2">
                    <div class="list list-borderless options">
                        <div class="item" v-for="(item,index) in streetList" v-on:click="reCommunity(item)">
                            <div class="hairline-top"></div>
                            <span>{{item}}</span>
                            <div class="hairline-bottom" v-if="index!=streetList.length-1"></div>
                        </div>
                    </div>
                </div>
                <div class="page-content" v-if="tabShow==3">
                    <div class="list list-borderless options">
                        <div class="item" v-for="(item,index) in communityList" v-on:click="areaComp(item)">
                            <div class="hairline-top"></div>
                            <span>{{item}}</span>
                            <div class="hairline-bottom" v-if="index!=communityList.length-1"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div von-backdrop="" class="backdrop visible active" v-if="areaShow" v-on:click="areaSelClose"></div>
    </div>
</script>

<script src="https://unpkg.com/axios@0.15.3/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>
<script src="plugins/vue/vue-resource.min.js"></script>
<script src="https://unpkg.com/vue-router@2.2.1/dist/vue-router.min.js"></script>
<script src="https://unpkg.com/vuex@2.2.1/dist/vuex.min.js"></script>
<script src="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.js"></script>

<script>引入下面的js</script> 

</body> 

</html>

js

    var areaData = {
        areaShow:false,//是否显示区选择div
        tabShow:1,//显示区, 街, 社区
        area: "请选择",//区名
        street:"",//街名
        community:"",//社区名
        areaList:["一区","二区"],//查询出来的区列表
        streetList:[],//查询出来的街列表
        communityList:[],//查询出来的社区列表
    };
    var index = {
        template: '#index',
        data: function(){
            return areaData;
        },
        created: function () {

        },
        methods: {
            areaSel: function () {//点击  下拉选择  初试弹出区选择
                var self = this;
                self.areaShow=true;
                self.tabShow=1;
            },
            areaSelClose: function () {//点击弹出框以外, 关闭弹出框
                var self = this;

                if(self.street=="请选择"){
                    alert("请选择街");
                    self.areaShow=false;
                    self.area="请选择";
                    self.street="";
                }else if(self.community=="请选择"){
                    alert("请选择社区");
                    self.streetList=[];
                    self.areaShow=false;
                    self.area="请选择";
                    self.street="";
                    self.community="";
                }else{
                    self.areaShow=false;
                }
            },

            areaLi: function (n) {//选择后,还没退出, 需要修改相应的位置,点击后弹出相应的列表
                var self = this;
                self.tabShow=n;
            },
            reStreet: function (name) {//查询街列表
                var self = this;
                /*Vue.resource("接口地址"+name).get().then(function (response) {
                    var data = response.data.data;
                    self.streetList= data;
                });*/
                self.streetList= ["一街","二街"];

                self.area=name;//将传过来的区名赋值给属性,并显示
                self.street="请选择";
                self.community="";
                self.tabShow=2;
            },
            reCommunity: function (name) {//查询社区列表
                var self = this;
                /*Vue.resource("接口地址"+name).get().then(function (response) {
                 var data = response.data.data;
                 self.communityList= data;
                 });*/
                self.communityList= ["一社区","二社区"];

                self.street=name;//将传过来的社区名赋值给属性,并显示
                self.community="请选择";

                self.tabShow=3;
            },
            areaComp: function (name) {//用来赋值最后的社区属性,并显示
                var self = this;
                self.community=name;
                self.areaSelClose();
            },
        }
    }

    var routes = [
        { path: '/', component: index }
    ]

    Vue.use(Vonic.app, {
        routes: routes
    })