vue vant Area組件使用詳解
更新時(shí)間：2019年12月09日 08:26:40 作者：diuren1205
這篇文章主要介紹了vue vant Area組件使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
官網(wǎng)中給的內(nèi)容太少，引入官網(wǎng)中的Area例子之后，發(fā)現(xiàn)彈出來(lái)的組件里并沒(méi)有數(shù)據(jù)。
1.下載areaList.js并在使用的模板中引用 官方網(wǎng)站 areaList.js
import areaList from '../../assets/area/area.js'
2.main.js引入并注冊(cè)(一般與Popup一起使用)
import { Area, Popup } from 'vue-router'
Vue.use(Area)
Vue.use(Popup)
3.template中，基礎(chǔ)用法配置顯示列，需要傳入一個(gè)area-list屬性
<van-cell is-link @click="showPopup" v-model="carmodel">選擇需要顯示的城市</van-cell>
<van-popup
v-model="show"
position="bottom"
:style="{ height: '50%' }">
<van-area :area-list="areaList" :columns-num="2" ref="myArea" title="標(biāo)題" @change="onChange" @confirm="onConfirm" @cancel="onCancel"/>
</van-popup>
4.script中，api與方法
export default {
data() {
return {
areaList,
show:false,
carmodel:''
}
},
methods:{
// 彈出層顯示
showPopup() {
this.show = true;
},
//value=0改變省，1改變市，2改變區(qū)
onChange(picker, index, value){
let val = picker.getValues();
console.log(val)//查看打印
let areaName = ''
for (var i = 0; i < val.length; i++) {
areaName = areaName+(i==0?'':'/')+val[i].name
}
this.carmodel = areaName
},
//確定選擇城市
onConfirm(val){
console.log(val[0].name+","+val[1].name)
this.show = false//關(guān)閉彈框
},
//取消選中城市
onCancel(){
this.show = false
this.$refs.myArea.reset()// 重置城市列表
}
}
}
5.效果圖
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在vue3中新的組合式API中沒(méi)有this,那我們?nèi)绻枰玫絫his怎么辦?下面這篇文章主要給大家介紹了關(guān)于Vue3中使用this的詳細(xì)教程,需要的朋友可以參考下2023-07-07
淺析Proxy如何實(shí)現(xiàn)Vue響應(yīng)式
這篇文章主要是來(lái)和大家探討一下，Vue的響應(yīng)式系統(tǒng)僅僅是一個(gè)Proxy嗎，本文將圍繞此問(wèn)題探索一下Proxy是如何實(shí)現(xiàn)Vue響應(yīng)式的，感興趣的小伙伴可以了解一下2023-08-08
vue?element?el-select下拉滾動(dòng)加載的方法
很多朋友都遇到這樣一個(gè)問(wèn)題在使用vue+element的el-select下拉框加載返回?cái)?shù)據(jù)太多時(shí)，會(huì)造成卡頓，用戶體驗(yàn)欠佳，這篇文章主要介紹了vue?element?el-select下拉滾動(dòng)加載方法,需要的朋友可以參考下2022-11-11
vue-treeselect?是一個(gè)多選組件，具有對(duì)?Vue.js嵌套選項(xiàng)支持，這篇文章主要介紹了關(guān)于vue-treeselect的基本用法,需要的朋友可以參考下2022-11-11
vue中Element-ui 輸入銀行賬號(hào)每四位加一個(gè)空格的實(shí)現(xiàn)代碼
我們?cè)谳斎脬y行賬號(hào)會(huì)設(shè)置每四位添加一個(gè)空格，輸入金額，每三位添加一個(gè)空格。那么，在vue，element-ui 組件中，如何實(shí)現(xiàn)呢？下面小編給大家?guī)?lái)了vue中Element-ui 輸入銀行賬號(hào)每四位加一個(gè)空格的實(shí)現(xiàn)代碼，感興趣的朋友一起看看吧2018-09-09
vue實(shí)現(xiàn)直播間點(diǎn)贊飄心效果的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)直播間點(diǎn)贊飄心效果的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue-devtools是一款基于chrome游覽器的插件，用于調(diào)試vue應(yīng)用，這可以極大地提高我們的調(diào)試效率，這篇文章主要介紹了vue-devtools的安裝與使用教程,需要的朋友可以參考下2023-03-03
這篇文章主要為大家介紹了vuecli4配置sass與less詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
本篇文章主要介紹了vue生成隨機(jī)驗(yàn)證碼的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧‘2017-09-09
在vue中v-for循環(huán)遍歷圖片不顯示錯(cuò)誤的解決方案
這篇文章主要介紹了在vue中v-for循環(huán)遍歷圖片不顯示錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01