木灵鱼儿

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

面包屑导航+保留路由参数

面包屑导航在网站的使用中是常常出现的，也是一个很常用的功能，最近在项目的需求里面，要求面包屑导航除了可以进行路由跳转，还在跳转时保留路由的参数，也就是说：路由a有参数1，a进入到b路由，再通过面包屑导航回到a，这个参数1要依旧存在才行。这就把我给弄蒙蔽了，这咋整？想了好久，只能这样做了：教程[hide]首先，面包屑导航必须要有规范要求，在这个规范内才能生成面包屑导航，正所谓无规矩不成方圆。路由必须存在name和title两个属性，才能生成面包屑面包屑有面包屑独有的属性配置，该配置权限高于普通属性基本上遵循这两点，我们可以配置一个路由了：export default [ { p...

9272 0 10

vue 导航面包屑

vue 使用better-scroll创建一个横向滚动并处理谷歌浏览器cancelable=false报错

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

vue 使用better-scroll创建一个横向滚动并处理谷歌浏览器cancelable=false报错

本想着有木有人写好现成的组件，搜索了下，并没有，于是只能用better-scroll插件来做了。先看下效果图：教程具体的详细内容就不多说了，直接讲一下他的实现要求。最外围一个wrap容器，用于初始化的，他的宽度自己设置，然后overflow: hidden;必须设置，你也可以只设置x轴。wrap下面是一个宽度容器，content，他的宽度必须是他下面子元素宽度之和，比如有3个子元素，子元素的宽度是200，content就是3*200的宽度content容器下面就是具体的子元素了，尽量不用用margin做间隔，因为js获取margin不是很方便，可以多套个div元素，用padding来做分...

4532 0 0

vue better-scroll 横向滚动

vue 使用better-scroll创建一个横向滚动并处理谷歌浏览器cancelable=false报错

获取元素距离顶部的距离

木灵鱼儿 5年前 JavaScript

获取元素距离顶部的距离

这个方法太常用了，写个笔记 //获取顶部距离 function getTop(element) { let realTop = element.offsetTop; let parent = element.offsetParent; while (parent !== null) { realTop += parent.offsetTop; parent = parent.offsetParent; } return realTop; },接收原生dom对象

3576 0 0

元素顶部距离

网页灯笼

木灵鱼儿 5年前我的Github源码

网页灯笼

最近看群友搞了个灯笼效果，加上接近新年，所以我也来搞一个，在原来的基础上，我改用一个js文件搞定，省的总是粘贴html，css，太麻烦了。效果图文件说明源码文件夹里是源码，有修改需求可以改动这个文件es5里面是已经babel转换好的文件，其中有一个压缩和未压缩的，看自己需要引入任意一个文件即可。使用说明我们需要在的前面，添加这段代码<script id="denglong" type="text/javascript" src="https://cdn.jsdelivr.net/gh/mulingyuer/web-denglong/...

5032 0 0

github 源码网页特效

vue-awesome-swiper 目前最佳的轮播动画教程

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

vue-awesome-swiper 目前最佳的轮播动画教程

vue项目，如果要使用轮播，能做动画的只有vue-awesome-swiper了，除非牛人自己造轮子，但是vue-awesome-swiper是需要swiper的支持，而现在swiper已经出到6了，swiper的官网明确表示6只能支持vue3.0，而且官网没有旧版本的api文档，这就表示，目前主流的2.0项目，想用它真的就只能瞎子过河，摸不着边了。而且swiper的动画，是需要魔改代码的，因为动画的那个js文件需要改动，然后动画使用的animate.css也因为版本大改，导致使用起来越发的摸不着头脑，百度到的都是旧的教程，为此我特意研究了下，终于是“完美”使用了，为此出个教程。废话不多...

3.3w 0 40

vue 轮播 Animate.css

vue项目 .eslintrc的一些设置方法

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

vue项目 .eslintrc的一些设置方法

本来我是不怎么使用这个东西的，因为他报错实在是太烦了，但是当项目接手的人多了以后，代码可能会变得不稳定，每个人都有每个人的写法，也会有参差不齐的情况，有好有坏。有时候员工A创建了变量1，员工2修改后，变量1可能就不需要了，但是没有删除，因为代码不熟悉的缘故，往往会造成多余的代码出现，对后期维护非常不便，所以我想着能有一个基本的设定需求，在某些地方能有提供，甚至限制。所以我在初始化vue项目的时候选择的eslint的，初始化的时候有四个选项，我就选择的最后一项，也是试水。使用了eslint后遇到了几个问题：引入的第三方文件也被检测了，按道理那部分是不用检测处理的怎么配置规则这里就对应的说下...

3531 0 0

vue eslintrc eslint

git 删除远程分支某个文件或者某个文件夹

木灵鱼儿 5年前 Git 笔记

git 删除远程分支某个文件或者某个文件夹

经常遇到这种情况，不小心上传了某个文件，这个文件是不需要上传到远程仓库，很头疼。本地的又不想删除，想着直接删除远程，百度半天都没找到好用的，最后问了下群友，给了个教程链接，我研究了下，大概明白怎么回事。首先为了防止本地的再次被上传，需要配置本地白名单，白名单的话，以vue项目为例子，在项目根目录有一个.gitignore文件，没有就自己创建一个，然后里面直接填目录或者文件名就行了。/dist /xxx.js本地白名单之后，以后git上传都不会上传该文件。现在我们要处理远程仓库的文件首先我们需要删除git在缓存中的文件git rm --cached config.js // 删除con...

6420 0 0

文件 git 删除

vscode 无法推送refs到远端。您可以试着运行“拉取”’功能，整合您的更改

木灵鱼儿 5年前 Git 笔记

vscode 无法推送refs到远端。您可以试着运行“拉取”’功能，整合您的更改

这个问题出现的场景常常是这样：有人已经上传了一份文件a，自己也修改了文件a，准备推送时发现冲突了，然后，关闭了合并冲突的操作，哦吼，完了，拉也拉取不了，推送也推不了，放弃本次提交也不行。这种情况在文件多的情况常有发生，如果修改量不大的情况下，我建议直接放弃本地所有修改使用命令：git reset --hard origin/master如果你的文件是最新有效的，可以尝试先把本地的文件复制出来，在用上面的代码放弃，然后拉取完毕后再推送。

9312 0 0

git 冲突

关于点击相同导航菜单对应路由页面刷新问题的思路和方案

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

关于点击相同导航菜单对应路由页面刷新问题的思路和方案

一开始被要求这个功能我是一脸蒙蔽的，因为写了这么多vue项目，没有哪个项目要求这么做，况且，作为一个无刷新的前端项目，突然来个刷新，让我有点措不及防。中午和同事吃饭的路由讨论了此事，他说了一个点，让我想到，说不定可以这么做，于是下午百度了一些文章，心里有了思路，顺着这个思路，成功搞定这个需求。思路相同的路由，是不允许重复跳转的，所以不会触发路由守卫，想通过路由守卫处理这条路走不通。有人说通过this.$router.go(0)可以实现页面刷新，我测试了下，确实是页面刷新了，但是我要的是路由页刷新，路由页可能是某个区域，而不是整个网页，所以该方案也行不通。最终只能选择v-if和router...

5406 0 0

vue 路由导航

关于Element 表单验证数字类型不能为空字符的问题

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

关于Element 表单验证数字类型不能为空字符的问题

今天写代码遇到一个问题，就是有一个输入框，他必须为整数，但是又不是必填的，默认的值是一个空字符，导致每次提交是都提示校验不通过。<template> <el-input v-model.number="sort" placeholder="请输入分类排序"></el-input> </template> <script> export default { data(){ return { sort:"", } ...

7298 0 2

vue element 整数

yarn和npm清理缓存

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

yarn和npm清理缓存

今天遇到一个bug，就是安装的时候老是报错，怎么装都错，所以我觉得是缓存的问题，所以需要清理缓存npm cache clean --force yarn cache clean

5083 0 0

yarn npm 缓存

el-input 只能输入数字和小数

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

el-input 只能输入数字和小数

饿了么的input组件只是在v-modal绑定的时候有一个.number修饰符，使用这个修饰符确实可以只输入数字，但是输入的是整数，无法输入小数，而且字符串还是可以输入，还可以负数，很尴尬。如果只想让它输入数字，小数，甚至更复杂的判断，上面的方式是不行的。网上的处理方式<el-input-number v-model="num" oninput ="value=value.replace(/[^0-9.]/g,'')"></el-input> 大概就是给他添加一个老版本的事件，行内事件进行replace替...

6433 0 0

vue element 数字

判断是node环境还是浏览器环境

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

判断是node环境还是浏览器环境

if(typeof module !== "undefined" && module.exports){ //node }else { //浏览器 }

3711 0 0

浏览器 node 环境

Object 对象的扩展

木灵鱼儿 5年前 ES6

Object 对象的扩展

属性的简写es6允许对属性进行简写，可以直接使用变量，变量名直接成为了属性名。var a = "hello"; var b = {a}; //等同于 var b = { a:a }属性里的方法也可以简写var a = { b(){...} } //等同于 var a = { b: function(){ ... } }在CommonJS模块输出变量时，也就是node模块导出时，这种简写就显得十分方便，我们直接导致一个对象，对象里面使用简写。var a = {}; var b = {}; module.exports = {a,b}而属性的赋...

4945 0 0

对象 javascript es6

Array 数组扩展

木灵鱼儿 5年前 ES6

Array 数组扩展

扩展运算符console.log(...[1,2,3]); //1,2,3扩展运算符会将后面跟着的数组转换为参数序列，这种效果一般用于函数参数，数组操作里面。扩展运算符后面甚至可以接表达式，但是表达式一定要有数组抛出const arr = [...(x>0?[1]:[]),2];如果是一个空数组使用扩展运算符，则无任何效果const a = []; console.log([...a,1]); //[1]代替数组的apply方法首先要知道apply除了改变this的指向外，第二个参数是一个数组，apply会将这个数组转为序列参数。如：function test(x,y,z){ ...

4554 0 0

javascript es6 Array

fetch下载后端提供的文件

木灵鱼儿 5年前 JavaScript

fetch下载后端提供的文件

最近有这么一个需求，就是后端api地址返回一个文件，这个文件是已经格式化好的，比如表格.xlsx，或者是其他文件zip这些。但是后端他加了鉴权，所以如果直接a链接访问这个接口，我们无法在头信息上添加token字段，于是这个请求被作为无效。然后我使用了axios的请求，结果返回的内容，转换为blob对象后，下载完文件就被破坏了，无法打开。这里我贴一下之前的代码。api().then(res=>{ let blob = new Blob([err]); let a = document.createElement("a"); a.href = URL.c...

5245 0 0

fetch 下载文件 blob

精华 axios 修改http协议和转formData对象

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

精华 axios 修改http协议和转formData对象

修改协议最近发现axios的修改协议有个很方便的操作，就是通过create创建一个axios对象的时候，就可以直接设置上传协议了。const api = axios.create({ headers: { 'Content-Type': 'application/x-www-form-urlencoded', } }); 这样我们将协议改为了application/x-www-form-urlencoded这个协议可以上传formData对象，但是他不能上传文件，所以如果你要上传文件，需要改为这个协议：multipart/fo...

6617 0 0

vue FormData axios

flex-grow 1; 不能等分的问题

木灵鱼儿 5年前 CSS

flex-grow 1; 不能等分的问题

当我们给父元素设置flex布局的时候，子元素为了能够等分，常常flex-grow: 1;，但是你会发现，当里面有内容的时候，宽度就发生了变化，变得不是等分了。所以我们可以理解：flex-grow: 1其实他不是真正意义上的等分宽度，而是等分剩余宽度，而剩余宽度是总宽度减去内容宽度，再进行等分。而且这个等分甚至还是根据内容多少来等分，有的内容多，他等分还多一些。所以这就很尴尬。为此，如果想要真正的等分，就需要设置相同的width宽度。如：.value { width: 0; flex-grow: 1; }这样就行了。width的值0我感觉是最好的，如果你设置其他宽度也行，具体看自己...

5073 0 0

弹性布局 css flex

解决 vscode运行vue项目卡死提示：窗口已崩溃（原因oom）

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

解决 vscode运行vue项目卡死提示：窗口已崩溃（原因oom）

最近发现没啥用，玄学，这个崩溃在项目内容很多的时候就会出现，更换了好几个版本的系统，vscdoe版本也换过，node版本也换过，找不出原因，用其他ide就不会出现这个问题，估计是锐龙cpu的问题吧，用g4560随便启用都不出问题，真是日了狗了，只能将就用，等以后版本修复了。一般这个问题有两种情况，一种是项目非常庞大，另一种就是内存泄漏，泄漏的话跟代码有关系。但是我们肯定不能直接大刀阔斧的去删代码，所以只能自己想办法了，唯一的办法就是增加node服务的内存限制。为此我们需要安装一个全局的插件：increase-memory-limityarn global add increase-mem...

4.5w 0 28

vue vscdoe oom

关于element 侧边栏导航高亮的思路

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

关于element 侧边栏导航高亮的思路

不久之前，我写了一篇《element ui 侧边栏导航刷新自动展开并高亮》的文章，里面主要讲了怎么对侧边栏导航进行高亮，刷新并依旧保持高亮展开的方法。但是后来我发现我之前的那种思路有些窄了。不太适合更大型的站点开发使用。之前的方法主要讲的是：每个网页对应一个导航栏菜单，此时导航栏菜单和网页是一一对应的，所以我可以使用当前路由的name值来进行高亮。但是，如果有更复杂的情况呢？比如：我的导航菜单只显示两级，剩下的级数不显示，点击三级及以上时怎么办？虽然两个页面在路由配置里是同级路由，但是a路由点击按钮跳转到b路由，b路由有前缀条件，所以不能直接出现在导航菜单里，那么应该已经保持a路由菜单高...

6641 4 0

vue 路由 element

element 上传文件组件-文件列表动画bug

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

element 上传文件组件-文件列表动画bug

今天想封装一个上传组件，用于本地选择文本文件后，前端直接将文本的内容给读取出来，然后提交这个拿到的文本内容。所以，组件的作用就只是将文件转为文本。bug封装中我发现了一个bug，由于上传组件是自动上传的，所以我使用自定义上传覆盖默认上传方法。然后再自定义上传方法中拿到文件，并读取到文本。但是饿了么组件会默认将你选择的文件显示到文件列表中，也就是上面图上那个样子。并且会有动画但是，如果我想要让它显示已上传，就是文件列表显示打勾，就需要对组件绑定的file-list数组push一个对象，对象里面有文件的name值，也就是如下：this.fileList.push({name:"文件...

4592 0 0

上传 vue element

防抖动

木灵鱼儿 5年前 JavaScript

防抖动

js里面的防抖动，就是当一个函数不断被触发，但是实际有效值是最后一次的时候，为了节省资源，提高性能，让这个函数只触发最后一次。比如常见的resize事件，scroll事件，非常典型的一个重复触发，有效的是最后一次。那么怎么做呢？function debounce(fn, delay) { // 维护一个 timer let timer = null; return function() { // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量 let context = this; let args = arguments;...

3555 0 0

javascript vue 防抖动

Javascript对象是面向对象还是基于对象

木灵鱼儿 5年前重学前端

Javascript对象是面向对象还是基于对象

什么是面向对象？不同的语言，他们对于对象的解释都不相同，但无论如何，我们应该认识到，对象并不是只存在于计算机领域的一个概念，它是顺应人类思维模式产生的一种抽象。那么，我们先来了解下人类思维模式下，对象是什么？对象这一概念在人类的幼儿期形成，这远远早于我们编程逻辑中常用的值、过程等概念。在幼年期，我们总是先认识到某一个苹果能吃（这里的某一个苹果就是一个对象），继而认识到所有的苹果都可以吃（这里的所有苹果，就是一个类），再到后来我们才能意识到三个苹果和三个梨之间的联系，进而产生数字“3”（值）的概念在《面向对象分析与设计》这本书中，Grady Booch替我们做了总结，他认为，从人类的认知角...

6278 0 5

重学前端面向对象

JavaScript类型：关于类型，有哪些你不知道的细节？

木灵鱼儿 5年前重学前端

JavaScript类型：关于类型，有哪些你不知道的细节？

Undefined 为什么有的编程规范要求用void 0代替undefined？因为在js里面，undefined是一个变量，它奴属于window，是全局对象window的一个属性。但是全局的undefined是无法被修改的，这也意味着在局部作用域中我们可以重新定义undefined变量function test() { var undefined = "我被重新定义了"; const a = undefined; console.log(a); } test(); //我被重新定义了这种情况只有在我们直接使用undefined变量的时候才会出现。...

3503 0 0

重学前端类型

关于网速与实际MBye储存大小的终极答案

木灵鱼儿 5年前教程

关于网速与实际MBye储存大小的终极答案

虽然我们都知道10m的宽带，速度可能也就1mb多一点，但是其中的换算规则是怎么样的，心里应该是模糊的吧，我自己百度了好久，看了一大堆答案，都是乱七八糟的，一会MB，一会Mb，一会又Mbit，你根本不知道怎么回事，突然就多了好几个单位，我们不是计算网速mb吗？于是我花了好久时间查了一些资料，询问了一些人，得出以下表格：首先我们又三个单位，网速是bps，容量分别是Byte、Bbit。其中1bps = 1bit，所以bps单位对应bit单位，是相等的，但是byte和他们是相差8倍的（1byte = 8bit = 8bps）。假设我们10kbps网速，我们先转为bps，10*1024=10240...

3027 0 0

网速

木灵鱼儿

面包屑导航+保留路由参数

vue 使用better-scroll创建一个横向滚动并处理谷歌浏览器cancelable=false报错

获取元素距离顶部的距离

网页灯笼

vue-awesome-swiper 目前最佳的轮播动画教程

vue项目 .eslintrc的一些设置方法

git 删除远程分支某个文件或者某个文件夹

vscode 无法推送refs到远端。您可以试着运行“拉取”’功能，整合您的更改

关于点击相同导航菜单对应路由页面刷新问题的思路和方案

关于Element 表单验证数字类型不能为空字符的问题

yarn和npm清理缓存

el-input 只能输入数字和小数

判断是node环境还是浏览器环境

Object 对象的扩展

Array 数组扩展

fetch下载后端提供的文件

精华 axios 修改http协议和转formData对象

flex-grow 1; 不能等分的问题

解决 vscode运行vue项目卡死提示：窗口已崩溃（原因oom）

关于element 侧边栏导航高亮的思路

element 上传文件组件-文件列表动画bug

防抖动

Javascript对象是面向对象还是基于对象

JavaScript类型：关于类型，有哪些你不知道的细节？

关于网速与实际MBye储存大小的终极答案

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

面包屑导航+保留路由参数

vue 使用better-scroll创建一个横向滚动并处理谷歌浏览器cancelable=false报错

获取元素距离顶部的距离

网页灯笼

vue-awesome-swiper 目前最佳的轮播动画教程

vue项目 .eslintrc的一些设置方法

git 删除远程分支某个文件或者某个文件夹

vscode 无法推送refs到远端。您可以试着运行“拉取”’功能，整合您的更改

关于点击相同导航菜单对应路由页面刷新问题的思路和方案

关于Element 表单验证数字类型不能为空字符的问题

yarn和npm清理缓存

el-input 只能输入数字和小数

判断是node环境还是浏览器环境

Object 对象的扩展

Array 数组扩展

fetch下载后端提供的文件

精华 axios 修改http协议和转formData对象

flex-grow 1; 不能等分的问题

解决 vscode运行vue项目卡死 提示：窗口已崩溃（原因oom）

关于element 侧边栏导航高亮的思路

element 上传文件组件-文件列表动画bug

防抖动

Javascript对象是面向对象还是基于对象

JavaScript类型：关于类型，有哪些你不知道的细节？

关于网速与实际MBye储存大小的终极答案

最近评论

博客文章RSS订阅

博客评论RSS订阅

解决 vscode运行vue项目卡死提示：窗口已崩溃（原因oom）