前言js有一个31k多的star的开源复制库：clipboard.js；但是一些简单复制并不想安装一个库来解决，所以就想自己写一个。copy所需要的东西Selection 对象用于获取被用户选中的部分，通过toString()方法可以获取被选中的文本内容，以及js操作选中。MDN文档：SelectionexecCommand 对象用于以命令的形式来操作网页的内容，说白了就是用它来实现复制文本操作，复制的是选中的文本MDN文档：execCommand 需要注意的是，execCommand在未来将会被遗弃，因为这个api本身是从ie浏览器那边继承的，久而久之各大浏览器都对其做了兼容，虽然...
安装的插件Atom One Dark Theme 主题Auto Rename Tag 头尾标签自动修改，改一个改一双Beautify 格式化Bracket Pair Colorizer 对象括号选择有颜色表示范围Highlight Matching Tag 选择标签自动高亮对应的结尾标签Material Icon Theme 图标Path Intellisense 路径提示，只能相对路径Version Lens 版本提示，安装完可以在打开package.json文件，在右上角有一个v按钮，点击可以查看最新版本，更新狂魔必备Vetur 用了vue还有不装这个的？Color Hig...
前言后端返回给前端的数据，有时候会是一个多层级对象，但是我们前端使用的时候，for循环遍历渲染时，多层级对象往往需要进行单独处理，因为还需要判断这个key值是否存在，否则会报错。强行让后端改变数据结构又好像不现实，无奈，只有自己处理了。掘金看到一位大佬文章《【算法】JS 实现对象的扁平化》感觉很合适，逻辑清晰。要求将对象中的层级扁平化，改成如下格式：// 实现一个 flatten 函数，实现如下的转换功能 const obj = { a: 1, b: [1, 2, { c: true }], c: { e: 2, f: 3 }, g: null, }; // 转换为 l...
adb添加至环境变量首先需要adb连接手机，adb工具需要下载：adb下载完毕后解压到磁盘位置，比如：D:/adb解压完毕后，我们需要将其设为环境变量。windows我的电脑右键属性 -- 高级系统设置 -- 环境变量 --- 找到Path --- 双击进入设置 --- 选择新建 --- 将D:/adb路径名加入，保存。重启系统。连接手机手机的驱动记得装好。手机开启usb调试模式usb连接电脑电脑打开命令工具，比如：Terminal输入：adb devices如果手机提示允许usb调试吗？，勾选允许，确认。此时命令会出现：PS C:\Users\13219> adb devices...
意图就是想图片在加载时，能显示骨架动画，然后图片加载完成，骨架动画消失。这个可以用于一些小图的加载，比如：验证码、头像、logo啥的，如果是特别大的图，建议用懒加载效果图原理指令在bind阶段，判断绑定的数据是否为trun，并且class类名不存在，添加一个class用于骨架背景动画监听绑定值得变化，如果为false，那么移除class那么如何判断图片是否加载完毕，可以使用@load事件自定义指令import "./scss/index.scss"; export default { //首次 bind(el, binding) { if (!el....
前言侧边栏导航大多数情况可能会由后端返回导航内容，第一是方便修改，第二是可以做一些菜单鉴权操作，但是这也会产生一个问题：侧边栏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-t...
我们有两种方式获取，一种是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.$...
最近评论