详解关于vue-area-linkage走过的坑
最近写的项目是vue框架,搭配element-ui框架。这个框架上手快,而且页面的大部分样式都有现成的可以用,使用起来比较方便。前几天有一个需求是要写省市区联动选择,上网搜罗了一遍之后发现了vue-area-linkage这个插件,应该是专门为vue准备的插件,下面开始介绍这个插件的使用方法。
官网介绍的很详细了,我就不赘述了vue-area-linkage 安装及使用方法。
插件使用之后的样子
下面开始介绍遇到的坑以及解决办法:
1.样式问题:
这个问题比较好解决,去到依赖包中,查找css文件,找到对应的元素修改样式即可。因为我的是全局都要修改样式,所以我直接在依赖包中改。如果不是全局要改的样式,只是某个页面需要的样式就要在自己的css文件里面单独改,避免全局污染。
修改全局样式的文件
2.打包时出现 “Module not found: Error: Cant`t resolve 'vue-area-linkage/dist/index.css' in '/app/src/views/devcie'”
在 main.js 中全局注入文件,然后再在文件中注入:
main.js 中注入
文件中注入
3.有需求是新增和编辑,我写的逻辑是一套代码,控制显示隐藏,此为背景。出现的问题是,如果先点击编辑,会直接显示接口返回的地址,然后再点击新增,还会显示刚刚编辑的地址,即使清除 v-model 绑定的数据也清除不掉显示的内容(坑)。
下面开始讲述我的踩坑之路:
既然一套代码不行,那就两套代码咯。立马复制粘贴,what f***,这代码也太多了,而且逻辑还得改,保存还得改,果断放弃。对自己还得有点要求才行。
那要不新增的时候重置这个置,于是把值置为空,不好使;那要不控制一下 placeholder,不好使;使用jq控制一下 placeholder , 不好使,果断放弃。
那要不看看源码。看到了源码,找到了对应的方法 area_cascader_render , debugger 之后,发现在进入页面的时候会渲染一下页面,然后就不会继续渲染了,不渲染,那值自然就是之前的值。思考了一下,想到如果我在保存或者返回页面的时候销毁这个组件,然后在新增的时候不就可以重新渲染了吗,于是果断 v-if ,保存返回的时候置为false,新增置为true,完美解决,下班。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
Vue使用vue-area-linkage实现地址三级联动效果的示例
很多时候我们需要使用地址三级联动,即省市区三级联动.网上有很多插件,在此介绍Vue的一款地区联动插件:vue-area-linkage,下面介绍如何使用这个插件实现地址联动效果: 1.安装vue-area-linkage插件:npm install --save vue-area-linkage --registry=https://registry.npm.taobao.org --verbose 2.在main.js上进行依赖注入,如下图所示: 3.在对应vue文件的template模板上写
-
详解关于Vue单元测试的几个坑
一.写在前面 这篇文章的代码使用karma,mocha,chai,sinon-chai配合Vue的实例属性进行单元测试 二.全局的组件的坑 由于我的g-icon是全局注册的,所以使用g-input组件时的时候g-icon是直接用的,所以测试时有关icon的代码永远是错的. 把g-icon局部注册的组件 三.在测试中触发点击事件 模拟我在app.vue里使用g-input组件 <g-input v-model="message"></g-input> 使用new
-
详解关于MySQL 8.0走过的坑
今天手贱更新了MySQL 8.0 第一个问题:Navicat连接不上数据库 安装的mysql为localhost:3306,配置一切默认,安装后打开Navicat 12 新建连接,直接报错 authentication plugin 'caching_sha2_password' 身份验证插件不能被加载 查了下官方文档6.5.1.3 Caching SHA-2 Pluggable Authentication 原来在MySQL 8.0中,caching_sha2_password取代了mysql
-
详解为什么Vue中不要用index作为key(diff算法)
前言 Vue 中的 key 是用来做什么的?为什么不推荐使用 index 作为 key?常常听说这样的问题,本篇文章带你从原理来一探究竟. 另外本文的结论对于性能的毁灭是针对列表子元素顺序会交换.或者子元素被删除的特殊情况,提前说明清楚,喷子绕道. 本篇已经收录在 Github 仓库,欢迎 Star: https://github.com/sl1673495/blogs/issues/39 示例 以这样一个列表为例: <ul> <li>1</li> <li>
-
详解在Vue.js编写更好的v-for循环的6种技巧
在VueJS中,v-for循环是每个项目都会使用的东西,它允许您在模板代码中编写for循环. 在最基本的用法中,它们的用法如下. <ul> <li v-for='product in products'> {{ product.name }} </li> </ul> 但是,在本文中,我将介绍六种方法来使你的 v-for 代码更加精确,可预测和强大. 让我们开始吧. 1.始终在v-for循环中使用key 首先,我们将讨论大多数Vue开发人员已经知道的常见最佳做
-
详解实现vue的数据响应式原理
这篇文章主要是给不了解或者没接触过 vue 响应式源码的小伙伴们看的,其主要目的在于能对 vue 的响应式原理有个基本的认识和了解,如果在面试中被问到此类问题,能够知道面试官想让你回答的是什么?「PS:文中如有不对的地方,欢迎小伙伴们指正」 响应式的理解 响应式顾名思义就是数据变化,会引起视图的更新.这篇文章主要分析 vue2.0 中对象和数组响应式原理的实现,依赖收集和视图更新我们留在下一篇文章分析. 在 vue 中,我们所说的响应式数据,一般指的是数组类型和对象类型的数据.vue 内部通过
-
详解Django+Vue+Docker搭建接口测试平台实战
一. 开头说两句 大家好,我叫林宗霖,是一位测试工程师,也是全栈测开训练营中的一名学员. 在跟着训练营学习完Docker容器技术系列的课程后,理所应当需要通过实操来进行熟悉巩固.正好接口自动化测试平台需要迁移到新的测试服务器上,就想要体验一番Docker的"一次构建,处处运行".这篇文章简单介绍了下这次部署的过程,其中使用了Dockerfile定制镜像和Docker-Compose多容器编排. 二. 项目介绍 项目采用的是前后端分离技术来实现的,前端是Vue+ElementUI,后端是
-
详解基于Vue cli开发修改外部组件Vant默认样式
前言 在引入外部组件的时候,想要修改默认样式,可以通过class修改,但一般会有权重不够等各种原因,官网其实列出了一套主题定制的方案,通过覆盖配置文件来修改样式,官网地址:主题定制 提示:以下是本篇文章正文内容,下面案例可供参考 一.Less 因为Vant 使用了 Less 对样式进行预处理,并内置了一些样式变量,可以通过替换样式变量即可定制你自己需要的主题. 给你的项目配置less: npm install less --save-dev npm install less-loader --s
-
详解在vue使用weixin-js-sdk常见使用方法
链接:https://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3#.E6.AD.A5.E9.AA.A4.E4.B8.80.EF.BC.9A.E5.BC.95.E5.85.A5JS.E6.96.87.E4.BB.B6 1.导入依赖包 npm install weixin-js-sdk 2.判断是否是在微信浏览器中 env.js <script> var ua = navig
-
详解从vue的组件传值着手观察者模式
观察者模式 首先,提到观察者模式,这不禁让我想到了MVVM,MVVM架构模式感觉用到了观察者的思想. 我们还是按照惯例,了解一下什么是观察者模式 观察者模式,类似发布订阅模式,完成这个动作首先最少得有两个不同的对象,或者多个对象,他更像是一种一队多的依赖关系,也就是一种对象的状态发生改变,与其相关所有的对象的状态都会发生改变:比如说朋友圈这个功能,一个人可能有上百个好友,当我发布一条朋友圈后,所有和我成为好友的人都会看见这个朋友圈,当另一个人点赞后,所有你的好友其他点赞的人也会收到通知,这很像观
-
详解为什么Vue中的v-if和v-for不建议一起用
本文主要介绍了为什么v-if和v-for不建议一起用?分享给大家,具体如下: 一.作用 v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 true值的时候被渲染 v-for 指令基于一个数组来渲染一个列表.v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组或者对象,而 item 则是被迭代的数组元素的别名 在 v-for 的时候,建议设置key值,并且保证每个key值是独一无二的,这便于diff算法进行优化 两者在用法上 <
随机推荐
- 详解PHP用substr函数截取字符串中的某部分
- node.js发送邮件email的方法详解
- JQuery对ASP.NET MVC数据进行更新删除
- Java 队列 Queue 用法实例详解
- 将数字转换成大写的人民币表达式的js函数
- 用sql命令修改数据表中的一个字段为非空(not null)的语句
- Android布局之LinearLayout线性布局
- Zend Framework分页类用法详解
- 深入理解GO语言的面向对象
- Mysql的基础使用之MariaDB安装方法详解
- Android自定义控件的创建方法
- javascript中常见的3种信息提示框(alert,prompt,confirm)
- jquery next nextAll nextUntil siblings的区别介绍
- PHP学习笔记之php文件操作
- shell脚本 自动创建用户详解及实例代码
- js 链式延迟执行DOME
- Windows中IIS内FTP服务器高级配置图文教程
- CentOS 6 启动流程详细介绍
- 浅谈c语言中类型隐性转换的坑
- 从源码编译Android系统的Java类库和JNI动态库的方法