vant area地區選擇組件使用方法

一、介紹

??Vant 是有贊前端團隊開源的移動端組件庫，于 2017 年開源，已持續維護 4 年時間，Vant 對內承載了有贊所有核心業務，對外服務十多萬開發者，是業界主流的移動端組件庫之一，目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程式版本，并由社區團隊維護 React 版本，
??地區層級選擇組件屬于比較復雜的業務組件，使用vant地區選擇組件同時，可以對組件樣式進行修改，以滿足個人業務要求，

二、引入

1、安裝vant

使用npm i vant即可安裝vant最新版本：

npm i vant

安裝完畢之后可以選擇按需引入組件或者全域引入vant組件，這里我們選擇按需引入，

2、引入

1. 引入插件

??babel-plugin-import 是一款 babel 插件，它會在編譯程序中將 import 的寫法自動轉換為按需引入的方式，引入方法如下：

npm i babel-plugin-import -D

2. 添加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']
  ]
};

3. 匯入組件

??通常使用地區選擇組件，需要搭配底部彈出組件Popup一起使用，引入兩個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

• Area

對于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>