使用vant完成 Area省市区选择。

待我称王封你为后i 2023-06-11 07:25 304阅读 0赞

**效果展示：**

![2019102918293848.gif][]

**组件使用的文件：**

area.js文件。[area.js文件详见][area.js]

**注意：**

记得在main.js里面引入响应的组件。

**组件代码： ** 【可以自己封装写个公共的组件】

<template>
      
      <div id="pro_city_country">
        <button @click="toSelect">{
       {city}}  {
       {county}}</button>
        <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
        <van-area :area-list="areaList" :columns-num='colNum' :item-height='38' @confirm='confirmFn' @change="changeFn" @cancel="cancelFn" />
    </van-popup>
      </div>
    </template>
    
    <script>
      import areaFile from '../../../static/common_js/new_file/area.js'
      export default {
        data() {
          return {
            show: false,
            msg: '',
            colNum: '3' ,//省市区显示列数，3-省市区，2-省市，1-省
            city:'请选择',
            county:'请选择'
          }
        },
        props: ['areaList'],
        mounted() {
          console.log('父传过来的',this.areaList);
        },
        methods: {
          toSelect(){
            this.show = true;
          },
          changeFn(event) {
            console.log('改变',event);
          },
          confirmFn(event){
            this.show = false;
            let arr,SelectProvinceName,SelectCityName,SelectCountyName;
            arr = event;
            SelectProvinceName = arr[0].name;   // 省
            SelectCityName = arr[1].name;   // 市
            SelectCountyName = arr[2].name;  // 区
            this.city = SelectCityName;
            this.county = SelectCountyName;
            this.$emit('ProCityCountyVal',[SelectProvinceName,SelectCityName,SelectCountyName])
            console.log('点击了确定按钮',SelectProvinceName,SelectCityName,SelectCountyName)
          },
          cancelFn(){
            this.show = false;
            console.log('点击了取消按钮');
          }
        }
      }
    </script>
    
    <style>
    </style>

\---------详见文档：[https://youzan.github.io/vant-weapp/\#/area][https_youzan.github.io_vant-weapp_area]

[2019102918293848.gif]: /images/20230531/9e52b932054049f6becef57cf04a4388.png
[area.js]: https://github.com/youzan/vant/blob/dev/src/area/demo/area.js
[https_youzan.github.io_vant-weapp_area]: https://youzan.github.io/vant-weapp/#/area