详解关于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 相关文章推荐
jQuery 操作XML入门
Dec 25 Javascript
javascript之典型高阶函数应用介绍
Jan 10 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
jQuery 仿百度输入标签插件附效果图
Jul 04 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
Bootstrap CSS布局之表格
Dec 17 Javascript
JS如何生成一个不重复的ID的函数
Dec 25 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
React四级菜单的实现
Apr 08 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
windows xp下安装pear
2006/12/02 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
JS分页效果示例
2013/10/11 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
cookie的secure属性详解
2015/04/08 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
Python正则捕获操作示例
2017/08/19 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
python如何求圆的面积
2020/07/01 Python
使用Python pip怎么升级pip
2020/08/11 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
请介绍一下WSDL的文档结构
2013/03/17 面试题
2014年健康教育实施方案
2014/02/17 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
村干部承诺书
2014/03/28 职场文书
师德师风的心得体会
2014/09/02 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
详解Python为什么不用设计模式
2021/06/24 Python