vue router 一个重定向页面的思路

当项目需要和其他项目进行沟通的时候,往往常见的做法就是,我在a网站点击一个按钮,在链接中携带query参数啥的,然后去访问b网站页面。此时可能会有两种情况:跳转的链接就是b网站的具体链接地址。跳转的链接是b网站的一个跳板,跳板会对参数做一些操作,然后进行重定向。两种做法都各有优势:第一种省事简单,但是如果以后b网站链接层级发生变化,那么就会导致链接不可能,到时候还需要进行修改,很痛苦。第二种的话,我们需要写一个跳板页面,但是通过一些参数要求,甚至自身加上一些逻辑处理,那么他的功能性会更强一些。那么,在vue中,做一个重定向页面,怎么做?思路思路1利用路由守卫,当链接上存在某个参数的时候,...

98 2 0

关于 vue cli 的Network unavailable的问题分析以及修复方式

发现公司的项目,不管是vue2还是vue3,不管是新创建的还是旧项目,启动后Network永远是unavailable;就很离谱,导致每次想要局域网测试,只能手动在devServer中配置public属性,设置一个固定的本地ip地址。但是,你的ip地址并不是别人的ip地址,那么就会导致如果不小心上传了vue.config.js;那么同事一拉,哦吼,不懂得就说,哎呀,我的项目怎么启动不了了。这就很蛋疼了,所以我分析了一下这个问题的原因。首先,我的电脑的环境是没有问题的,网卡也是没有问题的,vue cli早就支持多个网卡了,所以多网卡问题就可以忽略。其实主要原因是因为一个不合法的ipv4地址...

80 0 0
关于 vue cli 的Network unavailable的问题分析以及修复方式

搞明白防抖与节流

