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>

5. 效果图

6. 项目源码

https://gitee.com/gblfy/vue2-vant-h5

vue vant Area组件使用详解相关推荐

php动态写入vue,Vue自定义动态组件使用详解
这次给大家带来Vue自定义动态组件使用详解,Vue自定义动态组件的注意事项有哪些,下面就是实战案例,一起来看一下. 现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这 ...
Vue组件-Confirm详解
Vue组件-Confirm详解原作者:爱扎马尾的小狮子一.使用的地方引用,传入属性和方法在需要的地方引入组件,然后传入对应的属性和方法组件 <template> <div : ...
vue高级进阶( 二 ) 8种组件通信详解
猛兽总是独行,牛羊才成群结队. -------鲁迅 vue组件通信的重要性无需多言...但是你肯定没有全部掌握,所以这第二篇文章应运而生 props和$emit props父传子,$emit子传父,看 ...
vue组件component详解
vue组件component详解组件介绍组件: 组件是拥有一定功能多个html标签的集合体,是对html标签的封装. 好处: 模板中为了实现一个(例如分页)效果,需要绘制20个html标签 ...
数据列表多选 html,Vue多选列表组件深入详解
这篇文章主要介绍了Vue多选列表组件深入详解,这个是vue的基本组件,有需要的同学可以研究下多选列表 (Multi-Select) 是一种将所有选项列出,并允许用户利用 Ctrl/Shift 键进行 ...
keep alive PHP,vue中keep-alive使用方法详解
这次给大家带来vue中keep-alive使用方法详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下. 1.keep-alive的作用以及好处在做电商有关的项目中 ...
Vue的生命周期过程详解
Vue的生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的 ...
Vue 中的 ref 属性详解
Vue 中的 ref 属性详解我们先来读一下vue的官方文档我们来分析官方文档首先ref的引用是相当于一个DOM节点(如果是子组件则指向的是其实例),而且是一个string类型的值. 通俗的将就 ...
vue里页面的缓存详解
关于vue里页面的缓存详解实用的例子ABC 往下查看 keep-alive是vue内置的一个组件,可以使被它包含的组件处于保留状态,或避免被重新渲染. 用法: 在keep-alive标签内部添加 i ...

vue vant Area组件使用详解

文章目录

1. 下载areaList.js

2. 组件注册

3. 封装组件

4. 使用组件

5. 效果图

6. 项目源码

vue vant Area组件使用详解相关推荐

最新文章

热门文章