vue实现移动端省市区选择

2024-02-19 16:03:22

本文实例为大家分享了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移动端日期选择组件

先给大家分享一下源码:https://github.com/lx544690189/vue-mobile-calendar Build Setup # install dependencies npm install # build for production with minification npm run build Usage install npm install vue-mobile-calendar or:(from the dist folder) <script src=&quo
vue实现移动端省市区选择

本文实例为大家分享了vue实现移动端省市区选择的具体代码,供大家参考,具体内容如下效果: 安装: npm install v-distpicker --save 组件代码: <template> <div> <li > <div class="left"> <span>所在地区</span> </div> <div class="right r"> <div cl
vue实现手机端省市区区域选择

本文实例为大家分享了vue实现手机端省市区区域选择的具体代码,供大家参考,具体内容如下 1 后端接口获取城市信息 2 先获取省根据用户点击的省获取市 3 再根据用户点击的市获取区组件代码: <template> <div class="city">  <div class="chooseCity" @click="clickCity">{{chooseC
vue基于mint-ui实现城市选择三级联动

项目是基于vue2 的移动端项目,供大家参考,具体内容如下 1.实际效果地址三级联动 mint-ui picker.png 2.首先你需要去下载一个包含中国省份,城市,区县的数据如下: (这个地址里面包含二级联动数据,三级联动数据,四级联动数据等,找到自己需要的) (一个更好的中国地区数据,推荐用这个) 3.具体代码主要是用到了mint-ui的picker组件,关于mint-ui的使用就自行看官网 Ⅰ .html组件 <div> <mt-picker :slots="my
Mint UI 基于 Vue.js 移动端组件库

官网地址 http://mint-ui.github.io/ Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验. 依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化.即使全部引
atom-design(Vue.js移动端组件库)手势组件使用教程

介绍 atom-design经过几个月的开发,以及这段时间的修复bug,对js,css压缩,按需引入处理等等的性能优化,现在已经逐渐完善.做这套UI考虑到很多性能的问题,以及如何让开发者更自由.更简单的去使用.这篇文章主要讲使用Gesture(手势)相关组件的感受. Gesture(手势)相关组件 •Carousel(传送带) •SlideItem (滑动条) •Range (区域选择) •Pull Gesture (上下拉动手势) Carousel(传送带) import {Carousel}
vue实现移动端轻量日期组件不依赖第三方库的方法

不需要依赖第三方组件的vue日期移动端组件小轮子轻量可复用: https://github.com/BeckReed/datepicker-for-vue 2.用法:参见 src/view/demo.vue 文件的用法,简单易懂 <div> <h3>三列(年月日)日期弹窗示例--带标题)</h3> <button class="blue-btn" @click="togglePicker2">显示三列带标题日
vue实现PC端录音功能的实例代码

录音功能一般来说在移动端比较常见,但是在pc端也要实现按住说话的功能呢?项目需求:按住说话,时长不超过60秒,生成语音文件并上传,我这里用的是recorder.js 1.项目中新建一个recorder.js文件,内容如下,也可在百度上直接搜一个 // 兼容 window.URL = window.URL || window.webkitURL navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMed
vue实现移动端图片上传功能

本文实例为大家分享了vue实现移动端图片上传的具体代码,供大家参考,具体内容如下 <template> <div class="box"> <div class="upDiv"> {{labTex}} //标题 //上传按钮 <input ref="uploadInput" type="file" class='upinp' name="file" value=&q
Vue解决移动端弹窗滚动穿透问题

一.问题描述在移动端的H5页面中,我们经常会遇到 "点击按钮-->弹窗-->选择选项" 这样的场景.而在选项过多出现滚动条时,滚动滚动条至容器的底部或者顶部.再往上或往下拖动滚动条时,滚动动作会出现穿透,这时候底部的body也会一起滚动. 问题总结:内容在滚动到容器的顶部或者底部时,再向上或向下强行滚动 ,则出现滚动穿透二.解决方案思考参考了网上一大堆的解决方法,大可分为三类方法.经过认真的思考和分析,个人的总结如下: 使用js去控制和改变css 1. 弹窗出现 1
Vue实现浏览器端扫码功能

背景不久前我做了关于获取浏览器摄像头并扫码识别的功能,本文中梳理了涉及到知识点及具体代码实现,整理成此篇文章内容. 本文主要介绍,通过使用基于 vue 技术栈的前端开发技术,在浏览器端调起摄像头

vue实现移动端省市区选择

相关推荐

随机推荐