快捷導(dǎo)航

vue實(shí)現(xiàn)移動(dòng)端省市區(qū)選擇

更新時(shí)間：2019年09月27日 11:10:12 作者：小羽向前跑

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端省市區(qū)選擇，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)移動(dòng)端省市區(qū)選擇的具體代碼，供大家參考，具體內(nèi)容如下

效果：

安裝：

npm install v-distpicker --save

組件代碼：

<template>
<div>
<li >
 <div class="left">
 <span>所在地區(qū)</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:'請(qǐng)選擇',
 addInp :false,
 mask:false
 }
 },
 methods:{
 toAddress(){
 this.mask = true;
 this.addInp = true;
},
 // 省市區(qū)三級(jí)聯(lián)動(dòng)
 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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue復(fù)合組件實(shí)現(xiàn)注冊(cè)表單功能
這篇文章主要為大家詳細(xì)介紹了vue復(fù)合組件實(shí)現(xiàn)注冊(cè)表單功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
vue如何使用el-table遍歷循環(huán)表頭和表體數(shù)據(jù)
這篇文章主要介紹了vue如何使用el-table遍歷循環(huán)表頭和表體數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
關(guān)于Vue3中的響應(yīng)式原理
這篇文章主要介紹了關(guān)于Vue3中的響應(yīng)式原理，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
淺談Vue.nextTick 的實(shí)現(xiàn)方法
本篇文章主要介紹了Vue.nextTick 的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
VUE DEMO之模擬登錄個(gè)人中心頁(yè)面之間數(shù)據(jù)傳值實(shí)例
今天小編就為大家分享一篇VUE DEMO之模擬登錄個(gè)人中心頁(yè)面之間數(shù)據(jù)傳值實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-10-10
解決vux 中popup 組件Mask 遮罩在最上層的問(wèn)題
這篇文章主要介紹了解決vux 中popup 組件Mask 遮罩在最上層的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
ElementUI Tag組件實(shí)現(xiàn)多標(biāo)簽生成的方法示例
這篇文章主要介紹了ElementUI Tag組件實(shí)現(xiàn)多標(biāo)簽生成的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07
vue源碼入口文件分析(推薦)
這篇文章主要介紹了vue源碼入口文件分析(推薦)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
vue3基于script?setup語(yǔ)法$refs的使用
這篇文章主要介紹了vue3基于script?setup語(yǔ)法$refs的使用，<BR>?在用vue3開發(fā)項(xiàng)目的時(shí)候，需要調(diào)用子組件的方法，于是想著用$refs來(lái)實(shí)現(xiàn)，但是我是使用script?setup語(yǔ)法糖，原先vue2的語(yǔ)法已經(jīng)不適用了。下面我們一起進(jìn)入文章看詳細(xì)內(nèi)容吧</P><P>
2021-12-12
在vue項(xiàng)目中,將juery設(shè)置為全局變量的方法
今天小編就為大家分享一篇在vue項(xiàng)目中,將juery設(shè)置為全局變量的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09