使用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 继承机制实例
Aug 12 Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
javascript实现禁止复制网页内容
Dec 16 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
Javascript使用uploadify来实现多文件上传
Nov 16 Javascript
微信小程序 video详解及简单实例
Jan 16 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
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
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
JS 统计时间
2021/03/09 Javascript
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
python的文件操作方法汇总
2017/11/10 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
python实现浪漫的烟花秀
2019/01/30 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
python实现函数极小值
2019/07/10 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
办公室文秘自我评价
2013/09/21 职场文书
大学毕业登记表自我鉴定
2013/10/09 职场文书
玩具公司的创业计划书
2013/12/31 职场文书
退伍老兵事迹材料
2014/01/31 职场文书
元旦寄语大全
2014/04/10 职场文书
小学生倡议书范文
2014/05/13 职场文书
《将心比心》教学反思
2016/02/23 职场文书
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server