目錄

• • • 一、介紹
    • 二、引入
    • • 1、安裝vant
      • 2、引入
    • 三、使用

一、介紹

??Vant 是有贊前端團(tuán)隊(duì)開源的移動(dòng)端組件庫，于 2017 年開源，已持續(xù)維護(hù) 4 年時(shí)間。Vant 對(duì)內(nèi)承載了有贊所有核心業(yè)務(wù)，對(duì)外服務(wù)十多萬開發(fā)者，是業(yè)界主流的移動(dòng)端組件庫之一。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社區(qū)團(tuán)隊(duì)維護(hù) React 版本。
??地區(qū)層級(jí)選擇組件屬于比較復(fù)雜的業(yè)務(wù)組件，使用vant地區(qū)選擇組件同時(shí)，可以對(duì)組件樣式進(jìn)行修改，以滿足個(gè)人業(yè)務(wù)要求。

二、引入

1、安裝vant

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

npm i vant

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

2、引入

引入插件

??babel-plugin-import 是一款 babel 插件，它會(huì)在編譯過程中將 import 的寫法自動(dòng)轉(zhuǎn)換為按需引入的方式。引入方法如下：

npm i babel-plugin-import -D

添加babel的配置
使用babel配置不會(huì)出現(xiàn)組件樣式無法加載問題，否則則需要按需引入組件樣式文件。

// 在.babelrc 中添加配置 // 注意：webpack 1 無需設(shè)置 libraryDirectory {"plugins": [["import", {"libraryName": "vant","libraryDirectory": "es","style": true}]] }// 對(duì)于使用 babel7 的用戶，可以在 babel.config.js 中配置 module.exports = {plugins: [['import', {libraryName: 'vant',libraryDirectory: 'es',style: true}, 'vant']] };

導(dǎo)入組件

??通常使用地區(qū)選擇組件，需要搭配底部彈出組件Popup一起使用，引入兩個(gè)vant組件：

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

其中，引入的AreaList包含了所有的地區(qū)的地區(qū)代碼，文件地址為：https://download.csdn.net/download/m0_46309087/14001917。

三、使用

??引入Area, Popup兩個(gè)組件以后，通過閱讀兩個(gè)組件API文檔使用這兩個(gè)組件，以下是兩個(gè)組件api文檔，這里api接口較多，我們僅選擇我們需要的幾個(gè)api做說明：

• popup

參數(shù)說明類型默認(rèn)值

v-model (value)	是否顯示彈出層	boolean	false
position	彈出位置，可選值為 top bottom right left	string	center

• Area

事件說明回調(diào)參數(shù)

confirm	點(diǎn)擊右上方完成按鈕	一個(gè)數(shù)組參數(shù)
cancel	點(diǎn)擊取消按鈕時(shí)	-

對(duì)于area組件，以上兩個(gè)事件對(duì)應(yīng)的是確認(rèn)和取消兩個(gè)按鈕的事件，其他的api詳見VantDOC；

地區(qū)組件最關(guān)鍵的就是入?yún)⑴c出參，入?yún)?shù)據(jù)格式為：

{province_list: {110000: '北京市',120000: '天津市'},city_list: {110100: '北京市',110200: '縣',120100: '天津市',120200: '縣'},county_list: {110101: '東城區(qū)',110102: '西城區(qū)',110105: '朝陽區(qū)',110106: '豐臺(tái)區(qū)'120101: '和平區(qū)',120102: '河?xùn)|區(qū)',120103: '河西區(qū)',120104: '南開區(qū)',120105: '河北區(qū)',// ....} }

完整的數(shù)據(jù)見https://download.csdn.net/download/m0_46309087/14001917。

選擇完畢點(diǎn)擊確定按鈕，confirm事件獲取參數(shù)，出參數(shù)據(jù)格式為：

//返回的數(shù)據(jù)整體為一個(gè)數(shù)組，數(shù)組內(nèi)包含 columnsNum 個(gè)數(shù)據(jù)， 每個(gè)數(shù)據(jù)對(duì)應(yīng)一列選項(xiàng)中被選中的數(shù)據(jù)。//code 代表被選中的地區(qū)編碼， name 代表被選中的地區(qū)名稱[{code: '110000',name: '北京市',},{code: '110100',name: '北京市',},{code: '110101',name: '東城區(qū)',}, ];

實(shí)現(xiàn)的效果如下圖：
完整代碼如下：

<template><div><div class="flex-input"><div class="tx-lable">{{ itemName }}</div><div class="tx-input" @click="areaChoose"><inputtype="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-areatitle="選擇地區(qū)":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: "地區(qū)"},phdText: {type: String, //按鈕名稱default: "請(qǐng)選擇地區(qū)"},showUnderline: {type: Boolean,default: true}},components: {DLine},data() {return {areaList: {}, //省市區(qū)列表itemCount: 7,showAddrPopup: false, //彈出層展示chooseValue: ""};},created() {this.initParams();},methods: {clickhandle() {//使用emit，第一個(gè)參數(shù)為子組件組件方法，第二個(gè)參數(shù)為該方法傳遞的參數(shù)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>

總結(jié)

以上是生活随笔為你收集整理的vant area地区选择组件使用方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。