vue结合vant组件实现地区选择

html

<div class="item_box d-flex a-center" @click="areaPop = true">
              <span>所属区域</span>
          <input
            type="text"
            v-model="buyInfo.address"
            placeholder="请选择所属区域"
            readonly="readonly"
          />
          <div class="iconbox">
            <van-icon name="arrow-down" color="#bbbbbb" />
          </div>
        </div>


    <!-- 选择地区 -->
    <van-popup v-model="areaPop" position="bottom">
      <van-area
        :area-list="areaList"
        @confirm="changeArea"
        @cancel="areaPop = false"
        value="320000"
      />
    </van-popup>

js

<script>
import { areaList } from "../assets/js/areaList.js";
export default {
  name: "Buy",
  props: {},
  data() {
    return {
      areaList: areaList,
      areaPop: false,
      yearList: [],
      buyInfo: {
        address: "",
        province: "", //省
        city: "", //市,
        area: "", //区
        detailAddress: "",
      },
    };
  },

  methods: {
    //选择地址
    changeArea(values) {
      this.buyInfo.province = values[0].name;
      this.buyInfo.city = values[1].name;
      this.buyInfo.area = values[2].name;
      this.buyInfo.address = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("/");
      this.areaPop = false;
    },
  },
};
</script>