需求： 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/[email protected]/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/[email protected]/dist/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="plugins/vue/vue-resource.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuex.min.js"></script>
<script src="https://unpkg.com/[email protected]/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
})