前言侧边栏导航大多数情况可能会由后端返回导航内容，第一是方便修改，第二是可以做一些菜单鉴权操作，但是这也会产生一个问题：侧边栏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。这很讨厌，但信息量很大这里最大的困惑是重...

预览图前言在刻度尺和辅助线的基础上增加键盘方向键事件，方便微调，毕竟鼠标拖拽浮动太大了。[hide]教程我们的逻辑是，用户点击图形选中，然后移动，因为我的图形都支持变形操作，所以我把键盘事件的监听放在了Transformer完成后触发。stage可以监听到click事件，所以也省去给每个图形添加。import Konva from "konva/lib/Core"; import { Rect } from "konva/lib/shapes/Rect"; import { Text } from "konva/lib/shapes/Te...

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

在默认初始化好的vue cli项目，public目录下的index.html文件，他的title使用的是一种ejs语法：<title><%= htmlWebpackPlugin.options.title %></title>接收的是htmlWebpackPlugin对象上，options的title。一般情况，省事一点，直接把这个title给改成静态就完事了！<title>静态标题</title>但是，好像少了点什么，能不能不改动这个就能改标题呢？当然是可以的，我们需要配置下vue.config.jsvue.config.js...

问题多页面打包后，生成的script.php中包含了所有页面的js文件引入多页面打包后，生成的css.php中包含了所有页面的css文件引入解决方案个人判断是再new HtmlWebpackPlugin进行处理的时候出现了问题，他无法分辨被打包的页面是谁的。那么在HtmlWebpackPlugin中唯一区分的属性，就是chunks。但是在官方文档中，并没有声明他的类型。然后百度的文章，有两种：chunks:"xxxx"chunks:["xxxx","xxxx"]根据以往的经验，第一种应该是用于唯一值得情况，如果有多个则使用数组，...

