文章目錄

• • • • • • 1. 下載areaList.js
          • 2. 組件注冊
          • 3. 封裝組件
          • 4. 使用組件
          • 5. 效果圖
          • 6. 項目源碼

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"><inputtype="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-arearef="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 = areaNameconsole.log("chooseTempValue", this.chooseTempValue)},//點擊imput觸發，彈框事件areaChoose() {this.showAddrPopup = true;},//點擊取消后的事件onCancel() {this.showAddrPopup = false//關閉彈框//由于對滾動的數據保存到臨時的變量chooseTempValue中，與選擇后現實的數據做了解耦合，因此，這里不炫耀重置城市列表// this.$refs.myArea.reset()// 重置城市列表},//當提交表單數據時需要，將地區數據提交到后端，因此，當選擇完成后//確定選擇后保存事件confArea(data) {this.chooseValue = this.chooseTempValueconsole.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

總結

以上是生活随笔為你收集整理的vue vant Area组件使用详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。