vue实现移动端省市区选择

 更新时间:2019年09月27日 11:10:13   作者:小羽向前跑   我要评论
这篇文章主要为大家详细介绍了vue实现移动端省市区选择,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue实现移动端省市区选择的具体代码,供大家参考,具体内容如下

效果:

安装:

npm install v-distpicker --save

组件代码:

<template>
<div>
<li >
 <div class="left">
 <span>所在地区</span>
 </div>
 <div class="right r">
 <div class="city" @click="toAddress">{{city}}</div>
 <i class="arrow-r"> </i>
 </div>
</li>
<v-distpicker type="mobile" @selected='selected' v-show="addInp" class="area1">
</v-distpicker>
<div class="mask" v-show="mask"></div>
 
</div>
 
  
</template>
 
<script>
import VDistpicker from 'v-distpicker'
 
 export default {
 components: { VDistpicker },
 name:"area1",
 data(){
 return{
 city:'请选择',
 addInp :false,
 mask:false
 }
 },
 methods:{
 toAddress(){
 this.mask = true;
 this.addInp = true;
},
 // 省市区三级联动
 selected(data){
 this.mask =false;
 this.addInp = false;
 this.city = data.province.value + ' ' + data.city.value +' ' + data.area.value
 },
 }
 }
</script>
 
<style scoped>
 li{
 list-style: none;
 }
 .area1{
 width: 100%;
 height: 45%;
 position:fixed;
 left: 0;
 bottom: 0;
 overflow-y: scroll;
 }
 .distpicker-address-wrapper .address-header ul{
 position:fixed !important;
 left: 0 !important;
 top: 0 !important;
 }
</style>

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

您可能感兴趣的文章:

相关文章

  • 总结4个方面优化Vue项目

    总结4个方面优化Vue项目

    在本篇文章里我们给大家整理了一篇关于优化VUE项目的四个总要点,对此有需要的朋友们学习下天。
    2019-02-02
  • vue中element 上传功能的实现思路

    vue中element 上传功能的实现思路

    这篇文章主要介绍了vue中element 的上传功能的实现思路,本文大概通过两种实现思路,具体内容详情大家跟随脚本之家小编一起看看吧
    2018-07-07
  • vue component组件使用方法详解

    vue component组件使用方法详解

    这篇文章主要为大家详细介绍了vue component组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • vue计算属性computed、事件、监听器watch的使用讲解

    vue计算属性computed、事件、监听器watch的使用讲解

    今天小编就为大家分享一篇关于vue计算属性computed、事件、监听器watch的使用讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • 对 Vue-Router 进行单元测试的方法

    对 Vue-Router 进行单元测试的方法

    这篇文章主要介绍了对 Vue-Router 进行单元测试的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 基于vue实现分页效果

    基于vue实现分页效果

    这篇文章主要介绍了基于vue实现分页效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • VUE2.0+Element-UI+Echarts封装的组件实例

    VUE2.0+Element-UI+Echarts封装的组件实例

    下面小编就为大家分享一篇VUE2.0+Element-UI+Echarts封装的组件实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 详解Vue-Router源码分析路由实现原理

    详解Vue-Router源码分析路由实现原理

    这篇文章主要介绍了Vue-Router源码分析路由实现原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue2.0 循环遍历加载不同图片的方法

    vue2.0 循环遍历加载不同图片的方法

    下面小编就为大家分享一篇vue2.0 循环遍历加载不同图片的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 使用imba.io框架得到比 vue 快50倍的性能基准

    使用imba.io框架得到比 vue 快50倍的性能基准

    imba 是一种新的编程语言,可以编译为高性能的 JavaScript。可以直接用于 Web 编程(服务端与客户端)开发。这篇文章主要介绍了使用imba.io框架,得到比 vue 快50倍的性能基准,需要的朋友可以参考下
    2019-06-06

最新评论