vant-ui AddressEdit地址编辑和van-area的用法说明


Posted in Javascript onNovember 03, 2020

AddressEdit 地址编辑

1.vant-ui地址编辑中已配置 :area-list=“areaList”,以初始化全部省市区的数据

这是结合vant-ui弹出层一起用的,用弹出层包裹省市区选择的组件,然后根据需要,参照官方文档,进行相关配置,默认底部弹出。

重要的是,官方没有说明具体怎么使用,所以在这里,要获取接收省市区的json数据。其中area.js文件在官方可以下载,放于assets/js/area.js ,然后引入文件,就可以了。

vant-ui AddressEdit地址编辑和van-area的用法说明

如下:

<template>
 <div>
 <van-nav-bar title="地址信息" left-text="返回" left-arrow @click-left="onClickLeft"/>
 <van-address-edit
 :area-list="areaList"
 show-postal
 show-delete
 show-set-default
 show-search-result
 :search-result="searchResult"
 @save="onSave"
 @delete="onDelete"
 @change-detail="onChangeDetail"
 />
 </div>
</template>

<script>
import areaList from "../assets/js/area.js";
import { Toast } from "vant";
export default {
 name: "Address",
 data() {
 return {
 areaList,
 searchResult: []
 };
 },
 methods: {
 onClickLeft() {
 this.$router.push("/my");
 },
 onSave() {
 this.$router.push("/my");
 },
 onDelete() {
 Toast("delete");
 this.$router.push("/my");
 },
 onChangeDetail(val) {
 if (val) {
 this.searchResult = [
  {
  name: "万达广场",
  address: "郑州市二七区"
  }
 ];
 } else {
 this.searchResult = [];
 }
 }
 }
};
</script>

<style scoped>
</style>

vant-ui AddressEdit地址编辑和van-area的用法说明

补充知识:vue移动端地址编辑地址回显

写这篇文章主要是前面写这个地址的时候遇到了一些坑,走了许多弯路,这里记录一下,给新手朋友们指道,

这是编辑原图

vant-ui AddressEdit地址编辑和van-area的用法说明

项目原图

最开始我用了vant ui框架,在地址这方面vant一直很好用,地址列表 省市区选择组件都用,

最开始没什么问题 在经历了几次版本更新之后 不知道什么页面与vant地址选择组件起冲突,导致选择省市区的时候 弹框里空白,在经历了无数次尝试之后,我放弃了 改用了muse省市区选择组件,但是地址回显的时候由于后端返回不了城市编码,没办法 最后使用了vux ,

使用了vuex的组件又遇到一点麻烦,我是只有在地址列表把地址详情传过去,然后在created接受,并直接赋值给组件,这是时候发现页面地址选择部分白板,并没有达到我们想要的回显效果,后面研究了一下 是因为我们在created直接赋值 导致赋值实在页面渲染完毕之前的 这时候页面就无法显示渲染之前的内容,下面是我的解决办法

不能直接在created时给组件赋值,在methods写个方法 0.1s之后再赋值 .1s已经足够页面渲染完成 只要页面渲染完毕再辅助 就能正常显示

vant-ui AddressEdit地址编辑和van-area的用法说明

vant-ui AddressEdit地址编辑和van-area的用法说明

完美解决!

以上这篇vant-ui AddressEdit地址编辑和van-area的用法说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
菜鸟javascript基础整理1
Dec 06 Javascript
网页打开自动最大化的js代码
Aug 22 Javascript
node.js中的fs.unlinkSync方法使用说明
Dec 15 Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
node.JS md5加密中文与php结果不一致的解决方法
May 05 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
关于ES6箭头函数中的this问题
Feb 27 Javascript
详解如何在nuxt中添加proxyTable代理
Aug 10 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
Vue实现手机扫描二维码预览页面效果
May 28 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 #Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 #Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 #Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 #Javascript
vue+elementUI中表格高亮或字体颜色改变操作
Nov 02 #Javascript
vue element-ui中table合计指定列求和实例
Nov 02 #Javascript
vue 动态添加class,三个以上的条件做判断方式
Nov 02 #Javascript
You might like
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
微信公众平台接口开发入门示例
2014/12/24 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
composer.lock文件的作用
2016/02/03 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
js闭包实例汇总
2014/11/09 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
python如何操作mysql
2020/08/17 Python
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
六道php面试题附答案
2014/06/05 面试题
教师求职自荐书
2014/06/14 职场文书
英语系毕业生求职信
2014/07/13 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
欢迎词范文
2015/01/27 职场文书
先进个人自荐书
2015/03/06 职场文书