需求： 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 })