详解关于vue-area-linkage走过的坑


Posted in Javascript onJune 27, 2018

最近写的项目是vue框架,搭配element-ui框架。这个框架上手快,而且页面的大部分样式都有现成的可以用,使用起来比较方便。前几天有一个需求是要写省市区联动选择,上网搜罗了一遍之后发现了vue-area-linkage这个插件,应该是专门为vue准备的插件,下面开始介绍这个插件的使用方法。

官网介绍的很详细了,我就不赘述了vue-area-linkage 安装及使用方法。

详解关于vue-area-linkage走过的坑

插件使用之后的样子

下面开始介绍遇到的坑以及解决办法:

1.样式问题:

这个问题比较好解决,去到依赖包中,查找css文件,找到对应的元素修改样式即可。因为我的是全局都要修改样式,所以我直接在依赖包中改。如果不是全局要改的样式,只是某个页面需要的样式就要在自己的css文件里面单独改,避免全局污染。

详解关于vue-area-linkage走过的坑

修改全局样式的文件

2.打包时出现 “Module not found: Error: Cant`t resolve 'vue-area-linkage/dist/index.css' in '/app/src/views/devcie'”

在 main.js 中全局注入文件,然后再在文件中注入:

详解关于vue-area-linkage走过的坑

main.js 中注入

详解关于vue-area-linkage走过的坑

文件中注入

3.有需求是新增和编辑,我写的逻辑是一套代码,控制显示隐藏,此为背景。出现的问题是,如果先点击编辑,会直接显示接口返回的地址,然后再点击新增,还会显示刚刚编辑的地址,即使清除 v-model 绑定的数据也清除不掉显示的内容(坑)。

下面开始讲述我的踩坑之路:

既然一套代码不行,那就两套代码咯。立马复制粘贴,what f***,这代码也太多了,而且逻辑还得改,保存还得改,果断放弃。对自己还得有点要求才行。

那要不新增的时候重置这个置,于是把值置为空,不好使;那要不控制一下 placeholder,不好使;使用jq控制一下 placeholder , 不好使,果断放弃。

那要不看看源码。看到了源码,找到了对应的方法 area_cascader_render , debugger 之后,发现在进入页面的时候会渲染一下页面,然后就不会继续渲染了,不渲染,那值自然就是之前的值。思考了一下,想到如果我在保存或者返回页面的时候销毁这个组件,然后在新增的时候不就可以重新渲染了吗,于是果断 v-if ,保存返回的时候置为false,新增置为true,完美解决,下班。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
jQuery 动态酷效果实现总结
Dec 27 Javascript
jQuery的三种$()
Dec 30 Javascript
基于jquery实现图片广告轮换效果代码
Jul 07 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
JS读取XML文件示例代码
Nov 15 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 Javascript
原生js实现水平方向无缝滚动
Jan 10 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
Angular ElementRef简介及其使用
Oct 01 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 #Javascript
Vue引入sass并配置全局变量的方法
Jun 27 #Javascript
详解解决使用axios发送json后台接收不到的问题
Jun 27 #Javascript
vue中v-model的应用及使用详解
Jun 27 #Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 #Javascript
Vue实现todolist删除功能
Jun 26 #Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 #Javascript
You might like
php+mysql查询优化简单实例
2015/01/13 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
laravel-admin的图片删除实例
2019/09/30 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
js几个验证函数代码
2010/03/25 Javascript
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
微信小程序实现页面浮动导航
2020/01/08 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
python中cPickle用法例子分享
2014/01/03 Python
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
详细解析Python中的变量的数据类型
2015/05/13 Python
Python中Class类用法实例分析
2015/11/12 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
Python2包含中文报错的解决方法
2018/07/09 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
会计出纳岗位职责
2013/12/25 职场文书
质量月活动策划方案
2014/03/10 职场文书
学生自我评语
2015/01/04 职场文书
世界环境日活动总结
2015/02/11 职场文书
导游词之神仙居景区
2019/11/15 职场文书
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python
Redis分布式锁的7种实现
2022/04/01 Redis
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技