這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)vant Area組件如何在vue項(xiàng)目中使用，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)公司專注于企業(yè)成都營(yíng)銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、漳縣網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5場(chǎng)景定制、成都商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為漳縣等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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"
  :>
  <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.效果圖

上述就是小編為大家分享的vant Area組件如何在vue項(xiàng)目中使用了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前文章：vantArea組件如何在vue項(xiàng)目中使用-創(chuàng)新互聯(lián)
本文地址：http://www.chinadenli.net/article24/dodsje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、品牌網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站、微信小程序、商城網(wǎng)站、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)