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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue移动端城市三级联动组件使用详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8984字，纯文字阅读大概需要13分钟。

内容图文

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

先看效果图

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>

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

内容总结

以上是互联网集市为您收集整理的vue移动端城市三级联动组件使用详解全部内容，希望文章能够帮你解决vue移动端城市三级联动组件使用详解所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/330491.html

来源：【匿名】

【上一篇】vue eslint简要配置教程详解【下一篇】php怎么返回数据给vue

更多 ►

【vue移动端城市三级联动组件使用详解】教程文章相关的互联网学习教程文章

【安装步骤】一、安装node.js（node-v12.16.1-x64.msi）1.前往node.js官网下载并安装工具，这里安装路径选到D盘，D:\Program Files\nodejs 安装完毕后在命令行输入以下命令测试是否安装成功，正确会出现版本号npm -v2.改变原有的环境变量， (1)配置npm的全局模块的存放路径以及cache的路径，例如两个文件夹放在NodeJS的主目录下，便在NodeJs下建立"node_global"及"node_cache"两个文件夹，输入以下命令改变npm配置npm config set ...

vuex的使用详解大全【代码】【图】

引言：vue的vuex是一个全局状态管理工具，有强大的社区所贡献，方便达到一端改变全局改变功能，这里就不强调如何使用了，单独讲解一下如何更好的使用这个工具。先说一下这个使用的场景，如果仅是父子组件传值这个大可不必使用，当你用本地存储和广播事件都不能满足你的需求时，你就可以考虑使用vuex来管理你的数据了。使用方法：import Vue from ‘vue‘ import Vuex from ‘vuex‘ Vue.use(Vuex) let state = { //vuex的状态对象 ...

vuex基础详解及项目实例【代码】【图】

1、概念Vuex 是一个专为 Vue.js 的SPA单页组件化应用程序开发的状态管理模式插件，它包括State（数据源）、Getters（计算属性）、Modules（模块）、Mutations（事件）、Action（事件）。Action与Mutation的区别在于Mutation可以更改State，所以当Action要更改状态时通常是提交到Mutation中更改。2、安装2.1、安装完vue后就可安装vuex，本次示例建立在安装了vue-cli脚手架工具的基础上。安装vuex方法为在命令行输入：npm install vu...

【转】vue.js表单校验详解【代码】【图】

1.npm安装vue-validator$ npm install vue-validator代码示例:var Vue=require("vue"); var VueValidator=require("vue-validator"); Vue.use(VueValidator);2.直接使用script标签引入vue.js要下载vue-validator，那么进入cdn的地址https://cdn.bootcss.com/vue-validator/2.1.3/vue-validator.js把内容复制下来就好了。版本使用了2.1.3，不要搞错了哦。下面是简单的小例子。<!DOCTYPE html><html lang="en"><head><meta charset="...

Vue中axios的使用技巧配置项详解【代码】

使用axios首先要下载axios模块包npm install axios --save其次需要在使用的文件中引入import axios from ‘axios‘一、调用axios常见两种方法(此处使用easy-mock模拟数据接口)：//方法1axios({method: ‘post‘,url:‘http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/test-post-axios‘}).then((response)=>{console.log(response.data)}).catch((error)=>{console.log(error)})//方法2axios.post(‘http://easy-mock.c...

vue路由导航守卫及前置后置钩子函数参数详解【代码】【图】

首先构建一个测试demo如下图:接着来探讨路由配置界面import Vue from ‘vue‘ import Router from ‘vue-router‘ // import HelloWorld from ‘@/components/HelloWorld‘ Vue.use(Router)const router = new Router({routes: [{path: ‘/‘,name: ‘HelloWorld‘,component: resolve => require([‘@/components/HelloWorld‘], resolve)}, {path: ‘/login‘,name: ‘login‘,component: resolve => require([‘@/components/lo...

Vue事件修饰符，.capture关键字详解【代码】

.prevent 用于阻止默认事件，点击a标签href可以打开相应的链接，那么给事件加上此关键字，click.prevent .capture 冒泡顺序例如 div1中嵌套div2中嵌套div3<div id="app" v-on:click="show">1<div id="app2" v-on:click.capture="show2">2<div id="app3" v-on:click="show3">3</div></div></div><script type="text/javascript">var vm=new Vue({el:"#app",data:{},methods:{show:function(){console.log("这是app的方法...

app.vue详解【代码】

App.vue是项目的主组件，页面入口文件，所有页面都在App.vue下进行切换，app.vue负责构建定义及页面组件归集。1、app.vue作为主组件在main.js中被使用import Vue from ‘vue‘ import App from ‘./App.vue‘Vue.config.productionTip = falsenew Vue({render: h => h(App), }).$mount(‘#app‘)2、主组件app.vue调用其他组件，构建页面<template><div id="app"><MyTest/></div> </template><script> // 其他组件 import MyTest f...

vue项目详解【代码】【图】

目录创建Vue项目Vue项目环境搭建#Vue项目创建#pycharm配置并启动vue项目#vue项目目录结构分析#项目生命周期添加组件-路由映射关系文件式组件结构配置全局css样式子组件的使用组件的生命周期钩子路由逻辑跳转路由传参配置问号携带参数 : ?id=1#路由有名分组携带参数: /course/1/detail#创建Vue项目Vue项目环境搭建#Copy1) 安装node 官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/2) 换源安装cnpm >: npm install -g cnpm -...

Vue.directive添加全局指令详解

自定义指令创建：Vue.directive( ‘mycolor(指令名称:推荐全部小写，驼峰命名会出现问题，看最后面)‘ , {　　bind:function(){},　　//本例只介绍inserted　　inserted:function(el, binding){　　　　el.style.color="red"; // 第一种使用　　　　el.style.color=binding.value; // 第二种使用　　　　//el: dom元素; binding: 一个对象，里面包含着vue实例data里面的数据　　},　　update:function(){},　　compinentUpdated:fu...

详解使用vue实现tab 切换操作【代码】

详解使用vue实现tab 切换操作转载 https://www.jb51.net/article/117622.htm 这篇文章主要介绍了详解使用vue实现tab操作,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧在使用jQuery类库实现tab功能时，是获取鼠标在mousenter或click时的index值，然后切换到当前的标题和内容，把其他的标题和内容的状态去掉：$(‘.tab .title‘).find(‘.item‘).removeClass(‘current‘).eq(index).addClass(‘...

蒲公英 · JELLY技术周刊 Vol.14: Vue 3 新特性详解【图】

2020 年真的是灾祸频发，但是在各类前端框架上，依旧是在稳步的推进。近日 Vue 团队更新了关于 Vue 3 的最新状态，尤大新增了三个语法糖特性，它们将用于优化 SFC 的开发体验，你会有兴趣尝鲜试试么～登高远眺天高地迥，觉宇宙之无穷前端框架Vue 3: 2020 年中的状态更新近日 Vue3 团队对 Vue 3 的状态进行了更新，介绍了各个主要工具的开发进度。整体计划是 7 月中旬推出 RC 版本，8 月早些时候能够推出正式版。在各工具在密锣紧鼓...

详解Vuex常见问题【代码】

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。　　使用Vue开发项目时，通常我们就会遇到如下几种棘手的问题：　　问题1：通过路由传递参数，我们会采用params或者query形式，但这两种方式都会在URL上做手脚，如果传递的参数过多，会导致400 Bad Request（如：点击表格某行，携带行数据跳转到新页面进行查看）。　　问题2：...

详解vue组件的is特性：限制元素&动态组件【代码】【图】

在vue.js组件教程的一开始提及到了is特性　　意思就是有些元素，比如 ul 里面只能直接包含 li元素，像这样：<ul><li></li> </ul> //而不能： <ul><your-component> </ul>　　这样就不能复用your-component这个组件了，如果要达到我们的目的，我们就要使用is特性像这样：<ul><li is="your-component"></li> </ul>　　组件功能是vue项目的一大特色。组件可以扩展html元素，可以封装可重用的代码，可以增加开发效率。它是自定义元素，...

详解vue如何使用rules对表单字段进行校验【图】

1、在代码中，添加属性：:rule?123456789101112131415161718<Formref="loginForm":model="form":rules="rules"@keydown.enter.native="handleSubmit"class="form-con"> <FormItemprop="phone"> <Inputv-model="form.phone"prefix="md-person"placeholder="请输入您的手机号"size="large"class="login-form-input":maxlength="11"></Input> </FormItem> <FormItemprop="password"> ...

首页 / VUE / vue移动端城市三级联动组件使用详解

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【vue移动端城市三级联动组件使用详解】教程文章相关的互联网学习教程文章

安装(c)npm及搭建Vue项目详解【代码】【图】

vuex的使用详解大全【代码】【图】

vuex基础详解及项目实例【代码】【图】

【转】vue.js表单校验详解【代码】【图】

Vue中axios的使用技巧配置项详解【代码】

vue路由导航守卫及前置后置钩子函数参数详解【代码】【图】

Vue事件修饰符，.capture关键字详解【代码】

app.vue详解【代码】

vue项目详解【代码】【图】

Vue.directive添加全局指令详解

详解使用vue实现tab 切换操作【代码】

蒲公英 · JELLY技术周刊 Vol.14: Vue 3 新特性详解【图】

详解Vuex常见问题【代码】

详解vue组件的is特性：限制元素&动态组件【代码】【图】

详解vue如何使用rules对表单字段进行校验【图】

VUE - 相关标签

组件 - 相关标签

VUE - 技术教程分类

VUE - 最新教程

VUE - 最热教程