木灵鱼儿

木灵鱼儿 4年前 vue 项目实战

分享一个利用vuex+session缓存侧边栏数据的方案

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

3767 0 0

vue vuex session

关于使用this.$router对象进行跳转时产生重定向错误的解决方法

木灵鱼儿 4年前 vue 项目实战

关于使用this.$router对象进行跳转时产生重定向错误的解决方法

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

5187 0 0

vue router 跳转

首发《konva添加键盘方向键移动教程+辅助线显示》

木灵鱼儿 4年前 konva库

首发《konva添加键盘方向键移动教程+辅助线显示》

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

2w 1 35

konva 辅助线方向键移动

vuex持久化插件vuex-persistedstate的模块化写法

木灵鱼儿 4年前 vue 项目实战

vuex持久化插件vuex-persistedstate的模块化写法

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

6679 0 2

vue vuex 模块化

vue cli4 修改静态html的 %= htmlWebpackPlugin.options.title % 默认值

木灵鱼儿 4年前 vue cli

vue cli4 修改静态html的 %= htmlWebpackPlugin.options.title % 默认值

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

6326 0 0

vue cli 修改title

webpack5 初始化《JJ》多页面的一些问题

木灵鱼儿 4年前 webpack5

webpack5 初始化《JJ》多页面的一些问题

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

4249 0 0

webpack HtmlWebpackPlugin

vue cli4 全局scss变量技巧

木灵鱼儿 4年前 vue cli

vue cli4 全局scss变量技巧

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

3684 0 0

scss vue cli 全局变量

浅析Element的collapse-transition折叠动画

木灵鱼儿 4年前 vue 项目实战

浅析Element的collapse-transition折叠动画

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

5318 6 0

transition vue element ui

获取时间戳的几种方法

木灵鱼儿 4年前 JavaScript

获取时间戳的几种方法

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

4695 0 0

时间戳 Date 时间对象

关于konva中图片Image图形的一些问题和解决方案

木灵鱼儿 4年前 konva库

关于konva中图片Image图形的一些问题和解决方案

图形的加载在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...

8045 1 2

image konva

首发《konva添加辅助线教程》

木灵鱼儿 4年前 konva库

首发《konva添加辅助线教程》

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

2.7w 0 44

konva 辅助线

首发《konva添加刻度尺教程》

木灵鱼儿 4年前 konva库

首发《konva添加刻度尺教程》

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

5.1w 0 85

konva 刻度尺

关于Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.的新解决方案

木灵鱼儿 4年前 vue 项目实战

关于Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.的新解决方案

一般出现这个问题，肯定大部分人都是使用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...

6972 0 0

警告 vue scroll-blocking

关于element侧边栏导航一些新想法

木灵鱼儿 4年前 vue 项目实战

关于element侧边栏导航一些新想法

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

4108 0 0

vue element 侧边栏导航

关于微信h5支付的那些事

木灵鱼儿 4年前 vue 项目实战

关于微信h5支付的那些事

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

4998 0 3

vue h5 h5 支付

scale与taranslate的倍数关系

木灵鱼儿 4年前 CSS

scale与taranslate的倍数关系

正常情况下，如果想让左侧黄色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...

3597 0 0

scale taranslate

webpack5 初始化《JJ》主题下部

木灵鱼儿 4年前 webpack5

webpack5 初始化《JJ》主题下部

