vue vant Area组件使用详解

请添加图片描述

文章目录

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