当前位置：Gxlcms > JavaScript > vue移动端城市三级联动组件使用详解

vue移动端城市三级联动组件使用详解

时间：2021-07-01 10:21:17 帮助过：14人阅读

本文实例为大家分享了vue移动端城市三级联动组件的具体代码，供大家参考，具体内容如下

先看效果图

以下组件代码

  1. <template>
  2.  <div class="address">
  3.   <div class="addressboxbg" @click="cancel"></div>
  4.   <div class="addressbox">
  5.    <p class="text_btn"><span style="float:left;" @click="cancel">取消</span><span style="float:right;color:#107E52;" @click="complete">完成</span></p>
  6.    <div class="addressSelect" >
  7.     <div class="selectbox"></div>
  8.     <ul @touchstart="touchStart($event,'province')" @touchmove="touchMove($event,'province')" @touchend="touchEnd($event,'province')" :style="provinceStyle" :class="[{'selectAni':addSelect}]">
  9.      <li v-for="(item,index) in list" :class="[{'addSelectActive':index == provinceIndex}]" :key="index">{{item.name}}</li>
  10.     </ul>
  11.     <ul @touchstart="touchStart($event,'city')" @touchmove="touchMove($event,'city')" @touchend="touchEnd($event,'city')" :style="cityStyle" :class="[{'selectAni':addSelect}]">
  12.      <li v-for="(item,index) in list2" :class="[{'addSelectActive':index == cityIndex}]" :key="index">{{item.name}}</li>
  13.     </ul>
  14.     <ul @touchstart="touchStart($event,'district')" @touchmove="touchMove($event,'district')" @touchend="touchEnd($event,'district')" :style="districtStyle" :class="[{'selectAni':addSelect}]">
  15.      <li v-for="(item,index) in list3" :class="[{'addSelectActive':index == districtIndex}]" :key="index" >{{item.name}}</li>
  16.     </ul>
  17.    </div>
  18.   </div>
  19.  </div>
  20. </template>
  21.  
  22. <script>
  23. export default {
  24.  data () {
  25.   return {
  26.    list: [],
  27.    list2: [],
  28.    list3: [],
  29.    provinceStyle: {
  30.     WebkitTransform: 'translate3d(0px,0px,0px)'
  31.    },
  32.    cityStyle: {
  33.     WebkitTransform: 'translate3d(0px,0px,0px)'
  34.    },
  35.    districtStyle: {
  36.     WebkitTransform: 'translate3d(0px,0px,0px)'
  37.    },
  38.    startTop: 0,
  39.    provinceIndex: 0,
  40.    cityIndex: 0,
  41.    districtIndex: 0,
  42.    translateY: 0,
  43.    maxScroll: 0,
  44.    addHeight: 0,
  45.    addSelect: false,
  46.    provinceVal: '',
  47.    cityVal: '',
  48.    areaVal: '',
  49.    val: {
  50.     'provinceVal': '',
  51.     'cityVal': '',
  52.     'areaVal': ''
  53.    }
  54.   }
  55.  },
  56.  watch: {
  57.   // 监听省滑动
  58.   provinceVal (value) {
  59.    this.$axiosGet(this.$api.area, {parentId: value}).then((res) => {
  60.     if (res.code === 1) {
  61.      this.list2 = res.data.length > 1 ? res.data : [{name: '-'}]
  62.      if (res.data.length < 1) {
  63.       this.list3 = [{name: '-'}]
  64.      }
  65.      this.cityVal = this.list2[0].value
  66.     }
  67.    })
  68.   },
  69.   // 监听市滑动
  70.   cityVal (value) {
  71.    if (value) {
  72.     this.$axiosGet(this.$api.area, {parentId: value}).then((res) => {
  73.      if (res.code === 1) {
  74.       this.list3 = res.data.length > 1 ? res.data : [{name: '-'}]
  75.      }
  76.     })
  77.    }
  78.   }
  79.  },
  80.  created () {
  81.   // 初始化数据
  82.   // 拿省的数据
  83.   this.$axiosGet(this.$api.area).then((res) => {
  84.    if (res.code === 1) {
  85.     this.list = res.data
  86.     this.val.provinceVal = this.list[0]
  87.    }
  88.   })
  89.   // 拿市区的数据
  90.   this.$axiosGet(this.$api.area, {parentId: '1'}).then((res) => {
  91.    if (res.code === 1) {
  92.     this.list2 = res.data
  93.     this.val.cityVal = this.list2[0]
  94.    }
  95.   })
  96.   this.val.areaVal = {
  97.    'name': '',
  98.    'value': ''
  99.   }
  100.   // 第一条数据为直辖市 so '-' 符号表示为第三列
  101.   this.list3 = [{name: '-'}]
  102.  },
  103.  methods: {
  104.   // 点击取消
  105.   cancel () {
  106.    this.$emit('cancel', false)
  107.   },
  108.   // 点击完成
  109.   complete () {
  110.    if (!this.val.areaVal.value) {
  111.     this.val.areaVal = {
  112.      'name': '',
  113.      'value': ''
  114.     }
  115.    }
  116.    if (!this.val.cityVal.value) {
  117.     this.val.cityVal = {
  118.      'name': '',
  119.      'value': ''
  120.     }
  121.    }
  122.    this.$emit('complete', this.val)
  123.   },
  124.   // 滑动开始
  125.   touchStart (e, val) {
  126.    e.preventDefault()
  127.    this.addSelect = false
  128.    this.addHeight = e.currentTarget.children[0].offsetHeight
  129.    this.maxScroll = this.addHeight * e.currentTarget.children.length
  130.    this.startTop = e.targetTouches[0].pageY
  131.    switch (val) {
  132.     case 'province':
  133.      this.translateY = parseInt(this.provinceStyle.WebkitTransform.slice(this.provinceStyle.WebkitTransform.indexOf(',') + 1, this.provinceStyle.WebkitTransform.lastIndexOf(',')))
  134.      break
  135.     case 'city':
  136.      this.translateY = parseInt(this.cityStyle.WebkitTransform.slice(this.cityStyle.WebkitTransform.indexOf(',') + 1, this.cityStyle.WebkitTransform.lastIndexOf(',')))
  137.      break
  138.     case 'district':
  139.      this.translateY = parseInt(this.districtStyle.WebkitTransform.slice(this.districtStyle.WebkitTransform.indexOf(',') + 1, this.districtStyle.WebkitTransform.lastIndexOf(',')))
  140.      break
  141.     default:
  142.      break
  143.    }
  144.   },
  145.   // 滑动进行中
  146.   touchMove (e, val) {
  147.    e.preventDefault()
  148.    switch (val) {
  149.     case 'province':
  150.      if ((e.targetTouches[0].pageY - this.startTop + this.translateY) > 0) {
  151.       this.provinceStyle.WebkitTransform = 'translate3d(0px,0px,0px)'
  152.      } else if ((e.targetTouches[0].pageY - this.startTop + this.translateY) < -(this.maxScroll - this.addHeight)) {
  153.       this.provinceStyle.WebkitTransform = 'translate3d(0px,' + -(this.maxScroll - this.addHeight) + 'px,0px)'
  154.      } else {
  155.       this.provinceStyle.WebkitTransform = 'translate3d(0px,' + (e.targetTouches[0].pageY - this.startTop + this.translateY) + 'px,0px)'
  156.      }
  157.      break
  158.     case 'city':
  159.      if ((e.targetTouches[0].pageY - this.startTop + this.translateY) > 0) {
  160.       this.cityStyle.WebkitTransform = 'translate3d(0px,0px,0px)'
  161.      } else if ((e.targetTouches[0].pageY - this.startTop + this.translateY) < -(this.maxScroll - this.addHeight)) {
  162.       this.cityStyle.WebkitTransform = 'translate3d(0px,' + -(this.maxScroll - this.addHeight) + 'px,0px)'
  163.      } else {
  164.       this.cityStyle.WebkitTransform = 'translate3d(0px,' + (e.targetTouches[0].pageY - this.startTop + this.translateY) + 'px,0px)'
  165.      }
  166.      break
  167.     case 'district':
  168.      if ((e.targetTouches[0].pageY - this.startTop + this.translateY) > 0) {
  169.       this.districtStyle.WebkitTransform = 'translate3d(0px,0px,0px)'
  170.      } else if ((e.targetTouches[0].pageY - this.startTop + this.translateY) < -(this.maxScroll - this.addHeight)) {
  171.       this.districtStyle.WebkitTransform = 'translate3d(0px,' + -(this.maxScroll - this.addHeight) + 'px,0px)'
  172.      } else {
  173.       this.districtStyle.WebkitTransform = 'translate3d(0px,' + (e.targetTouches[0].pageY - this.startTop + this.translateY) + 'px,0px)'
  174.      }
  175.      break
  176.     default:
  177.      break
  178.    }
  179.   },
  180.   // 滑动结束
  181.   touchEnd (e, val) {
  182.    e.preventDefault()
  183.    this.addSelect = true
  184.    switch (val) {
  185.     case 'province':
  186.      let provinceTranslateY = parseInt(this.provinceStyle.WebkitTransform.slice(this.provinceStyle.WebkitTransform.indexOf(',') + 1, this.provinceStyle.WebkitTransform.lastIndexOf(',')))
  187.      this.provinceIndex = -Math.round(provinceTranslateY / this.addHeight)
  188.      this.provinceStyle.WebkitTransform = 'translate3d(0px,' + (Math.round(provinceTranslateY / this.addHeight) * this.addHeight) + 'px,0px)'
  189.      this.cityStyle.WebkitTransform = this.districtStyle.WebkitTransform = 'translate3d(0px,0px,0px)'
  190.      this.cityIndex = this.districtIndex = 0
  191.      break
  192.     case 'city':
  193.      let cityTranslateY = parseInt(this.cityStyle.WebkitTransform.slice(this.cityStyle.WebkitTransform.indexOf(',') + 1, this.cityStyle.WebkitTransform.lastIndexOf(',')))
  194.      this.cityIndex = -Math.round(cityTranslateY / this.addHeight)
  195.      this.cityStyle.WebkitTransform = 'translate3d(0px,' + (Math.round(cityTranslateY / this.addHeight) * this.addHeight) + 'px,0px)'
  196.      this.districtStyle.WebkitTransform = 'translate3d(0px,0px,0px)'
  197.      this.districtIndex = 0
  198.      break
  199.     case 'district':
  200.      let districtTranslateY = parseInt(this.districtStyle.WebkitTransform.slice(this.districtStyle.WebkitTransform.indexOf(',') + 1, this.districtStyle.WebkitTransform.lastIndexOf(',')))
  201.      this.districtIndex = -Math.round(districtTranslateY / this.addHeight)
  202.      this.districtStyle.WebkitTransform = 'translate3d(0px,' + (Math.round(districtTranslateY / this.addHeight) * this.addHeight) + 'px,0px)'
  203.      break
  204.     default:
  205.      break
  206.    }
  207.    // 滑动结束后 处理数据
  208.    this.dataProcessing()
  209.   },
  210.   // 数据处理
  211.   dataProcessing () {
  212.    // 滑动数据传输 数据处理
  213.    this.val.provinceVal = this.list[this.provinceIndex]
  214.    this.provinceVal = this.list[this.provinceIndex].value
  215.    this.val.cityVal = this.list2[this.cityIndex]
  216.    this.cityVal = this.list2[this.cityIndex].value
  217.    this.val.areaVal = this.list3[this.districtIndex]
  218.    this.areaVal = this.list3[this.districtIndex].value
  219.    // this.val.cityVal = this.addressData[this.provinceIndex].city[this.cityIndex].name
  220.    // this.val.areaVal = this.addressData[this.provinceIndex].city[this.cityIndex].area[this.districtIndex]
  221.    // this.$emit('getAddress', this.val)
  222.    // this.test([this.val.provinceVal, this.cityIndex, this.districtIndex])
  223.   }
  224.  }
  225. }
  226. </script>
  227.  
  228. <style>
  229. .address{
  230.  position:absolute;
  231.  top: 0px;
  232.  bottom: 0px;
  233.  left: 0px;
  234.  right: 0px;
  235. }
  236. .address .addressbox{
  237.  height: 40%;
  238.  position: absolute;
  239.  z-index: 101;
  240.  width: 100%;
  241.  max-height: 100%;
  242.  overflow: hidden;
  243.  background: #fff;
  244.  bottom: 0px;
  245. }
  246. .address .addressbox .text_btn{
  247.  height: 30px;
  248.  font-size: 14px;
  249.  line-height: 30px;
  250.  border-top: 1px solid #ccc;
  251.  border-bottom: 1px solid #ccc;
  252.  padding: 0 10px;
  253.  background: #F9F9F9;
  254. }
  255. .addressSelect .selectbox{
  256.  width: 100%;
  257.  height: 26px;
  258.  border-top: 1px solid #ccc;
  259.  border-bottom: 1px solid #ccc;
  260.  margin-top: 60px;
  261.  background: #F9F9F9;
  262. }
  263. .address .addressboxbg{
  264.  position: absolute;
  265.  left: 0;
  266.  top: 0;
  267.  z-index: 100;
  268.  width: 100%;
  269.  height: 100%;
  270.  background: rgba(0,0,0,.7);
  271. }
  272. .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;}
  273. .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;}
  274. .addressSelect ul li{white-space : nowrap;overflow: hidden; text-overflow:ellipsis; color:rgba(0,0,0,.54); padding: 3px 0;}
  275. .addressSelect ul:nth-of-type(2){left: 33.333333%;}
  276. .addressSelect ul:nth-of-type(3){left: 66.666666%;}
  277. .addressSelect ul li.addSelectActive{color:rgba(0,0,0,.87); transform: scale(1.1); transition: 0.5s;}
  278. .selectAni{transition: 0.8s;}
  279. </style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！