图片处理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: [ //图片文件 { ...

3290 0 0

webpack

webpack5 初始化《JJ》主题上部

木灵鱼儿 4年前 webpack5

webpack5 初始化《JJ》主题上部

初始化安装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...

3725 0 0

webpack

javascript 生成随机密码，指定位数，难度（大小写、数字、特殊字符）

木灵鱼儿 4年前 JavaScript

javascript 生成随机密码，指定位数，难度（大小写、数字、特殊字符）

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

5144 1 0

密码 javascript 随机密码

vue骚操作之重置data对象

木灵鱼儿 4年前 vue 项目实战

vue骚操作之重置data对象

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

3780 0 0

data vue 重置

base64转file文件方法

木灵鱼儿 4年前 JavaScript

base64转file文件方法

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

4373 0 0

File javascript blob

lodash按需加载使用unionBy打包后使用报错：t is not a function 的问题解决方案

木灵鱼儿 4年前 vue 项目实战

lodash按需加载使用unionBy打包后使用报错：t is not a function 的问题解决方案

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

4578 0 1

lodash 按需加载报错

lodash按需加载使用unionBy打包后使用报错：t is not a function 的问题解决方案

nuxt 加快编译速度

木灵鱼儿 4年前 nuxt

nuxt 加快编译速度

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

5728 0 0

nuxt 编译

自己照着别人教程写的canvas操作类

木灵鱼儿 4年前 JavaScript

自己照着别人教程写的canvas操作类

预览图类源码/* * @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:...

2901 0 0

canvas javascript class

关于element Tooltip组件与 Drawer和Dialog这种带遮罩层的冲突问题

木灵鱼儿 4年前 vue 项目实战

关于element Tooltip组件与 Drawer和Dialog这种带遮罩层的冲突问题

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

5886 0 0

element dialog Tooltip

木灵鱼儿

分享一个利用vuex+session缓存侧边栏数据的方案

关于使用this.$router对象进行跳转时产生重定向错误的解决方法

首发《konva添加键盘方向键移动教程+辅助线显示》

vuex持久化插件vuex-persistedstate的模块化写法

vue cli4 修改静态html的 %= htmlWebpackPlugin.options.title % 默认值

webpack5 初始化《JJ》多页面的一些问题

vue cli4 全局scss变量技巧

浅析Element的collapse-transition折叠动画

获取时间戳的几种方法

关于konva中图片Image图形的一些问题和解决方案

首发《konva添加辅助线教程》

首发《konva添加刻度尺教程》

关于Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.的新解决方案

关于element侧边栏导航一些新想法

关于微信h5支付的那些事

scale与taranslate的倍数关系

webpack5 初始化《JJ》主题下部

webpack5 初始化《JJ》主题上部

javascript 生成随机密码，指定位数，难度（大小写、数字、特殊字符）

vue骚操作之重置data对象

base64转file文件方法

lodash按需加载使用unionBy打包后使用报错：t is not a function 的问题解决方案

nuxt 加快编译速度

自己照着别人教程写的canvas操作类

关于element Tooltip组件与 Drawer和Dialog这种带遮罩层的冲突问题

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

分享一个利用vuex+session缓存侧边栏数据的方案

关于使用this.$router对象进行跳转时产生重定向错误的解决方法

首发《konva添加键盘方向键移动教程+辅助线显示》

vuex持久化插件vuex-persistedstate的模块化写法

vue cli4 修改静态html的 %= htmlWebpackPlugin.options.title % 默认值

webpack5 初始化《JJ》多页面的一些问题

vue cli4 全局scss变量技巧

浅析Element的collapse-transition折叠动画

获取时间戳的几种方法

关于konva中图片Image图形的一些问题和解决方案

首发《konva添加辅助线教程》

首发《konva添加刻度尺教程》

关于Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.的新解决方案

关于element侧边栏导航一些新想法

关于微信h5支付的那些事

scale与taranslate的倍数关系

webpack5 初始化《JJ》主题 下部

webpack5 初始化《JJ》主题 上部

javascript 生成随机密码，指定位数，难度（大小写、数字、特殊字符）

vue骚操作之重置data对象

base64转file文件方法

lodash按需加载使用unionBy打包后使用报错：t is not a function 的问题解决方案

nuxt 加快编译速度

自己照着别人教程写的canvas操作类

关于element Tooltip组件与 Drawer和Dialog这种带遮罩层的冲突问题

最近评论

博客文章RSS订阅

博客评论RSS订阅

webpack5 初始化《JJ》主题下部

webpack5 初始化《JJ》主题上部