今天啃了下官方文档，加上之前也配置到webpack的，有一些经验，我觉得官方可能有对应的方式，毕竟在webpack中我们只需要在sass-loader配置中就可以加入全局scss了，都不用安装啥插件。于是乎，果然，官方有，但是文档很蛋疼，你能看懂引入单个全局，没有多个全局的示例，索性自己写个笔记了。vue.config.jsmodule.exports = { css: { loaderOptions: { scss: { prependData: ` @import "~@/base/assets/scss/glob...

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

我们有两种方式获取，一种是new Date()得到时间对象，一种是Date函数对象静态方法获取。new Date()与Date的区别就是，前者是构造函数，后者是函数对象，函数对象返回的，只是我们需要的值，他不会有Date对象的内置方法（prototype），所以，它的使用更简洁明确，但是如果我们想要获取时间的年份，月份，星期几，那么new Date()才是最好的选择。new Date() 获取const date = new Date(); //没有传入参数获取当前本地时间 date.getTime(); //1626746413673 date.valueOf(); //1...

图形的加载在konva中，有两种方式加载图片，其原理都是需要加载图片dom，等图片完全加载完成再置入canvas中，官方的例子是这样的：var imageObj = new Image(); imageObj.onload = function() { var yoda = new Konva.Image({ x: 50, y: 50, image: imageObj, width: 106, height: 118 }); // add the shape to the layer layer.add(yoda); laye...

预览图前言之前出了刻度尺的教程，刻度尺有了，但是单一的存在功能并不直观，我们还需要辅助线功能，不多说，开搞[hide]教程添加辅助线逻辑稍微辅助一些，我们需要监听拖拽事件，但是如果监听每个图形的拖拽事件，那是非常不靠谱的想法，300个图形就有300个事件监听，显然不合理，好在konva的layer对象，是可以监听到所有可拖拽对象的拖拽事件的，我们不需要给每个图形添加，只需要监听layer即可。拖拽事件：dragstart 拖拽开始事件dragmove 拖拽中dragend 拖拽结束拖拽事件，我们可以通过event对象获取到被拖拽的目标图形：this.$layer.on("d...

预览图前言在使用konva库做图形拖拽的时候，你会发现konva没有提供刻度尺和辅助线的功能，导致你不知道你拖拽的实际坐标，这就很难受了，在谷歌百度查教程的时候，看见官方之前就给予过类似问题的回应。问题issues：How to add a ruler for konva官方回应（翻译）：如果你需要这样的形状，就画画。作为文本 + 多行，或自定义形状（以获得更好的性能）既然搜索引擎和官方都没有类似的答案，我们就自己来。先搞定刻度尺问题。[hide]教程既然要画尺子，我们就要想怎么画，如果按照生活中的尺子，1cm一个竖线，我们1px一个竖线肯定是不行的，我的做法是，反正宽高很大，就5px一...

一般出现这个问题，肯定大部分人都是使用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这个参数用于，用户支付成功或者...

正常情况下，如果想让左侧黄色20px的元素右侧与父元素齐平，父元素100px，我们的算法是这样：//100px - 20px transform: translateX(80px);x轴移动80px即可达到效果，但是如果我们同时使用scale放大，那么80px就不对了。transform:scale(2) translateX(80px);放大两倍后，你会发现平移的距离不对了。为什么？平移的距离明明就是70px啊！不着急，我们先看看不使用translateX平移，使用margin-left移动到与父元素右侧齐平再放大是什么样的。transform: scale(2); margin-le...

图片处理yarn add url-loader file-loader --dev很多人教程都莫名其妙，一张嘴就说推荐使用url-loader解析器，但是闭嘴不提url-loader是基于file-loader的，所以用url就必须两个都装，否则一旦你设置了url的limit限制文件大小，文件超出设置得大小后，就会报file-loader不存在的错误。webpack.config.jsmodule.exports = (env, argv) => ({ //模块-解析器loader module: { rules: [ //图片文件 { ...

初始化安装yarn init yarn add webpack webpack-cli --devwebpack建议全局安装，省事yarn global add webpack webpack-cli如果不适用全局安装，直接在终端运行本项目的webpack需要使用npx命令npx webpack -v还有一个种办法就是在package.json创建快捷npm脚本，这样就不用加npx前缀了{ "scripts": { "build": "webpack" }, }使用scssyarn add style-loade...

原理也没啥好藏着掖着的，就是为了保证密码难度，开头的字符一定是满足安全需要的，比如要求大小写数字加特殊字符，那么开头四位就一定是：大写一位、小写一位、数字一位、特殊字符一位；然后剩下的随机。/** * @description: 随机密码 * @param {*} len 密码位数 * @param {*} mode 密码难度：hide(大小写数字特殊字符)、medium(大小写数字)、low(小写数字) * @Date: 2021-07-02 15:52:32 * @Author: mulingyuer */ export const randomPass = functi...

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

使用canvas操作内容后，如果想保存图片之类的操作，就无可避免的要处理这一步，因为canvas导出的是base64格式的文件，如果你只做预览还好，存储的话，就要想办法了。我的想法是转成上传文件的那种file格式。方法如下：/** * @description: 将base64转换为文件对象 * @param {*} dataUrl base64 * @param {*} fileName 文件名 * @Date: 2021-06-30 14:33:47 * @Author: mulingyuer */ export function dataURLtoFile(dataUr...

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

nuxt嘴上说很快，但是其实热编译是很慢的，很墨迹，和vue cli这种对比起来，差了很多，经常改动一点东西想要看效果，编译要等一段时间。今天无聊去看了下nuxt模块库，看到这么一个插件：nuxt-build-optimisations有点牛皮，使用后，热编译速度肉眼可见的提升，官方的介绍说可以提升2-5倍的速度，实际测试中，冷启动速度没太大感觉，但是热编译速度确实是很满意。特此推荐！用法yarn add nuxt-build-optimisations安装完毕去nuxt.config.js里面激活模块export default { buildModules: ['nuxt-bui...

前言写这个主题花了一些时间，我的想法是希望有一个优秀的阅读体验，毕竟本人喜欢记笔记，分享一些平遇到的问题和解决方法。于是乎看中了掘金的样式，挺适合阅读的，加上个人审美确实不太行，就想仿一下样式。随着现在前端的发展，一些新的特性增加，如果还是保持在旧的思维上，我觉得限制了开发者的自我提升，所以，本主题采用了大量es6的js语法，css上采用scss编译，如果你有兴趣，可以一起参与开发。主题预览github地址《Typecho_Theme_JJ》

预览图类源码/* * @Author: mulingyuer * @Date: 2021-06-21 11:29:12 * @LastEditTime: 2021-06-21 18:39:31 * @LastEditors: mulingyuer * @Description: canvas * @FilePath: \form-create\src\utils\canvas.js * 怎么可能会有bug！！！ */ class Chart { constructor(options) { const defaultOptions = { el:...