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