web前端
文章平均质量分 56
冲动消费
这个作者很懒,什么都没留下…
展开
-
element图片预览添加下载图片功能.
大图预览element原创 2022-11-15 16:23:03 · 2527 阅读 · 1 评论 -
position: fixed;设置吸底按钮.挡住内容,问题解决办法
我们常常会有这种需求,提交按钮始终保持在手机底部。通过position: fixed搭配父盒子padding-bottom就可以做出完美的按钮吸底效果了。如果不加padding-bottom容易挡住内容的部分。原创 2022-09-06 10:15:09 · 1353 阅读 · 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 · 1674 阅读 · 2 评论 -
vue预览本地pdf文件.
预览pdf原创 2022-02-25 17:35:35 · 4166 阅读 · 4 评论 -
vue对比两段json文本修改,修改的项添加红色高亮显示
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录需求一、实现思路二、实现步骤1.数据格式2.代码部分3.html渲染部分代码4.完成结果总结需求用户需求是记录项目各项操作的日志,并且显示给用户,并且把有修改的值给用户高亮显示,如图所示一、实现思路因为返回的json的字段的属性是固定的,可以通过逐个比较更新前,后的转义后json串,如果某个属性的值不相同,就给该属性的值加上color样式 然后通过v-html渲染.二、实现步骤1.数据格式更新后的数据更新前的老数原创 2021-11-08 11:55:35 · 3901 阅读 · 3 评论 -
swiper大屏文件预览图片和视频,视频切换时暂停视频.
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录需求一、遇到问题?二、渲染图片和视频1.首先判断附件是否是视频文件和图片文件,如果不是就显示附件不支持预览2.html代码部分解决切换视频时候暂停的问题2.通过监听swipier的切换回调函数配合动态ref 来获取dom,并且判断dom是否是视频 如果是视频调用video的原生api 暂停视频需求要求做附件预览,可以预览图片文件和视频文件。一、遇到问题?视频文件一旦播放切换swiper轮播图到下一张,上一个的视频还是会保持原创 2021-11-03 11:58:38 · 1310 阅读 · 0 评论 -
对浏览器事件循环宏任务和微任务的理解
文章目录前言一、微任务二、宏任务三.代码实战理解四、视频链接总结前言事件循环JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为,防止主线程的不阻塞,Event Loop 的方案应用而生。Event Loop 包含两类:一类是基于 Browsing Context,一种是基于 Worker。二者的运行是独立的,也就是说,每一个 JavaScript 运行的"线程环境"都有一个独立的 Event Loop,每一个 W原创 2021-09-08 09:03:11 · 565 阅读 · 0 评论 -
vue组件深度传值provide、inject,值类型响应式的方法
文章目录前言一、provide,inject是什么?二、使用步骤1.祖先组件provide注入,并且传入的是整个this指向2.后代组件接收总结前言最近封装了一个上传,下载,查看附件的组件,其中有三层层级关系,需要深层次传值,一开始用props组件传值,但是要传两层感觉有点不优雅.后面上面查了vue的provide,inject方法,但是因为是传的值类型不能响应式,后面想到了一个方法可以响应式//提示:以下是本篇文章正文内容,下面案例可供参考一、provide,inject是什么?通常,当我们原创 2021-08-26 10:48:46 · 2163 阅读 · 0 评论 -
vue/cli4,配置test测试环境,并通过全局控制变量管理地址
文章目录前言一、创建.env.test文件二、在packge.json中创建一个打包模式test三、修改vue.config.js配置四、运行测试环境五、完成效果5.1测试环境5.2开发环境六、注意事项总结前言由于公司项目较小,所以项目的管理比较随意,之前都是直接通过本地打包npm run build 打包后的文件发送给测试就测,最近对接一个单点登录,需要配置回调地址,地址的格式是本地的端口,这就造成了需要配置三个地址,我的本地(开发用),测试本地(测试用),服务器线上(正式环境)。然后每次打包给测试原创 2021-08-09 13:51:53 · 907 阅读 · 2 评论 -
vant Tabbar底部导航访问二级也没,返回.tabbar的索引始终显示首页. 与界面不对应的问题
1.用vant的tabbar组件,做底部导航,在二级页面返回到一级页面底部导航索引不对应下面上图,点击返回后应该高亮我的上报最开始的做法是用vmodel配合change事件 来进行 控制.贴代码(坑的要死千万不要用这个方式,后面想了很多办法,不如监听,计算属性,本地存储) 都没能完全解决2.解决方法是,切换route模式.切换后一行js代码都不需要 完美解决问题自闭好久,仔细百度了下,在看了看api解决了这个坑. 发个帖记录一下.贴代码...原创 2021-05-13 11:00:26 · 1691 阅读 · 4 评论 -
高德地图marker配合vant ui库的popup弹出层,导致弹出层秒关闭的问题解决.
1.问题描述.在移动端使用高德地图和vant组件库的popup弹出层,导致弹出层秒关闭.功能不能实现.!![在这里插入图片描述](https://img-blog.csdnimg.cn/20210428134533210.gif2. 经过排查代码,发现是在点击遮罩层外部的maker时,触发了遮罩层的点击事件.然后因为popup默认是点击遮罩层关闭弹出层.点击的一瞬间触发了遮罩层的点击事件,导致弹出层关闭3.解决办法最终我通过不启用遮罩层,并且在地图的点击回调函数中,将控制弹出层的变量变为f原创 2021-04-28 14:00:34 · 1338 阅读 · 1 评论 -
JavaScript 中 call()、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 · 217 阅读 · 0 评论 -
解决token验证过期,返回登录页面,因为发送多次请求,导致消息多次提示的问题.
我们如果通过在axios响应拦截器中拦截状态码是否为401来提示反馈给用户登录过期消息那么将会弹窗多次,因为即使token过期了也还会发送多次请求,就会有多次401,就会弹窗多次.这时候我们可以通过过期的时候传递一个值存在localStorage中,然后进入登录界面在生命周期函数中,判断该值是否存在来判断是否是因为登录失效而返回的登录界面.如果是就提示用户登录失效,如果不是则不做任何操作....原创 2021-02-22 15:56:43 · 5563 阅读 · 4 评论