详解关于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 相关文章推荐
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
js中判断控件是否存在
Aug 25 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
js单词形式的运算符
May 06 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 Javascript
node.js实现快速截图
Aug 27 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 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正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
javascript innerText和innerHtml应用
2010/01/28 Javascript
Javascript调用C#代码
2011/01/17 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
Python中请不要再用re.compile了
2019/06/30 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
在什么时候需要使用"常引用"
2015/12/31 面试题
2014年护理工作总结范文
2014/11/14 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
Python中文纠错的简单实现
2021/07/07 Python
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL
python解析照片拍摄时间进行图片整理
2022/07/23 Python