vue vant Area組件使用詳解

更新時(shí)間：2019年12月09日 08:26:40 作者：diuren1205

這篇文章主要介紹了vue vant Area組件使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

官網(wǎng)中給的內(nèi)容太少，引入官網(wǎng)中的Area例子之后，發(fā)現(xiàn)彈出來的組件里并沒有數(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中使用this的詳細(xì)教程
在vue3中新的組合式API中沒有this,那我們?nèi)绻枰玫絫his怎么辦?下面這篇文章主要給大家介紹了關(guān)于Vue3中使用this的詳細(xì)教程,需要的朋友可以參考下
2023-07-07
淺析Proxy如何實(shí)現(xiàn)Vue響應(yīng)式
這篇文章主要是來和大家探討一下，Vue的響應(yīng)式系統(tǒng)僅僅是一個(gè)Proxy嗎，本文將圍繞此問題探索一下Proxy是如何實(shí)現(xiàn)Vue響應(yīng)式的，感興趣的小伙伴可以了解一下
2023-08-08
vue?element?el-select下拉滾動(dòng)加載的方法
很多朋友都遇到這樣一個(gè)問題在使用vue+element的el-select下拉框加載返回?cái)?shù)據(jù)太多時(shí)，會(huì)造成卡頓，用戶體驗(yàn)欠佳，這篇文章主要介紹了vue?element?el-select下拉滾動(dòng)加載方法,需要的朋友可以參考下
2022-11-11
關(guān)于vue-treeselect的基本用法
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ī)砹藇ue中Element-ui 輸入銀行賬號(hào)每四位加一個(gè)空格的實(shí)現(xiàn)代碼，感興趣的朋友一起看看吧
2018-09-09
vue實(shí)現(xiàn)直播間點(diǎn)贊飄心效果的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)直播間點(diǎn)贊飄心效果的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
vue-devtools的安裝與使用教程
vue-devtools是一款基于chrome游覽器的插件，用于調(diào)試vue應(yīng)用，這可以極大地提高我們的調(diào)試效率，這篇文章主要介紹了vue-devtools的安裝與使用教程,需要的朋友可以參考下
2023-03-03
vuecli4配置sass與less詳解
這篇文章主要為大家介紹了vuecli4配置sass與less詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
vue生成隨機(jī)驗(yàn)證碼的示例代碼
本篇文章主要介紹了vue生成隨機(jī)驗(yàn)證碼的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧‘
2017-09-09
在vue中v-for循環(huán)遍歷圖片不顯示錯(cuò)誤的解決方案
這篇文章主要介紹了在vue中v-for循環(huán)遍歷圖片不顯示錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-01-01