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>

    var areaData = {areaShow:false,//是否显示区选择divtabShow: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})