随笔分类 - vue
摘要：beforeRouteLeave需求描述在使用 element-UI的table 的时候，有这么一个需求。从一个页面切换到另一个页面，再切回来的时候，滚动条的位置不变。 需求：滚动浏览列表页，出现滚动条，点击用户名之后，跳转到商铺管理（发生路由跳转）。从商铺列表返回到信息列表之后，列表页还是之前所浏
阅读全文
摘要：距离Vue3发布已经过去一年多时间了，从Vue2到Vue3是一个不小的升级，包括周边生态等。虽然目前大多数开发者们在使用的仍旧以Vue2为准，但Vue3显然是Vue开发者们未来必须面对的，而且前不久Vue官方也发布了Vue2.7.0，使得Vue2可以兼容Vue3的API，这让开发者可以在项目不升级V
阅读全文
摘要：前言：最近写代码遇到一问题：祖先级别的组件怎么操作孙子的儿子的组件方法（是不是已经绕晕了），在网上搜了半天都是父子传参，父子操作，晕晕乎乎的想起了bus(事件总线)， 原理就是：是在vue原型上挂载（生命周期为实例创建之前beforcreate），通过这个实例里的事件派发和事件监听实现跨组件通信，设
阅读全文
摘要：最近正在将一个使用单文件组件的 Options API 的 Vue2 JavaScript 项目升级为 Vue3 typescript，并利用 Composition API 的优势。 比如，下面这种 选项API 方式： export default { props: { name: { type:
阅读全文
摘要：模块化开发在前端越来越流行，使用 node 和 npm 可以很方便的下载管理项目所需的依赖模块。package.json 用来描述项目及项目所依赖的模块信息。 那 package-lock.json 和 package.json 有啥关系和联系呢？ package.json 管理包 大家都知道，pa
阅读全文
摘要：首先得说一下，vue项目中productionSourceMap这个属性。该属性对应的值为true|false。 当productionSourceMap: true,时： 1、打包后能看到xxxx.js.map文件,map文件够通过反编译看到源码; 2、打包后会导致文件变大(因为多了很多map文件
阅读全文
摘要：后端返回文件流，前端可能会导出txt或者excel的时候，里面的中文会出现乱码如果这个接口是get的请求的话就可以直接通过以下方式直接下载 window.location.href = '请求文件流的接口地址'因为存在多种场景，可能需要通过不同查询值，或者选中部分数据才能导出的话，这时候通常会用到P
阅读全文
摘要：前言 vue3发布以来经历两年风头正盛，现在大有和react 平分秋色的势头，我们知道他是基于proxy 实现响应式的能力， 解决了vue2所遗留下来的一些问题，同时也正由于proxy的特性，也提高了运行时的性能 凡事有利有弊， proxy虽然无敌，但是他也有本身的局限，从而产生一些我认为的弊端（其
阅读全文
摘要：项目场景：解决 Vue 项目 invalid host header 问题disableHostCheck:true报错 问题描述使用内网穿透时出现 invalid host header找了好多都是让配置vue.config.js系统报错// vue3 vue.config.jsmodule.ex
阅读全文
摘要：前言 有时候使用npm上的包，发现有bug，我们知道如何修改，但是别人可能一时半会没法更新，或者是我们特殊需求，别人不愿意修改，这时候我们只能自己动手丰衣足食。那么我们应该如何修改别人的源码呢？首先，直接修改node_modules里面的文件是不太行的，重新安装依赖就没有了。一般常用办法有两个： 下
阅读全文
摘要：在开发中，可能会遇到两个或多个函数异步执行的情况，对于Vue中函数的异步函数执行做了一个小总结，如下： 异步执行使用async和await完成 created() { this.init() }, methods: { async init(){ await this.getList1(); thi
阅读全文
摘要：ie还是谷歌都是可以用的 只需要直接启用华视电子身份证阅读器的服务来的，至于服务已经上传到了网上 华视阅读器服务，下载下来解压，找到对应的华视电子读卡服务.exe文件，路径是CVR-100N SDK开发包下载\开发资料\网页版开发包\华视电子读卡服务.exe,双击打开之后，然后你在代码中，就可以使用
阅读全文
摘要：希望本篇文章能帮你加深对 Vue 的理解，能信誓旦旦地说自己熟练Vue2/3。除此之外，也希望路过的朋友可以帮助我查漏补缺🤞。 区别 生命周期的变化 整体来看，变化不大，只是名字大部分需要 + on，功能上类似。使用上 Vue3 组合式 API 需要先引入；Vue2 选项 API 则可直接调用，如
阅读全文
摘要：高手区别于普通人的重要一点是，他们善于利用工具，把更多的时间留给了规划和思考。写代码也是同样的道理，工具用好了，你就有更多的时间来规划架构和攻克难点。今天就给大家分享一下当前最流行的 js 工具库，如果觉得有用，就把大拇指点亮一下吧！ Day.js 一个极简的处理时间和日期的 JavaScript
阅读全文
摘要：很多情况下，我们在执行点击按钮跳转页面之前还会执行一系列方法，这时可以使用 this.$router.push(location) 来修改 url，完成跳转。 push 后面可以是对象，也可以是字符串： // 字符串 this.$router.push('/home/first') // 对象 qu
阅读全文
摘要：Animate.css是一款酷炫丰富的跨浏览器动画库，它在GitHub上的star数至今已有5.3万+。 在vue项目中我们可以借助于animate.css，用十分简单的代码来实现一个个炫酷的效果！（可以装B了） 一 、安装 在命令行中执行： 使用npm或者cnpm安装 npm install an
阅读全文
摘要：1|0函数组件和普通组件区别 渲染快 没有实例，意味着没有（this） 没有生命周期（没有响应式数据） 2|0组件函数的使用 2|1以局部组件为例，将组件标记为 functional=ture; 因为函数式没有实例，因此组件需要的一切都是通过 context 参数传递，它是一个包括如下字段的对象：
阅读全文
摘要：开发过程中经常需要和图片处理打交道，看了网上很多有关图片处理的方法，都是讲解得一知半解，没有比较全面的总结。下面，将简单总结一个我们通过vue去处理img标签过程中，图片加载时，与图片加载失败时的处理方法。 1.常见的一个图片的处理流程，当接收到图片时，若图片较大，或者网络较慢的情况，图片还未加载完
阅读全文
摘要：目标 实现箭头的流程图，本次开发用的是vue+scss形式，不过基本上都是css3+js而已，简单易懂，同样也好拓展。 图例 思路 父元素设置flex布局，子元素都是自适应，可随着屏幕宽度变化而变化。 设置双伪元素::before/::after，一个在前，一个在后，通过设置border-top/b
阅读全文
摘要：实现的效果 登录动态效果很炫酷，话不多说直接上代码： 组件template <template> <div class="entrance"> <div class="header"> <h2>BFF赤川什么什么系统入口</h2> </div> <div class="content"> <div
阅读全文
