使用vant的地域控件追加全部选项


Posted in Javascript onNovember 03, 2020

在项目中使用了vant的Area插件,需要进行全部匹配,vant本身没有实现,需要改造代码,方法如下:

<div class="site">
 <span class>起点</span>
 <van-cell v-model="start" @click="areaSelect(0)"></van-cell>
</div>
<div class="site">
 <span>终点</span>
 <van-cell v-model="end" @click="areaSelect(1)"></van-cell>
</div>
<van-popup v-model="show" position="bottom">
 <van-area :area-list="areaList" @cancel="onCancel" @confirm="onConfirm" @change="change" ref="area" />
</van-popup>

vue的methos中添加下面两个方法:

change(picker, value, index){
  if(value[0].code != 100000){

  if(index == 0){
   let addr = this.areaList;
   let areaListCode = value[0].code;
   let code1 = Object.assign({},addr.city_list,{[areaListCode]:"全部"});
   let code2 = Object.assign({},addr.county_list,{[areaListCode]:"全部"});
   this.areaList.city_list = code1;
   this.areaList.county_list = code2;
  }
  if (index == 1) {
   let addr = this.areaList;
   let areaListCode = value[1].code;
   let code = Object.assign({},addr.county_list,{[areaListCode]: "全部"});
   this.areaList.county_list = code;
  }
  }
 },
 areaSelect(type) {
  let addr = this.areaList;
  this.PickerType = type;
  this.show = true;  
  if(this.PickerType == 1 && this.endAddrInfo == "请选择"){
   this.$refs.area.reset();
  };
  let province_list = Object.assign({},addr.province_list,{100000:"全部"});
  let city_list = Object.assign({},addr.city_list,{100100:"全部"});
  let county_list = Object.assign({},addr.county_list ,{100101:"全部"});
  this.areaList={
  province_list,city_list,county_list
  };
 },

补充知识:使用vant中的Area 省市区选择和Area控件如果没有选中第三级的话就选不到当前值

今天要使用Area选择器在网上查了很多方法一直都无法让他隐藏再弹出来今天我就写下我的心得

效果图如下:

使用vant的地域控件追加全部选项

Area组件一般都是配合van-cell使用的

使用vant的地域控件追加全部选项

1,在加载页面的时候我让show为false

使用vant的地域控件追加全部选项

使用vant的地域控件追加全部选项

然后在点击了van-cell组件之后调用areaSelect方法把show变为true就能显示

使用vant的地域控件追加全部选项

使用vant的地域控件追加全部选项

然后还有就是如要要有联动效果一定要在给个初始值,这个的作用就是你点击area控件之后弹出控件就算不选址直接点击确定也可以有默认值

使用vant的地域控件追加全部选项

在者就是要想取的值一定要给onChange写成这样,不然的话,如果你没有触发第三级(就是区县的话)就不会刷新就是还是上一个选中的区县的值,刚开始我是写成这样

错误的:

使用vant的地域控件追加全部选项

正确的:

使用vant的地域控件追加全部选项

以上这篇使用vant的地域控件追加全部选项就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript new一个对象的实质
Jan 07 Javascript
javascript 静态对象和构造函数的使用和公私问题
Mar 02 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
通过设置CSS中的position属性来固定层的位置
Dec 14 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
JS运动特效之任意值添加运动的方法分析
Jan 24 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 Javascript
vue vant中picker组件的使用
Nov 03 #Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 #Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 #Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 #Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 #Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 #Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 #Javascript
You might like
Memcache 在PHP中的使用技巧
2010/02/08 PHP
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
Python3 replace()函数使用方法
2018/03/19 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
C/C++有关内存的思考题
2015/12/04 面试题
出国签证在职证明
2014/01/16 职场文书
房地产促销活动方案
2014/03/01 职场文书
建筑施工安全责任书
2014/07/24 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
美丽的大脚观后感
2015/06/03 职场文书
协议书格式模板
2016/03/24 职场文书
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL