深圳最菜的前端-CSDN博客

原创 vue-router跳转报错Navigation cancelled from“/...“ to “/...“ with a new navigation guard

今天维护老项目，遇到这么一个路由跳转的bug，记录一下，头都找大了，终于解决了虽然不影响正常的跳转，但是每次点击跳转都会报错，所以很烦，然后网上也找了很多方法，也试了很多方法，但是好多都是复制粘贴的文章，看的我好心累，索性我自己总结一个简单粗暴模式，直接更改router版本，目前网上比较多的，是2个（没尝试）将版本降低到3.0以下，比如2.8.0将版本升级到3.0版本，比如3.0.7 修改router.push()模式（试过了没用）说的是因为是promise模式，没有捕获到错.

2022-05-31 16:05:46 1739 5

原创前端分页的实现

硬写版本（没有组件）思路：将返回的列表数据根据每页显示的数量进行切割，分别展示// html部分<div class="table"> <div v-for="(item,index) in currentPageData" :key="index"> {{item.name}} </div></div><div class="footer"> <button @click="prevPage()">上一页.

2022-05-27 15:32:57 362

原创关于elemet-ui升级版本导致el-table不展示这个事

背景：5年前的老项目了，然后新增了需求起因：然后我顺手就引用了一个叫做el-description的描述组件，然后就写完了业务，然后本地调试了一下，咦，没展示，一看报错信息，然后顺手就升了个级，因为使用这个组件，要2.15.6以后才能用经过：本地调试，没问题，真是一次完美的迭代，虽然在五年前的屎山里面遨游了一下，但是问题不大，然后熟练的git add. / git commit -m "xx功能新增 / git pull / git push /"，然后在Jenkins上打包，开始摸..

2022-05-23 14:13:50 1088

原创 typescript学习笔记《安装使用、热更新以及基本数据类型》

安装使用、热更新以及基本数据类型安装一、热更新二、数据类型安装 npm install -g typescript一、热更新在写typescript的时候，很容易需要一个功能，就是保存后自动编译，因为typescript是不支持浏览器的，只能编译成浏览器熟悉的es5或者是es6才能被识别到，所以需要进行设置运行指令: tsc --init，安装init文件，然后在安装好的tsconfig.json文件中，找到"outDir": "./"，保存后生成的js文件，然后自己修改路径，这样保存后的

2022-04-14 14:50:42 547

原创对循环出来的表单，进行校验

如图所示重点代码： props<template> <el-form :model="form" ref="ruleForm" label-width="100px"> <el-form-item label="负责人" prop="principal" :rules="rules.principal"> <el-input v-model="form.principal"></el-input> </e

2022-03-28 14:18:29 1127

原创 package.json 与 package-lock.json 的关系

模块化开发在前端越来越流行，使用 node 和 npm 可以很方便的下载管理项目所需的依赖模块。package.json 用来描述项目及项目所依赖的模块信息。那 package-lock.json 和 package.json 有啥关系和联系呢？package.json管理包大家都知道，package.json 用来描述项目及项目所依赖的模块信息。，就是帮我们管理项目中的依赖包的，让我们远离了依赖地狱。通过 npm 管理，使用一些简单的命令，自动生成package.json, 安装包依赖

2022-03-25 09:34:32 362

原创可以学习起来的js开发技巧

1. 类型强制转换1.1 string强制转换为数字可以用*1来转化为数字(实际上是调用.valueOf方法) 然后使用Number.isNaN来判断是否为NaN，或者使用 a !== a 来判断是否为NaN，因为 NaN !== NaN'32' * 1 // 32'ds' * 1 // NaNnull * 1 // 0undefined * 1 // NaN1 * { valueOf: ()=>'3' }

2022-03-09 14:25:32 117

原创 el-table合并单元格的正确食用方法

如图所示，当前的表格hover效果的时候，变成了选中2行

2022-03-08 14:22:10 2152

原创 vue项目配置eslint保存自动格式化

vue项目中有保存自动格式化，还是很舒服的，满足了大多数强迫症1，用户设置和工作区设置2，如何找到配置文件3，setting.json4，需要安装的插件5，设置默认格式化程序在VSCode中，两个层级的设置分别为：用户设置：应用于所有工作区的全局设置。工作区设置：只对当前工作区有效的设置。相比之下，工作区设置具有更高的优先级，即当工作区设置与用户设置相冲突时，以工作区设置为准，但是一个用户设置就够了如何找到配置文件位置方法一：Ctrl + Shift + P 然后搜索..

2022-03-07 17:29:17 6105

原创组件传值之数据穿透（响应式）

vue实现传值很多，什么props，provide/inject，bus，vuex，等等，但是最近遇到一个业务场景组件A是父级组件，组件B是子组件，组件C是孙子组件，关系是相互引用关系，A组件中引用了B组件，B组件引用了C组件1）那么问题来了，就是当前三个组件之间传值，用props一个传一个吗，有点麻烦，万一我嵌套四个，五个呢2）用vuex的话，又觉得大材小用了，就一个内部传值，而且就传递一个ID3）用localStorage也许是一个不错的选择，但是万一这样的场景很多呢，全部存本地也不太好S

