前言侧边栏导航大多数情况可能会由后端返回导航内容，第一是方便修改，第二是可以做一些菜单鉴权操作，但是这也会产生一个问题：侧边栏api请求会非常频繁如何避免这个问题，我们就需要使用缓存方案，在web中，缓存有：local，session，cookie，还有一些更复杂的就不说了，用不到。local会永久存储，这样我们刷新页面，数据以缓存优先的话，就会无法及时更新了。passcookie，spa用cookie很少了，而且他有容量限制，直接pass。那么只有session了，session会在页面关闭后自动清理，这样下次重新打开页面数据依旧可以保持最新，并且新建页面，同域名，session也是可...

vue-router升级版本后，使用$router进行跳转时，将返回一个promise对象，这其实是好事，但是除了这个，官方对报错也做了调整。这里先看一下常见一个重定向错误：为什么产生这个错误，我在谷歌查了下，有这么一个解释：这是设计使然。为什么？阅读此评论。TL;DR：假设您在页面 A，然后单击一个按钮将您带到页面 B（有点像method: goToB() { router.push('/B'); }页面 A）。但是页面 B有一个导航守卫，将您发送到页面 C。此错误是让该goToB()功能知道路由器无法完成所需任务并且用户尚未登陆的一种方式/B。这很讨厌，但信息量很大这里最大的困惑是重...

