一、介紹
Vant 是有贊前端團隊開源的移動端組件庫，於 2017 年開源，已持續維護 4 年時間。Vant 對內承載了有贊所有核心業務，對外服務十多萬開發者，是業界主流的移動端組件庫之一。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，並由社區團隊維護 React 版本。
地區層級選擇組件屬於比較複雜的業務組件，使用vant地區選擇組件同時，可以對組件樣式進行修改，以滿足個人業務要求。
二、引入
1、安裝vant
使用npm i vant即可安裝vant最新版本：
npm i vant
安裝完畢之後可以選擇按需引入組件或者全局引入vant組件，這裏我們選擇按需引入。
2、引入
- 引入插件
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']
]
};
- 導入組件
通常使用地區選擇組件，需要搭配底部彈出組件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
| 參數 | 說明 | 類型 | 默認值 |
|---|---|---|---|
| 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>