vue vant Area组件使用详解

1. 下载areaList.js

见文章末尾

2. 组件注册

main.js引入并注册(一般与Popup一起使用)

• 全局注册

//全局导入所有组件
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant)

• 局部注册

import { Area, Popup } from 'vue-router'
Vue.use(Area)
Vue.use(Popup)

3. 封装组件

在src/components新建CascadeChoice.vue组件

<template>
  <div>
    <div class="flex-input">
      <div class="tx-lable">{{ itemName }}</div>
      <div class="tx-input" @click="areaChoose">
        <input
            type="text"
            :placeholder="phdText"
            v-model="chooseValue"
            readonly
        />
        <img class="my-img" src="@/assets/images/icon_arrow_right.png"/>
      </div>
    </div>
    <van-popup v-model="showAddrPopup" position="bottom">
      <van-area
          ref="myArea"
          title="选择地区"
          :area-list="areaList"
          @confirm="confArea"
          @change="onChange"
          @cancel="onCancel"
      />
    </van-popup>

  </div>
</template>
<script>
import AreaList from "@/assets/js/area.js";

export default {
  props: {
    itemName: {
      type: String, //按钮名称
      default: "地区"
    },
    phdText: {
      type: String, //按钮名称
      default: "请选择地区"
    },
    showUnderline: {
      type: Boolean,
      default: true
    }
  },
  components: {},
  data() {
    return {
      //省市区列表
      areaList: {},
      //弹出层展示
      showAddrPopup: false,
      //数据滚动选择临时数据
      chooseTempValue: "",
      //页面选择后的数据 和v-model一致
      chooseValue: ""
    };
  },

  //在实例被创建之后被调用，初始化省区县数据
  created() {
    this.initParams();
  },
  methods: {
    
    /**
     * 初始地区化数据
     */
    initParams() {
      this.areaList = AreaList;
    },

    /**
     * 数据滚动选择监听数据变化
     * @param picker
     * @param index
     * @param value
     * value=0改变省，1改变市，2改变区
     */
    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.chooseTempValue = areaName
      console.log("chooseTempValue", this.chooseTempValue)
    },

    //点击imput触发，弹框事件
    areaChoose() {
      this.showAddrPopup = true;
    },

    //点击取消后的事件
    onCancel() {
      this.showAddrPopup = false//关闭弹框
      //由于对滚动的数据保存到临时的变量chooseTempValue中，与选择后现实的数据做了解耦合，因此，这里不炫耀重置城市列表
      // this.$refs.myArea.reset()// 重置城市列表
    },

    //当提交表单数据时需要，将地区数据提交到后端，因此，当选择完成后
    //确定选择后保存事件
    confArea(data) {
      this.chooseValue = this.chooseTempValue
      console.log(data[0].name + "," + data[1].name)
      this.showAddrPopup = false//关闭弹框

      // 将子组件的值回传给父组件
      this.$emit('callBackParent', this.chooseValue)
    }
  }
};
</script>
<style lang="less" scoped>


.flex-input {
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  height: 56px;
  padding: 0 25px;

  div {
    font-size: 16px;
    color: #2e042c;
    letter-spacing: 0;

    .my-img {
      height: 17px;
      margin-top: 2%;
    }
  }
}

.tx-lable {
  margin: 16px 0;
  height: 24px;
  line-height: 24px;
}

.tx-input {
  display: flex;
  justify-content: flex-end;
  margin: 16px 0;
  line-height: 24px;

  input {
    border: none;
    margin-right: 5px;
    text-align: right;
  }

  input::-moz-placeholder {
    color: #f6e9f7;
  }

  img {
    margin: 7px 5px;
    height: 12px;
    width: 12px;
  }
}
</style>

4. 使用组件

<template>
  <div>
    <cascade-choice
        :item-name="'地区'"
        :phd-text="'请选择地区'"
        @callBackParent="callBackParent"/>
  </div>
</template>
<script>
import CascadeChoice from "../../components/CascadeChoice";

export default {
  name: 'Home',
  data() {
    return {
      // 定义城市变量值
      cityValue: ''
    }
  },
  components: {CascadeChoice},
  methods: {

    //父组件接收子组件回传的参数值
    callBackParent(obj) {
      console.log("obj", obj)
      this.cityValue = obj
    }
  }
}
</script>

5. 效果图

6. 项目源码

https://gitee.com/gblfy/vue2-vant-h5