您的位置：首页 > 产品设计 > UI/UE

用Vue.js来实现城市三级联动

2016-12-21 10:46 639 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.selBoxList{width:100%;margin-top:50px;text-align:center;}
.selBoxList .selSt{min-width:100px;display:inline-block;position:relative;;}
.selBoxList .selSt .current{width:100%;padding:0 10px;font-size:16px;line-height:30px;cursor:pointer;float:left;border:1px solid #ccc;background:#fff;box-sizing: border-box;position:relative;z-index: 2;}
.selBoxList .selSt .box{width:100%;position:absolute;left:0;top:30px;border:1px solid #ccc;max-height:300px;overflow:auto;box-sizing: border-box;}
.selBoxList .selSt .box span{width:100%;font-size:16px;line-height:30px;cursor:pointer;border-top:1px solid #ccc;float:left;}
.selBoxList .selSt .box span:hover{background:#f1f1f1;}
</style>
</head>
<body>
<div class="selBoxList">
<span class="selSt selProvince">
<span class="current" @click="toggleSelect(0)"><span v-if="!proIndex">--请选择--</span><span v-if="proIndex">{{cityArr[proIndex].name}}</span></span>
<span class="box" v-show="showSelect === 0">
<span v-for="n in cityArr.length" @click="setOption('proIndex', $index)">{{cityArr
.name}}</span>
</span>
</span>
<span class="selSt selCity">
<span class="current" @click="toggleSelect(1)"><span v-if="!cityIndex">--请选择--</span><span v-if="cityIndex">{{cityArr[proIndex].sub[cityIndex].name}}</span></span>
<span class="box" v-show="showSelect === 1">
<span v-if="cityArr[proIndex].sub.length" v-for="n in cityArr[proIndex].sub.length" @click="setOption('cityIndex', $index)">{{cityArr[proIndex].sub
.name}}</span>
</span>
</span>
<span class="selSt selArea">
<span class="current" @click="toggleSelect(2)"><span v-if="!areaIndex">--请选择--</span><span v-if="areaIndex">{{cityArr[proIndex].sub[cityIndex].sub[areaIndex].name}}</span></span>
<span class="box" v-show="showSelect === 2">
<span v-if="cityArr[proIndex].sub[cityIndex].sub.length" v-for="n in cityArr[proIndex].sub[cityIndex].sub.length" @click="setOption('areaIndex', $index)">{{cityArr[proIndex].sub[cityIndex].sub
.name}}</span>
</span>
</span>
</div>
<script src="http://passport.baidu.com/js/sitedata_bas.js" charset="GBK"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script>
var vm = new Vue({
el: 'body',
data: {
cityArr: arrCity,
proIndex: 0,
cityIndex: 0,
areaIndex: 0,
showSelect: ''
},
methods: {
setOption: function(type, index){
this[type] = index;
if(type === 'proIndex'){
this.cityIndex = 0;
this.areaIndex = 0;
}
if(type === 'cityIndex'){
this.areaIndex = 0;
}
this.showSelect = '';
},
toggleSelect: function(n){
if(this.showSelect === n){
this.showSelect = '';
}else{
this.showSelect = n;
}
}
}
})
</script>
</body>
</html>

来自：http://www.qdfuns.com/notes/15309/d4e088dd33ec99fb8811202bb879065e.html


　　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航