继《vue 多模块集成，每个模块为一个项目，共用依赖且独立开发，自动引入模块，导航也独立于模块，自动引入》的续章。在处理vuex持久化时，由于之前知识储备不足，没有研究出它的模块化写法。今天来完善一下。[hide]前提vuex-persistedstate不用管你的store模块是否启用了命名空间，因为他本身就是按照你vuex模块的层级配置的，也就是默认就是命名空间层级，所以：plugins: [createPersistedState({ reducer(val) { return { user: { token: val.user.token ...

前言作为一个前端菜鸡，理解上可能会有诸多不对的地方，望大家指正，本篇文章也是本人这几天苦思冥想的结果，也不能保证所说全对，也算是抛砖引玉了，期待大佬们的指正。简单了解Render饿了么的折叠动画源码位于：src/transitions目录下，gayhub地址：链接由于内容不多，我直接贴出来源码：import { addClass, removeClass } from 'element-ui/src/utils/dom'; class Transition { beforeEnter(el) { addClass(el, 'collapse-transition'); ...

一般出现这个问题，肯定大部分人都是使用default-passive-events插件。但是随着项目的扩大，default-passive-events难免会和其他插件产生冲突，比如canvas库konvajs。在使用konvajs和default-passive-events后，肯定会报：拖拽时Unable to preventDefault inside passive event listener invocation.没办法，我们只能禁用default-passive-events插件我们新建一个polyfill.js文件polyfill.js/* * @Author: mul...

高亮问题由于侧边栏可能不会把所有的路由name都丢上去展示，常常是展示一个父级菜单名，子路由菜单作为页面内的导航啥的。常见的场景： 详情页为此，我们路由名与侧边栏导航菜单的name相对应的处理就不太行了。常见的做法就是在路由的meta里面添加一个activeRoute配置，里面标明需要高亮的侧边栏name那么这个activeRoute怎么配置呢？我个人觉得应该遵循父级优先的概念，如果子路由设置了，但是父级路由也设置了，那么以父级为准，也就是最上层路由为准，这样子集直接可以随便切换，不会影响侧边栏高亮，因为他有父级。那么如果没有父级，就使用自己遵循这个原则，我们对el-menu的defau...

由于最近ios收税政策的影响，ios的h5支付已经不行了，所以，这里讲的是我对接安卓端h5支付的那些事情。[hide]当我们给后端提交一个订单请求的时候，这个请求的内容具体要看后端是怎么设置的，这个和h5支付对接没有直接关系。提交订单后，后端回返回一个用于支付的链接，这个链接对应于微信h5支付文档中这里：文档链接：微信h5支付开发文档可以看到，这个链接是一个http开头的，实际测试中，通过a元素，然后打开这个链接，是可以直接调用微信的付款的，所以，这其实就是一个普通的超链接而已。（当然，坑也在这里）在这个链接的末尾，他是有一个参数的：redirect_url这个参数用于，用户支付成功或者...

简单说下使用场景，你使用一个dialog组件，弹窗时要加载数据，关闭后要清理数据，以防下次使用报错或者数据残留，如果在data中写了过多的属性，或者层级很深的引用对象啥的，为了方便还原，你可能会一个个的写。onClose() { this.xxx = xxx; this.xxx.xxx = xxx; this.xxx.xxx = xxx; this.xxx.xxx = xxx; }对多个值进行赋值操作。但是，这样实在是太难了，有没有一种简单的方法，就像表单重置一样。答案当然是有的：onClose() { Object.assign(this.$data, this.$...

按需加载，在gzip面前根本不值一提，当然，该优化还是要优化，所以在使用了lodash-webpack-plugin插件后，在使用个别方法后就会出现问题，比如：unionBy;原因按需加载的插件，它的按需就是将你调用的方法单独提取出来，但是，如果提取的方法里面还用了其他方法，他可能无法识别，导致方法缺失，所以就会报错。报错代码<script> import _ from "lodash"; export default { methods: { test(arr){ return _.unionBy(arr, "key&...

问题当通过Tooltip组件，click事件触发抽屉或者弹窗功能时，Tooltip的hover效果，会在抽屉和弹窗功能关闭后又再次触发显示。bug图解决思路我估计是因为遮罩层的问题，导致元素的事件监听不到鼠标离开，导致关闭弹窗后，浏览器又自动选中了。所以我的解决办法很简单，找到那个触发hover效果的dom元素，对他进行离开事件触发即可。<el-tooltip effect="dark" content="通知" placement="bottom"> <a href="javascr...

最近遇到这么一个需求，就是内容一行显示，滚轮滚动的时候，进行横向滚动。本来想尝试下css能不能做到，最后发现，即便改变了流的布局，并不能改变滚动条的方向，最后还是只能用js做了。滚动兼容性滚轮只存在pc的时候，所以触摸事件是不考虑的，触摸的话可以直接用better-scroll插件。滚动事件需要兼容火狐和谷歌：火狐滚动事件：DOMMouseScroll谷歌滚动事件：mousewheel其中DOMMouseScroll的event对象，他有一个detail字段，向下滚动是3，往上滚动是-3mousewheel的event对象是deltaY，往下滚动是125，往上是-125，具体数值记不清了...

莫名其妙就提示css冲突和顺序问题，而且组件里面的样式和class类名完全不相干，不知道怎么就给你冲突了。顺序都有点莫名其妙，这玩意谁先谁后都无所谓啊。看了好半天github上的issues也没有谁说出个所以然，反正就是大量的警告，18年就有人提出这个问题了，唉，头疼issues目前普遍的解决办法就是忽略这个警告，因为不是真的影响代码的运行。忽略警告打开vue.config.js文件夹，插入以下代码：module.exports = { css: { extract: { ignoreOrder: true }, }, }保存，然后重新打包，不会再提示 冲突和顺序问题了

这个奇葩的问题，搞得我人都傻了，怎么软件内置的浏览器不能上传文件呢？？？就离谱！一开始我以为是软件的安全限制，后来发现不对，为什么别人的网页可以上传？？[hide]解决方法把input的accept属性去了就行了<input type="file">去掉了accept，就没办法限制文件类型了，只能前端js做判断，我就顺带提供一个vue中使用的限制方法。前端限制文件类型方法假设我们data中有一个accept属性，他是一个数组，表示允许上传的文件类型<script> export default { data(){ return { ...

主要的效果就是用户注册时，输入的账号如果已经注册了，要提示已经注册，然后提供一个按钮，直接前往登陆。效果图教程首先我们要知道怎么进行自定义错误提示<template> <el-form :model="form" :rules="rules" ref="ruleForm"> <el-form-item prop="account"> <el-input v-model="form.account" name="a...

是不是常常头疼数字类型的校验，整数，小数，往往无法通过一个rules的type属性搞定，自定义校验又五花八门，是否有一套标准流程呢？整数校验整数校验简单，input使用.number修饰符，rules配置type属性即可。<template> <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px"> <el-form-item label="短信条数：" pr...

今天就遇到一个问题，后端从头信息给我携带了数据，我需要在请求头中获取，但是不管怎么get，返回的永远是null，但是f12去看响应头，那个数据就在那，亮瞎了眼。一个大大的问号？why？？？谷歌查了下原因，大概就两种：安全限制，不允许客户端获取部分头信息跨域了，对于跨域请求，客户端允许获取的response header字段只限于“simple response header”和“Access-Control-Expose-Headers” ，在“Access-Control-Allow-Headers”中加了无效说到底，还是后端的设置，如果是nigix可以参考下面的代码：以token头信...

el-checkbox本身是没有click事件的，但是我们可以通过native的方式穿透下去，但是这样的话会有一个问题，我们先看下代码：<el-checkbox v-model="checked" @click.native="onClick">备选项</el-checkbox>如果你在onClick函数中进行输出，你会发现，click实际上运行了两次，native本身是将事件绑定给了组件的根元素，这就导致他会被子元素的click事件冒泡触发。哪怕你加了stop也没有效果，因为stop只能防止根元素往上冒泡，并不能阻止他本身...

element ui的图片预览组件并没有单独提供出来，默认是在image组件里面一起使用，但是有的时候，我们需要点击某一个自定义按钮，然后弹出图片预览，但是，又不需要使用el-image组件，于是乎，有了这篇笔记。首先思路并不是我的，我也是看了下同事，他网上找的教程，然后我看了下，在掘金找到一篇文章：《Vue中使用element-ui的内置组件实现图片预览全局调用功能》；深受启发，于是也记下自己的笔记。首先思路是两个：element ui的图片预览本身是一个vue组件vue.extend构造器将vue组件通过js的方式构造出来，new出来的这个构造器，他的属性为组件的属性以及其他（其他就...

由于最近moment.js已经停止维护了，加上他本身确实有点大，只能找找其他的时间库了。yarn add dayjs --dev安装后我们引入：import dayjs from "dayjs"; import duration from "dayjs/plugin/duration"; dayjs.extend(duration); import "dayjs/locale/zh-cn"; dayjs.locale("zh-cn");使用：dayjs的计算，是需要用毫秒的，所以如何是s的时间戳，自己记得乘以...

最近遇到一个需求，要求在新建打开的vue项目网页中，还要定位到某个位置，这么一想就只有hash哈希值定位了。如果要用js定位，一般是使用： window.location.hash = "#xxx";但是这方法有个弊端，就是只有首次运行这段代码时才有效，第二次再使用，就毫无效果了。所以，如果你想更稳定一点，可以使用url方法 window.location.url = "#xxx";虽说url是改变浏览器地址，会触发刷新，但是如果值是哈希值，那么并不会触发页面刷新，并且哈希定位也是可以重复触发的。更新： 2021-2-12经过实际测试发现，url方...

在axios速读中，我们了解到axios请求的取消方法。const CancelToken = axios.CancelToken; //请求前拦截器 axios.interceptors.request.use(function(config) { //添加取消token const source = CancelToken.source(); config.cancelToken = source.token; //取消请求 source.cancel("取消请求"); return config; }, fu...

后端返回一个活动到期时间戳(s)，前端需要根据这个时间做个倒计时，倒计时的精度为：xx天xx小时xx分钟xx秒一个常见的活动倒计时。注意：秒要转为ms毫秒，moment计算是以毫秒为单位的。那么moment.js怎么计算出这些值呢？纯文本显示倒计时这个就要看你的样式了，如果你的要求只是显示纯文字：xx天xx小时xx分钟xx秒那么可以直接使用format方法。<script> import moment from "moment"; moment.locale("zh-cn"); //汉化 export default { data(...

Animate.css自从更新到了4.0版本，百度以前的那些使用教程都不能用了，原因是使用方法变了，class也变了。这里说下最新版怎么使用！安装yarn add animate.css安装完毕后我们需要在main.js文件里面引用并激活。main.js//动画样式 import animated from 'animate.css' Vue.use(animated);注意和以前不一样，新的需要use一下。使用<transition enter-active-class="animate__fadeIn" leave-active-class="an...

了解一下首先我们要明白微信自定义分享是做什么的？当我们用微信打开一个网址，觉得不错，想要分享给朋友或者发送朋友圈，一般都是选择分享，分享的内容微信会显示为一个卡片，里面有页面的标题，简介，logo图片。大概是这样的一个效果：但是现在微信做了调整，他禁止了没有公众号认证的网页链接显示这些内容，这就造成一些企业的官网啊，产品链接变成了丑不拉几的样子，（微信变相收费）而且，如果你想要实现上面那个带简介带logo的卡片样式，你就需要对接微信的分享接口。注意：这个分享效果只有在微信端才有效！那么，知道为什么要这样做了，我们就开始实际的教程吧！教程[hide]微信提供了前端对接的一个js文件，被称为...

vue作为单页app，基本上所有的页面跳转全是在当前页完成的，但是，也不能排除新建页面打开的需求。我们平时路由跳转都是直接push，replace这些this.$router.push({name:"xxx"})；那么新建页面跳转怎么写呢？router-link跳转 <router-link :to="{name:'xxx'}" target="_blank">新建页面</router-link>给router-link添加target="_blank"即可。js跳转router-li...