由于官方例子中并没有太多详情,因此记录之,方便以后使用。

1.配置 :area-list="areaList",以初始化全部省市区的数据,其中area.js文件在官方可以下载,放于assets/js/area.js

2. onAddrConfirm (e) 获取数据

<template>
<div>
<van-address-edit
:area-list="areaList"
:address-info="addressInfo"
show-postal
show-delete
show-set-default
show-search-result
:search-result="searchResult"
@save="onSave"
@delete="onDelete"
@change-detail="onChangeDetail"
/>
<div><span>公司名称:</span><input v-model="comName"/></div>
<div><span>姓名:</span><input v-model="name"/></div>
<div><span>移动电话:</span><input v-model="phone"/></div>
<div style="font-size: 14px"><span style="margin-left: 13px">公司地址:</span><input class="addr-input" v-model="province" @click="show" />
<input class="addr-input" v-model="city" @click="show"/>
<input class="addr-input" v-model="district" @click="show"/>
<van-field
v-model="street"
type="text"
placeholder="街道门牌、楼层房间号等信息"
/>
</div>
<div v-show="flag">
<van-area :area-list="areaList" :item-height=25 @confirm="onAddrConfirm" @cancel="shut" :value="addrCode"/>
</div>
</div>
</template> <script>
import areaList from '../../assets/js/area'
export default {
components: {areaList},
data () {
return {
comName: {},
searchResult: '',
addrCode: '440105',
province: '',
city: '',
district: '',
street: '',
companyName: '',
name: '',
phone: '',
address: '',
areaList: null,
flag: false
// flag: true
}
},
created () {
this.init()
},
methods: {
init () {
// 初始化地址选择器
this.areaList = areaList.areaList // 初始化选择器数据
// 初始化复选框
this.allMajor = this.getMajor()
},
show () {
this.flag = true
},
onAddrConfirm (e) { // 点击确认,获取所选的省市区数据
// 确定选择,返回的必定是三元素数组
console.log('this.onAddrConfirm=>e', e)
this.province = e[0].name
this.city = e[1].name
this.district = e[2].name
this.flag = false
},
shut () {
this.flag = false
},
onChangeDetail (val) {
if (val) {
this.searchResult = [{
name: '黄龙万科中心',
address: '杭州市西湖区'
}]
} else {
this.searchResult = []
}
}
}
}
</script> <style scoped>
@import '../../assets/css/mycss.css';
</style>

vant-ui的van-area使用的更多相关文章

  1. 自定义vant ui steps组件效果实现

    记录个问题,当作笔记吧:因为vue项目的移动端vant ui 的step组件跟ui设计图有差别,研究了半天还是没法使用step组件,只能手动设置一个 先上效果图和代码: (1)HTML部分 <d ...

  2. Vant UI 安装

    一:安装 npm i vant -S 二.引入组件(共有三个方法) 方法一:使用 babel-plugin-import (推荐) 1. 安装 babel-plugin-import 插件 npm i ...

  3. Vant ui

    轻量.可靠的移动端 Vue 组件库 https://youzan.github.io/vant/#/zh-CN/intro postcss-pxtorem vue:将px转化为rem,适配移动端van ...

  4. 把项目中的vant UI组件升级

    首先把之前 的VANT 卸载掉 npm uninstall vant 然后重新安装 一次vant npm i vant -S

  5. Vant UI 组件库如何做rem适配?

    Vant是一款移动端基于vue的组件库,V2.1.1版本非常棒.文档地址:https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/intro,那么V ...

  6. vue使用Vant UI中的swiper组件及传值

    子组件SwiperBanner <!-- --> <template> <div class="swiper"> <van-swipe : ...

  7. vant ui TabBar封装

    TabBar.vue基本上是放在App.vue里面,都存在 <template> <div id="app"> <home-tab-bar :tar- ...

  8. vue+vant ui+高德地图的选址组件

    首先在index.html引入高德地图的js <script src="https://webapi.amap.com/maps?v=1.4.14&key=你的key" ...

  9. vant ui 吸顶组件慎用 2020-1-15

  10. 16款优秀的Vue UI组件库推荐

    16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...

随机推荐

  1. 5. Sersync实时同步

    rsync+Sersync数据的实时同步 sersync介绍 1.什么是实时同步 监控一个目录的变化, 当该目录触发事件(创建\删除\修改) 就执行动作, 这个动作可以是 rsync同步 ,也可以是其 ...

  2. 用深度优先搜索(DFS)解决多数图论问题

    前言 本文大概是作者对图论大部分内容的分析和总结吧,\(\text{OI}\)和语文能力有限,且部分说明和推导可能有错误和不足,希望能指出. 创作本文是为了提供彼此学习交流的机会,也算是作者在忙碌的中 ...

  3. $nextTick 页面局部刷新 延迟加载

    Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick 本人写 ...

  4. django-表单之获取表单信息(二)

    urls.py from django.urls import path from . import views urlpatterns = [ path('',views.index,name=&q ...

  5. Linux 提示符格式及颜色

    # 提示符颜色配置: 颜色  黑   红  绿  黄  青   紫  蓝  白 字体  30  31  32  33 34  35  36  37 背景  40  41  42  43 44  45 ...

  6. 机器学习回顾篇(9):K-means聚类算法. slides

    .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...

  7. 前后端分离,转json格式问题

    json格式是字符串形式,将数据库中的数据取出来转为json格式时,要将小数等数据转位字符串(str方法) 报错类型: 1,decimal(5,2)  表示5位数,其中小数有两位,decimal要转为 ...

  8. 入门Android底层需要的一些技能

    <Android的设计与实现> Android框架层<Linux系统编程手册> Linux系统编程<Android内核剖析> 编译框架和romC语言和Linux内核 ...

  9. [考试反思]0825NOIP模拟测试30:没落

    AB卷,15人. Lrefrain rank#1 179 skyh rank#2 122 116 108 54 42虽说还是不怎么样,但是有好转的迹象. 开卷审题,T1是个(假)期望,感觉也许还可做. ...

  10. 原生JS封装_new函数,实现new关键字的功能

    1.前言 众所周知:没有对象怎么办?那就new一个! 那么在JS中,当我们new一个对象的时候,这个new关键字内部都干了什么呢? 现在我们就来剖析一下原生JS中new关键字内部的工作原理. 2.原生 ...