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

2024-12-21 14:57:22

AddressEdit 地址编辑

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

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

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

4 如下：

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

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

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

这是编辑原图

项目原图

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

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

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

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

完美解决！

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

在vue中使用vant TreeSelect分类选择组件操作

中文文档:TreeSelect 分类选择效果展示: //先在你需要的页面中引入,第一个是弹出层,第二个是选择的 import { Popup } from "vant"; import { TreeSelect } from "vant"; 代码部分: <van-popup v-model="policeShow" position="top" :overlay="true"> <van
vant自定义二级菜单操作

(1)组件解释: 本组件是为了解决二级联动的效果编写的,这里使用了省份和城市分开的效果,具体展示效果,可以参考下面. (2)组件代码: <template> <div> <button @click="showM">{{ value || "选择省份" }}</button> <button @click="showC">{{ value2 || "选择城市" }}&
Vant picker 多级联动操作

官网地址:链接官网文档可能不是很完善,但仔细看文档,方法,类型其实都讲到的. 度娘也没有找到,花了大半天爬坑试错. 搭配弹出层使用 <van-field readonly clickable placeholder="选择城市" :value="station" @click="showPicker = true" /> <van-popup v-model="showPicker" position=&q
解决vue加scoped后就无法修改vant的UI组件的样式问题

有时候UI组件提供的默认的样式不能满足项目的需要,就需要我们对它的样式进行修改,但是发现加了scoped后修改的样式不起作用. 解决方法: 使用深度选择器,将scoped样式中的选择器"深入",即影响子组件 <style scoped> .a >>> .b { /* ... */ } </style> 以上的代码会编译成: .a[data-v-f3f3eg9] .b { /* ... */ } 注意:如果你使用了Less或Sass等预处理器,可
vue 公共列表选择组件,引用Vant-UI的样式方式

此组件用于公共选择组件.引用Vant UI 作为样式特性: 1.支持动态.静态数据源. 2.支持分页加载. 3.支持模糊搜索. 4.支持单选.多选. 组件源码: <template> <div class="gn-PubSelect"> <van-action-sheet v-model="inShow"> <div class="gn-PubSelect-main" :style="{'he
在vant 中使用cell组件定义图标该图片和位置操作

@本来想直接使用icon组件,使用阿里的图标库,可是怎么弄也不行,折腾一下午,最后决定使用最笨的办法,直接上代码 vant 中使用cell组件定义图标该图片和位置像微信信息栏一样 <div> <van-cell-group class="vanCellGroupClass"> <!--<van-cell icon="" title="二级经营单位&quo
微信小程序接入vant Weapp组件的详细步骤

刚创建的项目的文件结构首先在你项目的根目录下打开终端,输入npm init 对项目初始化这时会生成pachage.json文件. 继续在终端运行以下命令我这里用这个: npm i vant-weapp -S --production 运行完如图所示: 安装成功后回到小程序开发工具点击工具 => 构建npm 运行完截图: 完成后在编辑器右边的详情把红框内的打勾上使用组件在你想使用组件库的的json文件内引入组件.比如你想在fundIncome页面内使用button组件. 效果: 上
vant-ui AddressEdit地址编辑和van-area的用法说明

AddressEdit 地址编辑 1.vant-ui地址编辑中已配置 :area-list="areaList",以初始化全部省市区的数据这是结合vant-ui弹出层一起用的,用弹出层包裹省市区选择的组件,然后根据需要,参照官方文档,进行相关配置,默认底部弹出. 重要的是,官方没有说明具体怎么使用,所以在这里,要获取接收省市区的json数据.其中area.js文件在官方可以下载,放于assets/js/area.js ,然后引入文件,就可以了. 4 如下: <template&
easy ui datagrid 从编辑框中获取值的方法

如下所示: var editors = $('datagrid的id').datagrid('getEditors', rowIndex); //rowIndex 行编号,从0算起 console.info(editors[0].target.val()); 以上这篇easy ui datagrid 从编辑框中获取值的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
基于Vant UI框架实现时间段选择器

本文实例为大家分享了Vant UI框架实现时间段选择器的具体代码,供大家参考,具体内容如下组件代码如下: <template> <van-picker :title="title" :show-toolbar="showToolbar" :columns="columns" @confirm="onConfirm" @cancel="onCancel" @change="onC
Vant UI中van-collapse下拉折叠面板默认展开第一项的方法

目录问题重现需求实现附:vant之van-collapse无法默认展开某一项的解决方法总结问题重现最近在做项目时,有一个需求是让 van-collapse 下拉折叠面板的第一项默认是展开状态:我使用到了 Vant UI 组件,首先按照官网文档的写法直接引入:  <van-collapse class="collapse" v-model="activeNames" is-link="false&quo
详解如何在微信小程序开发中正确的使用vant ui组件

微信小程序终于可以支持npm导入第三方库了(https://developers.weixin.qq....),但是这种导入模式和使用模式有别于我们使用的npm调用.今天我按照有赞新出的vant小程序ui库来讲解如何导入npm资源. 第一步: 在小程序工程的根目录下执行: npm i vant-weapp -S --production 第二步: 保证当前你的微信开发者工具是最新版本,然后点击执行"构建npm" 构建成功后会提示: 同时项目根目录中会多出一个目录"minipr
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例

如果是已经有点经验的同学,可以直接看下面这个函数,应该就能明白怎么回事,新手可以看下面的详细教程. 函数: handleEdit: function (index, row) { this.editFormVisible = true; this.editForm = Object.assign({}, row); } 详细教程: 1.首先,做一个表格,用于显示信息:代码如下: <el-table :data="users" highlight-current-row v-loa
vue-amap根据地址回显地图并mark的操作

实现了地图选址功能后,现在来实现一个根据地址回显地图并标记的功能,效果图如下: 直接上代码: main.js中引入 import Vue from 'vue' import VueAMap from 'vue-amap' import App from './App' import router from './router' Vue.config.productionTip = false localStorage.clear(); Vue.use(VueAMap) VueAMap.initA
微信小程序中使用vant框架的具体步骤

目录 1.打开我们小程序的项目目录,然后打开文件所在的位置. 2.初始化项目文件 3.输入初始化项目的命令 4.安装依赖 5.使用组件 1.说到vant框架相信大家应该并不陌生了吧,做过移动端开发的小伙伴们应该都知道它吧. 2.Vant 是有赞前端团队开源的移动端组件库,于 2017 年开源,已持续维护 4 年时间.Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一. 3.我们废话不多说,直接进入今天的主题.我们该如何在微信小程序中去使用vant组件库呢!
React Native实现地址挑选器功能

本文实例为大家分享了React Native地址挑选器的实现代码,供大家参考,具体内容如下产品经理:"你明白吧,这里向右划可以出菜单,然后需要一个闪烁的动画,还有,我想这个tab可以拉下来,你懂吧? 设计师:"别废话,把你要抄的产品给我看下." - 接下来,我们仿一下别人家的地址挑选器 import React, { Component, PropTypes } from 'react'; import { ViewPropTypes, StyleSheet, View,
易语言解析获得无水印下载地址的代码

此功能需要加载精易模块5.6 常量数据表 .版本 2 .常量 head, "<文本长度: 52>", , 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64 取抖音无水印链接代码 .版本 2 .程序集窗口程序集_启动窗口 .子程序 _解析按钮_被单击无水印地址编辑框.内容＝获取抖音链接 (原地址编辑框.内容) .子程序获取抖音链接, 文本型, , 返回无水印链接 .参数分享链接, 文本型, , 分享链接地址

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

相关推荐

随机推荐