- 博客(20)
- 收藏
- 关注
RSS订阅原创 position: fixed；设置吸底按钮.挡住内容,问题解决办法
我们常常会有这种需求,提交按钮始终保持在手机底部。通过position: fixed搭配父盒子padding-bottom就可以做出完美的按钮吸底效果了。如果不加padding-bottom容易挡住内容的部分。
2022-09-06 10:15:09
1295
1
原创 element-UI$confirm消息提示搭配for of 使用.不能生成多个confirm的问题.
问题描述用for of 循环遍历数据,生成多个confirm弹窗.然后逐个关闭遇到问题：只会生成以最后一条数据为准的confirm弹窗,详细情况见图例如果所示数组长度为5,但是只弹窗了最后一个数据的弹窗.我们想要的效果是生成五个弹窗,然后逐步关闭原因分析：因为异步执行机制会导致只能生成最后一次循环结果,不能生成多个confirm,导致需求无法完成.解决方案1(推荐使用的方法for await…of)：使用for await…of 在完成当前confirm弹窗并且回调后,在弹出下一次的c
2022-03-17 19:22:59
1658
2
原创 vue对比两段json文本修改,修改的项添加红色高亮显示
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录需求一、实现思路二、实现步骤1.数据格式2.代码部分3.html渲染部分代码4.完成结果总结需求用户需求是记录项目各项操作的日志,并且显示给用户,并且把有修改的值给用户高亮显示,如图所示一、实现思路因为返回的json的字段的属性是固定的,可以通过逐个比较更新前,后的转义后json串,如果某个属性的值不相同,就给该属性的值加上color样式 然后通过v-html渲染.二、实现步骤1.数据格式更新后的数据更新前的老数
2021-11-08 11:55:35
3790
3
原创 swiper大屏文件预览图片和视频,视频切换时暂停视频.
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录需求一、遇到问题？二、渲染图片和视频1.首先判断附件是否是视频文件和图片文件,如果不是就显示附件不支持预览2.html代码部分解决切换视频时候暂停的问题2.通过监听swipier的切换回调函数配合动态ref 来获取dom,并且判断dom是否是视频 如果是视频调用video的原生api 暂停视频需求要求做附件预览,可以预览图片文件和视频文件。一、遇到问题？视频文件一旦播放切换swiper轮播图到下一张,上一个的视频还是会保持
2021-11-03 11:58:38
1243
原创 对浏览器事件循环宏任务和微任务的理解
文章目录前言一、微任务二、宏任务三.代码实战理解四、视频链接总结前言事件循环JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为，防止主线程的不阻塞，Event Loop 的方案应用而生。Event Loop 包含两类：一类是基于 Browsing Context，一种是基于 Worker。二者的运行是独立的，也就是说，每一个 JavaScript 运行的"线程环境"都有一个独立的 Event Loop，每一个 W
2021-09-08 09:03:11
500
原创 vue组件深度传值provide、inject,值类型响应式的方法
文章目录前言一、provide,inject是什么？二、使用步骤1.祖先组件provide注入，并且传入的是整个this指向2.后代组件接收总结前言最近封装了一个上传,下载,查看附件的组件,其中有三层层级关系,需要深层次传值,一开始用props组件传值,但是要传两层感觉有点不优雅.后面上面查了vue的provide,inject方法,但是因为是传的值类型不能响应式,后面想到了一个方法可以响应式//提示：以下是本篇文章正文内容，下面案例可供参考一、provide,inject是什么？通常，当我们
2021-08-26 10:48:46
2111
原创 vue/cli4,配置test测试环境,并通过全局控制变量管理地址
文章目录前言一、创建.env.test文件二、在packge.json中创建一个打包模式test三、修改vue.config.js配置四、运行测试环境五、完成效果5.1测试环境5.2开发环境六、注意事项总结前言由于公司项目较小,所以项目的管理比较随意,之前都是直接通过本地打包npm run build 打包后的文件发送给测试就测,最近对接一个单点登录,需要配置回调地址,地址的格式是本地的端口,这就造成了需要配置三个地址,我的本地(开发用),测试本地(测试用),服务器线上(正式环境)。然后每次打包给测试
2021-08-09 13:51:53
821
2
原创 两个el-date-picker,时间选择联动功能,选择第一个picker时间自动计算第二个picker时间,以及禁用天数
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录el-date-picker根据需求设置分别的禁用天数一、需求原型图二、刚开始达成的效果,入场时间因为只需要判断当前时间,就很简单的完成了当天之前的禁用,预计出场时间只能设置当前时间延后14天之后的可以选. 没有达到需求的要求,预计出场日期在入场日期延后14天之后的可选.2.1 代码部分二、发现问题.后面发现预计出场时间的inPickerOptions的return 的时间应该是根据入场时间来计算,但是出现了 this指向找不到的
2021-07-30 17:28:53
344
原创 高德地图加载报错-------禁止多种API加载方式混用
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、问题描述二、寻找问题二、解决方法总结前言最近在做一个打卡功能,需要用到地图组件.在引入地图的时候加载地图遇到问题.一、问题描述通过amap-jsapi-loader的方式渲染地图但是报错,禁止多种API加载方式混用.详情如下图二、寻找问题通过查找最后发现报错原因是因为,前辈的代码在public下通过cdn的方式引入了高德的js文件,导致渲染冲突.但是寻找了好久二、解决方法注释或者删掉index下引入
2021-07-23 10:48:17
13847
11
原创 fetch,解决高德地图公共api,跨域问题
目录1.功能需求2.遇到的问题3.解决的办法1.功能需求功能需求是需要做一个可以选择各街道的滚动功能,但是由于后端没有街道数据,只有自己去第三方寻找,最后用的高德地图的api. 预期效果如下2.遇到的问题不知什么情况,我在请求高德公共api的时候,遇到了跨域问题 CORS error.如下图3.解决的办法通过查阅 fetch文档,并使用fetch解决了改跨域问题,如下图...
2021-07-23 10:33:21
3698
3
原创 网页移动端,查看大图功能.使用手机默认的返回方式(比如左划返回),回跳上一个路由的问题
1.由于大图是一个组件,没有单独给路由,所以调用手机的返回上一层实际上改变的是路由,就会回到上一个路由. 功能无法完成. 下面上gif展示图启用右划返回,直接返回到了首页.用户体验极差.2.解决方案是给路由添加一个默认的空记录,下面直接上代码和完成的样子图3.完美解决. 踩坑结束...
2021-05-17 17:35:44
235
3
原创 vant Tabbar底部导航访问二级也没,返回.tabbar的索引始终显示首页. 与界面不对应的问题
1.用vant的tabbar组件,做底部导航,在二级页面返回到一级页面底部导航索引不对应下面上图,点击返回后应该高亮我的上报最开始的做法是用vmodel配合change事件 来进行 控制.贴代码(坑的要死千万不要用这个方式,后面想了很多办法,不如监听,计算属性,本地存储) 都没能完全解决2.解决方法是,切换route模式.切换后一行js代码都不需要 完美解决问题自闭好久,仔细百度了下,在看了看api解决了这个坑. 发个帖记录一下.贴代码...
2021-05-13 11:00:26
1678
4
原创 markLine的平均值的显隐控制问题
封装echarts柱状图,同时使用多个echarts,markLine的平均值的显隐控制问题.1.问题描述.ui原型图给出的,是一个相似度很高的echarts柱状图,区别在于个别配置,比如有些要显示平均数,有的不显示. 由于相似度很高决定了封装一个公用的echarts柱状图. 遇到的问题是markLine的平均值的显隐控制,没有找到api直接控制. 下面上原型图和网页图和代码结构原型图网页图代码结构组件的引用2.最后通过设置markerline的Data的透明度,解决了此问题.下面上解决
2021-05-08 10:04:37
1377
原创 高德地图marker配合vant ui库的popup弹出层,导致弹出层秒关闭的问题解决.
1.问题描述.在移动端使用高德地图和vant组件库的popup弹出层,导致弹出层秒关闭.功能不能实现.!、apply()、bind() 的用法
其实是一个很简单的东西，认真看十分钟就从一脸懵B 到完全 理解！先看明白下面：例 1obj.objAge; // 17obj.myFun() // 小张年龄 undefined比较一下这两者 this 的差别，第一个打印里面的 this 指向 obj，第二个this.age指向调用者,也就是obj,由于obj没有age字段所以提示undefined例 2shows() // 盲僧 第二个函数指向window1，call()、apply()、bind() 都是用来重定义 thi
2021-03-02 12:12:28
214
原创 防抖、节流、闭包,普通版本面试手写必备(网上的代码是比较完善的,工作中可以直接用,但是代码量也更多不好记,这个简单版本面试好使)
防抖函数(触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间)export function debounce(func, delay) { let timer = null; return function(...args) { if (timer) clearTimeout(timer); timer = setTimeout(() => { func.apply(this, args); }, delay);
2021-02-24 16:00:57
159
原创 解决token验证过期,返回登录页面,因为发送多次请求,导致消息多次提示的问题.
我们如果通过在axios响应拦截器中拦截状态码是否为401来提示反馈给用户登录过期消息那么将会弹窗多次,因为即使token过期了也还会发送多次请求,就会有多次401,就会弹窗多次.这时候我们可以通过过期的时候传递一个值存在localStorage中,然后进入登录界面在生命周期函数中,判断该值是否存在来判断是否是因为登录失效而返回的登录界面.如果是就提示用户登录失效,如果不是则不做任何操作....
2021-02-22 15:56:43
5497
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人