防抖防抖在日常项目开发的时候还是很重要的,用于防止函数的重复触发,节省性能开支。比如监听用户的input输入进行api查询,由于input事件每次改变输入的内容都会触发,但是一般来说,只有最后一次input才有效,所以会经常采用防抖的形式来触发。防抖:在一定时间内重复触发之后只会生效最后一次。如何写一个防抖呢,我们慢慢来< script > "use strict" const input = document.querySelector("input"); input.addEventListener("input&quo...

157 1 0

宝塔和Gitte码云自动化部署教程

前言作为一个刚入行没多久的前端菜鸡,对于自动化部署真的非常依赖啊,因为现在的开发更新都是很频繁的,代码更迭速度都很快,但是代码的部署却一直没有太大变化,总是需要自己将打包好的代码通过ftp等方式进行上传,非常的不方便,上传完,比如node后端服务,还需要手动安装对应的依赖,十分不便。当一个人要做前后端开发的时候,可能会导致大量的时候花费在这个繁琐而且没啥能力提升的事情上,做得多了还是影响开发的心情,幸福感大大降低。如果有一个功能,能自动监听我上传的代码,自动更新服务端的代码,并且安装依赖啥的都能自动完成,那么就非常方便了,毕竟现在大部分代码开发都依赖于git仓库管理。于是乎ci工具就诞生...

宝塔和Gitte码云自动化部署教程

关于UIKit的抽屉 uk-offcanvas 只有黑色样式的问题

从uikit官方站点复制抽屉的代码本地运行,你会发现,它的抽屉默认居然是黑色的,根本不是官网上那种白色的样式。查询了好久,再github上issue上看到一些解释( OffCanvas only Dark),大概释义如下:官方的抽屉只有dark模式,不支持白色模式,也不支持反色的class(uk-light和uk-dark);而且官方对这个抽屉复写样式特别多,多到离谱,你能用上的元素,他都复写了,导致你就算把背景色复写成白色,你元素的字体颜色还是白色,而且nav组件的icon也被复写成白色svg了,这某种程度上复写样式基本无解了。唯一的解决办法就是不用官方的uk-offcanvas-ba...

128 0 0

webpack5 externals打包时取消打包指定的库

简单说明externals这个属性,常用来做cdn的功能,在打包的时候不打包指定的库,比如vue,jquery,然后在html文件部分,手动引入库的cdn链接,但是,你在开发的时候,你还是需要npm或者yarn安装这个库,import引入使用,只是打包的时候会自动剔除。简单示例webpack.config.jsmodule.exports = { externals: { uikit: "UIkit", } }可以看到,externals是一个对象,对象里面有key和value,其中key的值就是package.json里面,安装的包的名字。而valu...

123 0 0
webpack5 externals打包时取消打包指定的库

node npm yarn 如何同时运行多个指令

node的bash命令其实是有对应的指令字符的,但是,这个指令只能再linux,mac上才有生效,再windows是无效的,所以了解一下就行。命令说明&&顺序执行多条命令,当碰到执行出错的命令后将不执行后面的命令&并行执行多条命令||顺序执行多条命令,当碰到执行正确的命令后将不执行后面的命令|管道符windows上进行多命令"scripts": { "dev": "cross-env NODE_ENV=development webpack --env development --progress -...

216 8 1

scss 自动生成margin和padding的class

费了半天劲才搞懂了,scss的函数代码写的是真累啊,而且不知道为啥我的代码格式化会给我自动换一行,导致极度不美观。//生成margin和padding $multiplier:4; //乘数 $dimensions:("p":"padding", "m":"margin"); //方向 $directions:("t":"top", "b":"bottom", "l":"left", &qu...

211 1 0

深度合并对象的方法

找了很久,现有的库有两个:1. Mergenpm地址: Merge用法:import merge from 'merge'; const obj1 = { name: 2}; const obj2 = { value: 1 }; //合并 merge(obj1,obj2); console.log(obj1); //{name:2,value:1} //克隆合并-与目标对象无关联 const obj3 = merge(true,obj1,obj2); console.log(obj3); //{name:2,value:1} console.log(obj3 === obj1)...

225 0 0

vue 过滤器 驼峰与短横线相互转换的方法

自己去注册吧,提供的是es6导出的方法//短横线转驼峰 export const dashToHump = function (value) { const textArr = value.split("-"); return textArr.map((item, index) => { if (index === 0) return item.toLowerCase(); return item.slice(0, 1).toUpperCase() + item.slice(1); }) .join("")...

利用JSON过滤对象和数组中指定的key属性

有时候我们在vue中进行for循环,就会涉及到绑定唯一值key的问题,但是并不是任何时候都会存在所谓的唯一值,使用index下标明显是不合适的,官方也不推荐,除非你for循环出来的列表不用变化。所以一般常用的做法就是给for循环的对象添加一个属性,属性的值是随机的uuid或者时间戳。这样前端问题解决了,如果遍历的数据还需要提交到后端,那么不就多了一个属性,这个属性后端不需要的。所以,我们需要在提交数据前,对数据进行过滤。过滤又得for循环删除?那怎么行,有没有那种通用的,简单的方法。过滤方法/** * @description: 过滤对象中指定的属性,也可以拿来浅拷贝 * @para...

363 13 0

使用vue.draggable拖拽组件遇到的一些问题

资源github:vue.draggable中文文档:vue.draggable中文文档api参考文档:sortablejsvue.draggable是基于sortablejs的vue封装,所有有些api官方并不会有过多的解释,可以去sortablejs查看下拖拽无法触发页面滚动当拖拽的内容大于页面宽高时,页面滚动就是一个必然的需求,但是vue.draggable默认情况并不能触发滚动。官方设置里有一个属性:scroll,如果为true时就能触发滚动,但是默认属性就是true;所以这个配置可以说是无效的。解决方案:cannot set scrollSensitivity19年的时候就有提...

443 1 0
使用vue.draggable拖拽组件遇到的一些问题

关于 element table多选里面实现单选的偷懒做法

在elment的table多选中增加单选逻辑,这个也不能说产品的问题,单选和多选应该算是比较基础的应用,但是,element并没有对单选做支持。于是我有了一个偷懒思路!前提由于table的一键全选按钮无法进行细致化操作,无法控制点击时选中的数量,只能在选中后的回调里面处理,所以,我的做法是单选时隐藏这个按钮。 selectable方法可以返回布尔值来表示当前格子是否允许勾选或者取消,其实就是禁用的意思。<el-table-column type="selection" :selectable="onSelectable"></el...

295 0 0
关于 element table多选里面实现单选的偷懒做法

深拷贝+循环引用

不允许循环引用的深拷贝function deepCopy(data) { const weakMap = new WeakMap(); function copy(data) { if (weakMap.has(data)) return null; //打断施法 const copyData = data instanceof Array ? [] : {}; weakMap.set(data, true); for (let [key, value] of Object.entries(data))...

285 0 0

关于element el-input 输入的值需要转number的问题

前言经常是一个input表单需要输入数字和小数,那么如果仅仅是要求数据格式,我们可以通过表单校验的方式对输入的值进行限制,具体的做法,我之前就写过文章:《element input表单验证数字类型方法大全》里面有关于数字类型校验的方式,基本涵盖了日常需求。但是,仅仅就只能这样吗???no,如果后端要求你输入的数字,提交给他的时候也必须是数字类型呢?要知道,即便我们做了表单校验,校验它输入的必须是数字格式,但是input本身就是一个string类型的值,即便你设置type="number"也无法改变它值的类型。有人说用.number;其实这个问题之前就聊过了,这个修饰符...

327 13 0

关于element table合并格子的思路

效果图需要将第一个col值相同的格子row进行合并。实现element的表格提供了一个span-method方法,该方法会为每个格子运行一次。比如,有一个3行的表格,每行4个格子,那么span-method就会运行:3*4=12;共计12次。有时候我们并不需要每个格子都运行一次,在上面的需求上,我们只需要每行运行一次就行了,所以我们可以通过span-method的参数中,解构出columnIndex每行每个格子的下标。<script> export default { methods: { spanMethod({columnIndex}) { if(...

276 8 0
关于element table合并格子的思路

git配置http、socks5代理

# 以下使用socks5代理 git config --global http.proxy socks5://127.0.0.1:1086 git config --global https.proxy socks5://127.0.0.1:1086 # 以下使用http代理 git config --global http.proxy http://127.0.0.1:1087 git config --global https.proxy https://127.0.0.1:1087 # 取消代理 git config --global --unset http.proxy gi...

284 0 0

.native修饰符 做了什么

估计也就只有我这个憨憨一直以为native会自动将事件传给组件的input那些元素,比如按键事件啊,点击事件啊。然后,我就一直很好奇,他是怎么做到准确绑定的?然而事实上,他就是一次事件的绑定而已。<base-input v-on:focus="onFocus"></base-input>base-input<template> <div class="input-item"> <input type="text"> </div> </t...

266 0 0

实现一个点击自动滚动到指定元素,并让input元素聚焦

效果图思路分析tab切换在vue中,tab的切换只需要改动tab组件的active属性即可,所以,我们只需要对点击的元素,点击后能提供一个它奴属于哪个tab选中项即可。具体就看自己的代码怎么设计,比如html元素可以使用data属性。聚焦聚焦就很简单了,input元素有focus方法,运行就会聚焦。滑动定位利用scrollIntoView方法,可以达到定位的效果,配置属性,就会有动画。element.scrollIntoView({behavior:"smooth"})MDN:Element.scrollIntoView()点击这个元素,从data属性上获取要滚动的元...

380 24 0
实现一个点击自动滚动到指定元素,并让input元素聚焦

Copy 一个复制操作的类

前言js有一个31k多的star的开源复制库:clipboard.js;但是一些简单复制并不想安装一个库来解决,所以就想自己写一个。copy所需要的东西Selection 对象用于获取被用户选中的部分,通过toString()方法可以获取被选中的文本内容,以及js操作选中。MDN文档:SelectionexecCommand 对象用于以命令的形式来操作网页的内容,说白了就是用它来实现复制文本操作,复制的是选中的文本MDN文档:execCommand 需要注意的是,execCommand在未来将会被遗弃,因为这个api本身是从ie浏览器那边继承的,久而久之各大浏览器都对其做了兼容,虽然...

278 0 0

分享一个vscode的配置 vue开发用的

安装的插件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...

862 0 0

对象扁平化

前言后端返回给前端的数据,有时候会是一个多层级对象,但是我们前端使用的时候,for循环遍历渲染时,多层级对象往往需要进行单独处理,因为还需要判断这个key值是否存在,否则会报错。强行让后端改变数据结构又好像不现实,无奈,只有自己处理了。掘金看到一位大佬文章《【算法】JS 实现对象的扁平化》感觉很合适,逻辑清晰。要求将对象中的层级扁平化,改成如下格式:// 实现一个 flatten 函数,实现如下的转换功能 const obj = { a: 1, b: [1, 2, { c: true }], c: { e: 2, f: 3 }, g: null, }; // 转换为 l...

354 12 0

一加8t 利用adb命令关闭 系统更新通知

adb添加至环境变量首先需要adb连接手机,adb工具需要下载:adb下载完毕后解压到磁盘位置,比如:D:/adb解压完毕后,我们需要将其设为环境变量。windows我的电脑右键属性 -- 高级系统设置 -- 环境变量 --- 找到Path --- 双击进入设置 --- 选择新建 --- 将D:/adb路径名加入,保存。重启系统。连接手机手机的驱动记得装好。手机开启usb调试模式usb连接电脑电脑打开命令工具,比如:Terminal输入:adb devices如果手机提示允许usb调试吗?,勾选允许,确认。此时命令会出现:PS C:\Users\13219> adb devices...

320 1 0

骨架动画指令 v-skeleton

意图就是想图片在加载时,能显示骨架动画,然后图片加载完成,骨架动画消失。这个可以用于一些小图的加载,比如:验证码、头像、logo啥的,如果是特别大的图,建议用懒加载效果图原理指令在bind阶段,判断绑定的数据是否为trun,并且class类名不存在,添加一个class用于骨架背景动画监听绑定值得变化,如果为false,那么移除class那么如何判断图片是否加载完毕,可以使用@load事件自定义指令import "./scss/index.scss"; export default { //首次 bind(el, binding) { if (!el....

285 0 0
骨架动画指令 v-skeleton

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

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

311 0 0