![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
方法
深圳最菜的前端
这个作者很懒,什么都没留下…
展开
-
swiper联动
联动,然后居中,默认展示第二个,索性直接贴下代码,纪录一下实现的核心代码。今天写H5,遇到一个需求,就是两个。第一眼看到这个需求,反应就是两个。的联动,设计稿长这样。原创 2022-12-09 17:39:04 · 878 阅读 · 1 评论 -
关于H5强制刷新页面
今天开发H5,遇到一个问题,从跳转到内嵌到的,然后打开第三方链接,最后从第三方链接返回上一页的时候,遇到接口请求报错,都是空的,但是刷新当前页面却可以正常展示,但是定位不到问题,最后一把梭,直接强制判断是否是返回,然后强制刷新当前页面,就解决了原创 2022-12-06 16:39:47 · 1285 阅读 · 0 评论 -
vue-pdf正确食用方式
pdf简单功能实现原创 2022-08-29 18:04:30 · 334 阅读 · 0 评论 -
vue使用百度地图
百度地图原创 2022-06-16 16:56:45 · 527 阅读 · 0 评论 -
git比较分支差异
git分支差距比较原创 2022-06-06 15:20:39 · 621 阅读 · 0 评论 -
前端分页的实现
硬写版本(没有组件)思路:将返回的列表数据根据每页显示的数量进行切割,分别展示// 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 · 374 阅读 · 0 评论 -
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 · 1868 阅读 · 5 评论 -
关于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 · 1152 阅读 · 0 评论 -
typescript学习笔记《安装使用、热更新以及基本数据类型》
安装使用、热更新以及基本数据类型安装一、热更新二、数据类型安装 npm install -g typescript一、热更新在写typescript的时候,很容易需要一个功能,就是保存后自动编译,因为typescript是不支持浏览器的,只能编译成浏览器熟悉的es5或者是es6才能被识别到,所以需要进行设置运行指令: tsc --init,安装init文件,然后在安装好的tsconfig.json文件中,找到"outDir": "./",保存后生成的js文件,然后自己修改路径,这样保存后的原创 2022-04-14 14:50:42 · 560 阅读 · 0 评论 -
对循环出来的表单,进行校验
如图所示重点代码: 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 · 1208 阅读 · 0 评论 -
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 · 371 阅读 · 0 评论 -
可以学习起来的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 · 124 阅读 · 0 评论 -
vue项目配置eslint保存自动格式化
vue项目中有保存自动格式化,还是很舒服的,满足了大多数强迫症1,用户设置和工作区设置2,如何找到配置文件3,setting.json4,需要安装的插件5,设置默认格式化程序在VSCode中,两个层级的设置分别为:用户设置:应用于所有工作区的全局设置。工作区设置:只对当前工作区有效的设置。相比之下,工作区设置具有更高的优先级,即当工作区设置与用户设置相冲突时,以工作区设置为准,但是一个用户设置就够了如何找到配置文件位置方法一:Ctrl + Shift + P 然后搜索..原创 2022-03-07 17:29:17 · 6244 阅读 · 0 评论 -
组件传值之数据穿透(响应式)
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 · 1000 阅读 · 0 评论 -
高德地图正确食用方法(持续更新)
刚好最近有写一些地图,但是在网上,关于谷歌地图的使用方法其实并不多,所以今天就直接记录一下初始化一个简易地图在谷歌API中,有一个简易的创建地图的步骤准备快速上手NO1:初始化...原创 2021-12-27 14:39:14 · 2578 阅读 · 0 评论 -
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 · 397 阅读 · 0 评论 -
echarts使用姿势(持续更新)
好久没有更新博文了,加上最近写了很多大屏项目,用到echarts挺多的也踩了很多很多坑,刚好最近稍微有点空,就做个总结把根据返回数据来进行echarts渲染,但是会出现echarts已经渲染了,但是才拿到数据解决思路,将echarts单独提成一个组件,然后在调用页面通过ref的形式进行,实参形参的格式进行数据传递。拿到数据以后再进行渲染// echarts组件<template> <div ref="charts" class="charts"></div&原创 2021-11-08 13:34:02 · 613 阅读 · 0 评论 -
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 · 837 阅读 · 0 评论 -
异步问题(记录)
执行顺序// 同步主线程 => 异步线程 => 微任务 => 宏任务 => 宏任务里再循环 => 微任务 => 宏任务//核心理解 //promise 是同步的,只有relove出去的才是异步 //promise 是微任务 //setTimeout ajax异步回调是宏任务setTimeout(() => { console.log('1') // 宏任务}, 0);Promise.relove() .then(()=> {原创 2021-06-11 11:38:26 · 63 阅读 · 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 · 160 阅读 · 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 · 504 阅读 · 0 评论 -
vue自定义指令
vue中很多指令,v-modle,v-for,v-if,等等,但是因为业务需要,一般的指令已经不够了,所以可以让开发自己根据业务去新增使用vue的全局API: Vue.directive( id, [definition] )就可以完成自定义指令子定义指令钩子函数bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。update:所在组件的 VNode 更新时调用,但是可.原创 2021-05-28 10:08:32 · 85 阅读 · 0 评论 -
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 · 2076 阅读 · 0 评论 -
使用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 · 569 阅读 · 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 · 12534 阅读 · 1 评论