vue+vant實現省市聯動（van-area）組件（包含比較全面的全國省市數組數據）

組件庫太香了，人家nb，自己寫的都是**

效果：

 

 

1.安裝vant庫以及main.js的配置

2.一般結合van-popup組件

</template>
<van-popup 
    v-model="showArea" 
    position="bottom" 
    :style="{ height: '39%' }">
       <van-area 
       :area-list="areaList" 
       :columns-num="2" title="請選擇" 
        @change="areaChange"
        @confirm="areaConfirm"
        @cancel="areaCancle"/>
    </van-popup>
</template>

3.vant只給了幾個案例，這里引入一個address.js的文件名(內容在文章末尾)

import areaList from '../assets/js/areaList'
export default {
    name: "loginOut",
    components:{
    },
    data(){
　　list:[{tit:'頭像',msg:'更改頭像'},{tit:'性別',msg:'保密'},{tit:'個性簽名',msg:'補充完整'},{tit:'城市',msg:'請選擇'},{tit:'修改用戶名',msg:'棋雲'},{tit:'賬號安全',msg:''}],
       showArea:false,
       areaList,
       areaName:''
      }，
methods：{
　　　
//省市二級聯動
        areaChange (picker, value, index){
            let areaName = ''
            for (var i = 0; i < value.length; i++) {
                areaName = areaName + value[i].name + ' '
              }
              this.list[3].msg=areaName
              },
        areaConfirm(values){
            //values的值即為用戶選中的省市對象，之后可向后端數據交互
            console.log(values)
            this.showArea = false;
        },
        areaCancle(){
            this.showArea = false;
            this.list[3].msg='請選擇'
        }
 
    }
}

4.在剛取名為areaList.js的文件里的內容vant官方已給出 https://github.com/youzan/vant/blob/dev/src/area/demo/area.js