关于vue.js:vue引入vant-area地区选择组件

@TOC

Vant 是有赞前端团队开源的挪动端组件库，于 2017 年开源，已继续保护 4 年工夫。Vant 对内承载了有赞所有外围业务，对外服务十多万开发者，是业界支流的挪动端组件库之一。目前 Vant 官网提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队保护 React 版本。
地区层级抉择组件属于比较复杂的业务组件，应用 vant 地区抉择组件同时，能够对组件款式进行批改，以满足集体业务要求。

应用 npm i vant 即可装置 vant 最新版本：

npm i vant

装置结束之后能够抉择按需引入组件或者全局引入 vant 组件，这里咱们抉择按需引入。

引入插件

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法主动转换为按需引入的形式。引入办法如下：

npm i babel-plugin-import -D

增加 babel 的配置
应用 babel 配置不会呈现组件款式无奈加载问题，否则则须要按需引入组件款式文件。

// 在.babelrc 中增加配置
// 留神：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 对于应用 babel7 的用户，能够在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

导入组件

通常应用地区抉择组件，须要搭配底部弹出组件 <font color=”red”>Popup</font> 一起应用，引入两个 vant 组件：

import AreaList from '@/assets/js/area.js'
import Vue from 'vue';
import {Area, Popup} from 'vant';
Vue.use(Area);
Vue.use(Popup);

其中，引入的 AreaList 蕴含了所有的地区的地区代码，文件地址为：https://download.csdn.net/download/m0_46309087/14001917。

引入 Area, Popup 两个组件当前，通过浏览两个组件 API 文档应用这两个组件，以下是两个组件 api 文档，这里 api 接口较多，咱们仅抉择咱们须要的几个 api 做阐明：

popup

参数	阐明	类型	默认值
v-model (value)	是否显示弹出层	boolean	false
position	弹出地位，可选值为 top bottom right left	string	center

Area

| 事件 | 阐明 | 回调参数 |
|:——–:| :————-:|:——–:|
| confirm | 点击右上方实现按钮 | 一个数组参数 |
| cancel | 点击勾销按钮时 | – |
对于 area 组件，以上两个事件对应的是确认和勾销两个按钮的事件，其余的 api 详见 VantDOC；

地区组件最要害的就是入参加出参，入参数据格式为：

{
  province_list: {
    110000: '北京市',
    120000: '天津市'
  },
  city_list: {
    110100: '北京市',
    110200: '县',
    120100: '天津市',
    120200: '县'
  },
  county_list: {
    110101: '东城区',
    110102: '西城区',
    110105: '朝阳区',
    110106: '丰台区'
    120101: '和平区',
    120102: '河东区',
    120103: '河西区',
    120104: '南开区',
    120105: '河北区',
    // ....
  }
}

残缺的数据见 https://download.csdn.net/download/m0_46309087/14001917。

抉择结束点击确定按钮，confirm 事件获取参数，出参数据格式为：

// 返回的数据整体为一个数组，数组内蕴含 columnsNum 个数据，每个数据对应一列选项中被选中的数据。//code 代表被选中的地区编码，name 代表被选中的地区名称

[
  {
    code: '110000',
    name: '北京市',
  },
  {
    code: '110100',
    name: '北京市',
  },
  {
    code: '110101',
    name: '东城区',
  },
];

实现的成果如下图：
残缺代码如下：

<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 src="@/assets/images/toRight.png" />
      </div>
    </div>
    <DLine v-show="showUnderline"></DLine>
    <van-popup v-model="showAddrPopup" position="bottom">
      <van-area
        title="抉择地区"
        :area-list="areaList"
        @cancel="showAddrPopup = false"
        @confirm="confArea"
        @visible-item-count="itemCount"
      />
    </van-popup>
  </div>
</template>
<script>
import DLine from "@/components/DLine";
import AreaList from "@/assets/js/area.js";
import Vue from "vue";
import {Area, Popup} from "vant";
Vue.use(Area);
Vue.use(Popup);
export default {
  props: {
    itemName: {
      type: String, // 按钮名称
      default: "地区"
    },
    phdText: {
      type: String, // 按钮名称
      default: "请抉择地区"
    },
    showUnderline: {
      type: Boolean,
      default: true
    }
  },
  components: {DLine},
  data() {
    return {areaList: {}, // 省市区列表
      itemCount: 7,
      showAddrPopup: false, // 弹出层展现
      chooseValue: ""
    };
  },
  created() {this.initParams();
  },
  methods: {clickhandle() {
      // 应用 emit，第一个参数为子组件组件办法，第二个参数为该办法传递的参数
      this.$emit("clickhandle", 5);
    },
    initParams() {this.areaList = AreaList;},
    areaChoose() {this.showAddrPopup = true;},
    confArea(data) {
      // this.chooseArea = data;
      for(let i = 0; i<data.length; i++) {this.chooseValue = data[i].name + this.chooseValue;
      }
    }
  }
};
</script>
<style lang="scss" 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;
  }
}
.tx-lable {
  margin: 16px 0;
  height: 24px;
  line-height: 24px;
  vertical-align: -webkit-baseline-middle;
}
.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>

关于vue.js:vue引入vant-area地区选择组件

一、介绍

二、引入

1、装置 vant

2、引入

三、应用