详解关于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，完美解决，下班。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 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走过的坑

    今天手贱更新了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搭建接口测试平台实战

    详解Django+Vue+Docker搭建接口测试平台实战

    一. 开头说两句 大家好,我叫林宗霖,是一位测试工程师,也是全栈测开训练营中的一名学员. 在跟着训练营学习完Docker容器技术系列的课程后,理所应当需要通过实操来进行熟悉巩固.正好接口自动化测试平台需要迁移到新的测试服务器上,就想要体验一番Docker的"一次构建,处处运行".这篇文章简单介绍了下这次部署的过程,其中使用了Dockerfile定制镜像和Docker-Compose多容器编排. 二. 项目介绍 项目采用的是前后端分离技术来实现的,前端是Vue+ElementUI,后端是

  • 详解基于Vue cli开发修改外部组件Vant默认样式

    详解基于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的组件传值着手观察者模式

    详解从vue的组件传值着手观察者模式

    观察者模式 首先,提到观察者模式,这不禁让我想到了MVVM,MVVM架构模式感觉用到了观察者的思想. 我们还是按照惯例,了解一下什么是观察者模式 观察者模式,类似发布订阅模式,完成这个动作首先最少得有两个不同的对象,或者多个对象,他更像是一种一队多的依赖关系,也就是一种对象的状态发生改变,与其相关所有的对象的状态都会发生改变:比如说朋友圈这个功能,一个人可能有上百个好友,当我发布一条朋友圈后,所有和我成为好友的人都会看见这个朋友圈,当另一个人点赞后,所有你的好友其他点赞的人也会收到通知,这很像观

  • 详解为什么Vue中的v-if和v-for不建议一起用

    详解为什么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算法进行优化 两者在用法上 <

随机推荐