日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

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

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序制作、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了北海街道免費(fèi)建站歡迎大家使用！

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屬性

選擇需要顯示的城市

  

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è)資訊頻道。

網(wǎng)站題目：vantArea組件如何在vue項(xiàng)目中使用
URL分享：http://www.dlmjj.cn/article/ieggod.html