2022-01-12 16:38:36 980

原创高德地图正确食用方法（持续更新）

刚好最近有写一些地图，但是在网上，关于谷歌地图的使用方法其实并不多，所以今天就直接记录一下初始化一个简易地图在谷歌API中，有一个简易的创建地图的步骤准备快速上手NO1：初始化...

2021-12-27 14:39:14 2525

原创 JavaScript localeCompare() 方法

业务中经常遇到根据某个参数进行排序对比// sort排序let data = [1,2,4,3]data = data.sort((a,b)=> b-a)console.log(data,'data') // [4, 3, 2, 1]这个是最简单的数组排序了但是往往在业务中，遇到的排序情况稍微复杂一些let listInfo = [{name: '张三',age: 13},{name:'李四', age: 15},{name: '王三', age: 12}]listInfo.

2021-11-19 18:28:06 380

原创 echarts使用姿势（持续更新）

好久没有更新博文了，加上最近写了很多大屏项目，用到echarts挺多的也踩了很多很多坑，刚好最近稍微有点空，就做个总结把根据返回数据来进行echarts渲染，但是会出现echarts已经渲染了，但是才拿到数据解决思路，将echarts单独提成一个组件，然后在调用页面通过ref的形式进行，实参形参的格式进行数据传递。拿到数据以后再进行渲染// echarts组件<template> <div ref="charts" class="charts"></div&

2021-11-08 13:34:02 603

原创 vue实现伪3D切换滚动（附代码）

今天写项目，遇到一个滚动需求，贴出来，做一个记录这个是最终的一个效果，点击左右小箭头，实现滚动效果

2021-07-12 11:08:32 869

原创异步问题（记录）

执行顺序// 同步主线程 => 异步线程 => 微任务 => 宏任务 => 宏任务里再循环 => 微任务 => 宏任务//核心理解 //promise 是同步的，只有relove出去的才是异步 //promise 是微任务 //setTimeout ajax异步回调是宏任务setTimeout(() => { console.log('1') // 宏任务}, 0);Promise.relove() .then(()=> {

2021-06-11 11:38:26 58 1

原创修改浏览器默认滚动条样式

设计稿长这样``然后，直接贴代码吧，越菜的人，记录的越多// html<div class="scroll"> <div class="wrap"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div>

2021-06-08 15:36:22 157 1

原创 vue清除默认样式css表

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, e

2021-05-28 15:53:05 446

原创 vue自定义指令

vue中很多指令，v-modle，v-for，v-if，等等，但是因为业务需要，一般的指令已经不够了，所以可以让开发自己根据业务去新增使用vue的全局API: Vue.directive( id, [definition] )就可以完成自定义指令子定义指令钩子函数bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。update：所在组件的 VNode 更新时调用，但是可.

2021-05-28 10:08:32 82

原创 vue extend + promise封装全局弹窗组件

因为项目没有引入第三方UI库，所以所有的公共组件都需要自己封装现在需要一个全局的弹窗，要有promise异步处理实现后的效果// components/confirm文件<template> <div class="popup-wrap" v-if="showPopup"> <div class="popup-center"> <div class="popup-content"> <div clas

2021-05-27 17:57:17 814

原创 provide && inject

一般我们在vue中用的比较多的，都是子组件和父组件相互传值，或者是跨组件的vuex父子组件通信// 父组件<template> <div> <Confirm :data="btnList"></Confirm> </div></template><script>import Confirm from "@/components/confirm"export default { components

2021-05-25 16:20:33 2066

原创混入mixins

具体合并策略：mixins中的data会合并到data中，有冲突的话，data中数据覆盖mixins中的数据mixins中的钩子函数也会执行，先执行mixins中的钩子函数methods、components 和 directives会执行，但有冲突时，原methods、components 和 directives会覆盖mixins中的methods、components 和 directives如何使用在src目录下，新建一个mixins文件，然后在文件下新建一个common.js//

2021-05-25 14:52:16 344 4

原创使用vue canvs绘制圆环

很多时候，会有绘制圆环的要求，比如渐变，圆环等等所以现在封装了一个方法，可以直接绘制绘制样子大概这样的// html<div class="medium-graph"> <canvas id="medium-graph-canvas" width="292" height="292" /></div>// js mounted() { var medium_canvas = document.getElementById('medium-graph

2021-04-23 15:51:58 530 1

原创如何中断forEach循环

场景一般我们会使用forEach之类的语法，进行数组遍历，并且在遍历时进行到某一步的时候进行业务代码编写，这个就意味着需要打断循环例如：let arr = [1, 2, 3]arr.forEach((item, index)=>{ if (item == 2) { // 业务逻辑编写s }})语法Array.forEach((currentValue, index, array, thisArg) => {})currentValue: 数组中正在处理的当前元素。

2020-12-30 10:15:56 12469 1

原创样式重置

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, l

2020-12-08 16:53:58 201

空空如也

空空如也