本文实例为大家分享了vue移动端城市三级联动组件的具体代码，供大家参考，具体内容如下
先看效果图
以下组件代码
<template>
<div class=\"address\">
<div class=\"addressboxbg\" @click=\"cancel\"></div>
<div class=\"addressbox\">
<p class=\"text_btn\"><span style=\"float:left;\" @click=\"cancel\">取消</span><span style=\"float:right;color:#107E52;\" @click=\"complete\">完成</span></p>
<div class=\"addressSelect\" >
<div class=\"selectbox\"></div>
<ul @touchstart=\"touchStart($event,\'province\')\" @touchmove=\"touchMove($event,\'province\')\" @touchend=\"touchEnd($event,\'province\')\" :style=\"provinceStyle\" :class=\"[{\'selectAni\':addSelect}]\">
<li v-for=\"(item,index) in list\" :class=\"[{\'addSelectActive\':index == provinceIndex}]\" :key=\"index\">{{item.name}}</li>
</ul>
<ul @touchstart=\"touchStart($event,\'city\')\" @touchmove=\"touchMove($event,\'city\')\" @touchend=\"touchEnd($event,\'city\')\" :style=\"cityStyle\" :class=\"[{\'selectAni\':addSelect}]\">
<li v-for=\"(item,index) in list2\" :class=\"[{\'addSelectActive\':index == cityIndex}]\" :key=\"index\">{{item.name}}</li>
</ul>
<ul @touchstart=\"touchStart($event,\'district\')\" @touchmove=\"touchMove($event,\'district\')\" @touchend=\"touchEnd($event,\'district\')\" :style=\"districtStyle\" :class=\"[{\'selectAni\':addSelect}]\">
<li v-for=\"(item,index) in list3\" :class=\"[{\'addSelectActive\':index == districtIndex}]\" :key=\"index\" >{{item.name}}</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
list: [],
list2: [],
list3: [],
provinceStyle: {
WebkitTransform: \'translate3d(0px,0px,0px)\'
},
cityStyle: {
WebkitTransform: \'translate3d(0px,0px,0px)\'
},
districtStyle: {
WebkitTransform: \'translate3d(0px,0px,0px)\'
},
startTop: 0,
provinceIndex: 0,
cityIndex: 0,
districtIndex: 0,
translateY: 0,
maxScroll: 0,
addHeight: 0,
addSelect: false,
provinceVal: \'\',
cityVal: \'\',
areaVal: \'\',
val: {
\'provinceVal\': \'\',
\'cityVal\': \'\',
\'areaVal\': \'\'
}
}
},
watch: {
// 监听省滑动
provinceVal (value) {
this.$axiosGet(this.$api.area, {parentId: value}).then((res) => {
if (res.code === 1) {
this.list2 = res.data.length > 1 ? res.data : [{name: \'-\'}]
if (res.data.length < 1) {
this.list3 = [{name: \'-\'}]
}
this.cityVal = this.list2[0].value
}
})
},
// 监听市滑动
cityVal (value) {
if (value) {
this.$axiosGet(this.$api.area, {parentId: value}).then((res) => {
if (res.code === 1) {
this.list3 = res.data.length > 1 ? res.data : [{name: \'-\'}]
}
})
}
}
},
created () {
// 初始化数据
// 拿省的数据
this.$axiosGet(this.$api.area).then((res) => {
if (res.code === 1) {
this.list = res.data
this.val.provinceVal = this.list[0]
}
})
// 拿市区的数据
this.$axiosGet(this.$api.area, {parentId: \'1\'}).then((res) => {
if (res.code === 1) {
this.list2 = res.data
this.val.cityVal = this.list2[0]
}
})
this.val.areaVal = {
\'name\': \'\',
\'value\': \'\'
}
// 第一条数据为直辖市 so \'-\' 符号表示为第三列
this.list3 = [{name: \'-\'}]
},
methods: {
// 点击取消
cancel () {
this.$emit(\'cancel\', false)
},
// 点击完成
complete () {
if (!this.val.areaVal.value) {
this.val.areaVal = {
\'name\': \'\',
\'value\': \'\'
}
}
if (!this.val.cityVal.value) {
this.val.cityVal = {
\'name\': \'\',
\'value\': \'\'
}
}
this.$emit(\'complete\', this.val)
},
// 滑动开始
touchStart (e, val) {
e.preventDefault()
this.addSelect = false
this.addHeight = e.currentTarget.children[0].offsetHeight
this.maxScroll = this.addHeight * e.currentTarget.children.length
this.startTop = e.targetTouches[0].pageY
switch (val) {
case \'province\':
this.translateY = parseInt(this.provinceStyle.WebkitTransform.slice(this.provinceStyle.WebkitTransform.indexOf(\',\') + 1, this.provinceStyle.WebkitTransform.lastIndexOf(\',\')))
break
case \'city\':
this.translateY = parseInt(this.cityStyle.WebkitTransform.slice(this.cityStyle.WebkitTransform.indexOf(\',\') + 1, this.cityStyle.WebkitTransform.lastIndexOf(\',\')))
break
case \'district\':
this.translateY = parseInt(this.districtStyle.WebkitTransform.slice(this.districtStyle.WebkitTransform.indexOf(\',\') + 1, this.districtStyle.WebkitTransform.lastIndexOf(\',\')))
break
default:
break
}
},
// 滑动进行中
touchMove (e, val) {
e.preventDefault()
switch (val) {
case \'province\':
if ((e.targetTouches[0].pageY - this.startTop + this.translateY) > 0) {
this.provinceStyle.WebkitTransform = \'translate3d(0px,0px,0px)\'
} else if ((e.targetTouches[0].pageY - this.startTop + this.translateY) < -(this.maxScroll - this.addHeight)) {
this.provinceStyle.WebkitTransform = \'translate3d(0px,\' + -(this.maxScroll - this.addHeight) + \'px,0px)\'
} else {
this.provinceStyle.WebkitTransform = \'translate3d(0px,\' + (e.targetTouches[0].pageY - this.startTop + this.translateY) + \'px,0px)\'
}
break
case \'city\':
if ((e.targetTouches[0].pageY - this.startTop + this.translateY) > 0) {
this.cityStyle.WebkitTransform = \'translate3d(0px,0px,0px)\'
} else if ((e.targetTouches[0].pageY - this.startTop + this.translateY) < -(this.maxScroll - this.addHeight)) {
this.cityStyle.WebkitTransform = \'translate3d(0px,\' + -(this.maxScroll - this.addHeight) + \'px,0px)\'
} else {
this.cityStyle.WebkitTransform = \'translate3d(0px,\' + (e.targetTouches[0].pageY - this.startTop + this.translateY) + \'px,0px)\'
}
break
case \'district\':
if ((e.targetTouches[0].pageY - this.startTop + this.translateY) > 0) {
this.districtStyle.WebkitTransform = \'translate3d(0px,0px,0px)\'
} else if ((e.targetTouches[0].pageY - this.startTop + this.translateY) < -(this.maxScroll - this.addHeight)) {
this.districtStyle.WebkitTransform = \'translate3d(0px,\' + -(this.maxScroll - this.addHeight) + \'px,0px)\'
} else {
this.districtStyle.WebkitTransform = \'translate3d(0px,\' + (e.targetTouches[0].pageY - this.startTop + this.translateY) + \'px,0px)\'
}
break
default:
break
}
},
// 滑动结束
touchEnd (e, val) {
e.preventDefault()
this.addSelect = true
switch (val) {
case \'province\':
let provinceTranslateY = parseInt(this.provinceStyle.WebkitTransform.slice(this.provinceStyle.WebkitTransform.indexOf(\',\') + 1, this.provinceStyle.WebkitTransform.lastIndexOf(\',\')))
this.provinceIndex = -Math.round(provinceTranslateY / this.addHeight)
this.provinceStyle.WebkitTransform = \'translate3d(0px,\' + (Math.round(provinceTranslateY / this.addHeight) * this.addHeight) + \'px,0px)\'
this.cityStyle.WebkitTransform = this.districtStyle.WebkitTransform = \'translate3d(0px,0px,0px)\'
this.cityIndex = this.districtIndex = 0
break
case \'city\':
let cityTranslateY = parseInt(this.cityStyle.WebkitTransform.slice(this.cityStyle.WebkitTransform.indexOf(\',\') + 1, this.cityStyle.WebkitTransform.lastIndexOf(\',\')))
this.cityIndex = -Math.round(cityTranslateY / this.addHeight)
this.cityStyle.WebkitTransform = \'translate3d(0px,\' + (Math.round(cityTranslateY / this.addHeight) * this.addHeight) + \'px,0px)\'
this.districtStyle.WebkitTransform = \'translate3d(0px,0px,0px)\'
this.districtIndex = 0
break
case \'district\':
let districtTranslateY = parseInt(this.districtStyle.WebkitTransform.slice(this.districtStyle.WebkitTransform.indexOf(\',\') + 1, this.districtStyle.WebkitTransform.lastIndexOf(\',\')))
this.districtIndex = -Math.round(districtTranslateY / this.addHeight)
this.districtStyle.WebkitTransform = \'translate3d(0px,\' + (Math.round(districtTranslateY / this.addHeight) * this.addHeight) + \'px,0px)\'
break
default:
break
}
// 滑动结束后 处理数据
this.dataProcessing()
},
// 数据处理
dataProcessing () {
// 滑动数据传输 数据处理
this.val.provinceVal = this.list[this.provinceIndex]
this.provinceVal = this.list[this.provinceIndex].value
this.val.cityVal = this.list2[this.cityIndex]
this.cityVal = this.list2[this.cityIndex].value
this.val.areaVal = this.list3[this.districtIndex]
this.areaVal = this.list3[this.districtIndex].value
// this.val.cityVal = this.addressData[this.provinceIndex].city[this.cityIndex].name
// this.val.areaVal = this.addressData[this.provinceIndex].city[this.cityIndex].area[this.districtIndex]
// this.$emit(\'getAddress\', this.val)
// this.test([this.val.provinceVal, this.cityIndex, this.districtIndex])
}
}
}
</script>
<style>
.address{
position:absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.address .addressbox{
height: 40%;
position: absolute;
z-index: 101;
width: 100%;
max-height: 100%;
overflow: hidden;
background: #fff;
bottom: 0px;
}
.address .addressbox .text_btn{
height: 30px;
font-size: 14px;
line-height: 30px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 0 10px;
background: #F9F9F9;
}
.addressSelect .selectbox{
width: 100%;
height: 26px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-top: 60px;
background: #F9F9F9;
}
.address .addressboxbg{
position: absolute;
left: 0;
top: 0;
z-index: 100;
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
}
.addressSelect{width: 100%; position: relative; background: #fff; height: 190px;overflow: hidden; -webkit-mask-box-image: linear-gradient(0deg,transparent,transparent 5%,#fff 20%,#fff 80%,transparent 95%,transparent); font-size: 14px;}
.addressSelect ul{width: 33.333333%; position: absolute; left: 0; top:60px; -webkit-transform-style: preserve-3d; -webkit-backface-visibility:hidden; text-align: center; padding-left: 0;}
.addressSelect ul li{white-space : nowrap;overflow: hidden; text-overflow:ellipsis; color:rgba(0,0,0,.54); padding: 3px 0;}
.addressSelect ul:nth-of-type(2){left: 33.333333%;}
.addressSelect ul:nth-of-type(3){left: 66.666666%;}
.addressSelect ul li.addSelectActive{color:rgba(0,0,0,.87); transform: scale(1.1); transition: 0.5s;}
.selectAni{transition: 0.8s;}
</style>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容