vue实现移动端省市区选择
2019-11-07 07:04
2743 查看
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- vue省市区三联动下拉选择组件的实现
- vue省市区三联动下拉选择组件的实现
- vue省市区三联动下拉选择组件的实现
- 手把手教你webpack+vue+amaze-vue实现省市区三级联动选择组件
- vue+webpack+amaze-vue实现省市区联动选择组件
- vue在移动端实现图片以文件方式上传和base64上传
- vue系列---基于 Element UI 的省市区街道联动选择组件
- 利用Vue实现移动端图片轮播组件的方法实例
- Vue如何使用vue-area-linkage实现地址三级联动效果 很多时候我们需要使用地址三级联动,即省市区三级联动。网上有很多插件,在此介绍Vue的一款地区联动插件:vue-ar
- Android中使用开源框架Citypickerview实现省市区三级联动选择
- vue-cli实现《去哪儿旅行》App笔记(二)城市选择页
- HTML5移动端实现选择裁剪图片并且ajax上传服务器
- 详解vue移动端日期选择组件
- vue移动端监听滚动条高度的实现方法
- 基于vue实现移动端点击上方导航,内容滑动切换,滑动内容导航自动切换。
- 原生JS实现移动端模块的左右滑动切换效果,基于vue、stylus
- vue 在移动端实现红包雨 (兼容性好)
- 基于Vue+ElementUI的省市区选择公共组件
- vue实现移动端九宫格布局
- vue实现一个移动端屏蔽滑动的遮罩层实例