省市区选择实现（H5）

基于 vant-ui 实现

引入相关资源

  <link rel="stylesheet" href="js/vant/index.css" />
    <script src="js/vant/vant_city.js"></script>
    <script src="js/vant/vant.min.js"></script>

相关 html

 <van-popup v-model="showChooseAddr" position="bottom">
        <van-area
          title="请选择地址"
          :area-list="areaList"
          @confirm="onConfirm"
          @cancel="showChooseAddr = false"
        />
      </van-popup>

data 数据

areaList: areaList,
showChooseAddr: false,

js 代码

 onConfirm(values) {
          this.winInfo.ssq = values.map((v) => v.name).join(",");
          this.showChooseAddr = false;
        },
        changeSsq() {
          if (this.winInfo.hasinfo == 1) {
            return;
          }
          this.showChooseAddr = true;
        },