![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue知识分享
文章平均质量分 90
Vue知识分享
林恒smileZAZ
这个作者很懒,什么都没留下…
展开
-
限时10分钟,你会怎么实现这段async/await代码?
async/await是一种以更舒服的方式使用promise的特殊语法,让异步逻辑更加简洁可读,避免promise的链式写法。Generator:译为生成器,是ECMAScript 6新增的一个极为灵活的结构,拥有在一个函数块内暂停和恢复代码执行的能力;yield 1;yield 2;yield 3;声明生成器函数需要使用function* 函数名()语法,其实function函数名()也可以,因为是函数的特殊语法,所以建议使用前者靠近function的写法。原创 2024-07-26 17:59:38 · 525 阅读 · 0 评论 -
你还以为前端无法操作文件吗
编辑文件保存文件原创 2024-07-25 17:27:47 · 210 阅读 · 0 评论 -
记录--进度条真的是匀速的,不信你看
1.设置鼠标旋转事件if(!let X = 0;let Y = 0;} else {} else {2.设置主视图和45度视图这个项目是为了熟悉3d变换,在使用translateZ、translateX想了很久,脑子不够用了。还有很多地方可以调整为配置项,设置块数,块颜色等,甚至封装成api,下次一定。本文转载于:https://juejin.cn/post/7370682158103347238如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。转载 2024-07-22 18:17:41 · 14 阅读 · 0 评论 -
记录--如何修改第三方npm包?
在开发过程中发现npm包的Bug,首先向原作者提交issue或Fork代码修改后提交合并请求。但遇到不活跃或拒绝修改的情况,项目等待时间会很长。这时可以使用补丁方案或换日方案进行解决。补丁方案中,如果是npm或yarn v1,可以使用patch-package工具包处理;如果是yarn v2或pnpm,可以使用各自的patch命令。换日方案,则是修改源码,发布新的npm包后,利用pnpm的别名功能,将所有依赖原npm包的地方,全部替换为新的包。转载 2024-07-18 17:27:22 · 36 阅读 · 1 评论 -
记录---实现抖音 “视频无限滑动“效果
在家没事的时候刷抖音玩,抖音首页的视频怎么刷也刷不完,经常不知不觉的一刷就到半夜了😅不禁感叹道 "垃圾抖音,费我时间,毁我青春😅"virtualTotal:页面中同时存在多少个 SlideItem,默认为 5。//页面中同时存在多少个SlideItem},设置这个值可以让外部组件使用时传入,毕竟每个人的需求不同,有的要求同时存在 10 条,有的要求同时存在 5 条即可。不过同时存在的数量越大,使用体验就越好,即使用户快速滑动,我们依然有时间处理。原创 2024-07-13 17:02:23 · 799 阅读 · 0 评论 -
记录--淘宝、京东复制好友链接弹出商品详情是如何实现的
最近接到了一个需求很有意思,类似于我们经常在逛购物平台中,选择一个物品分享给好友,然后好友复制这段文本打开相对应的平台以后,就可以弹出链接上的物品。实现过程也比较有意思,特来分享一下实现思路🎁。转载 2024-07-04 18:25:48 · 21 阅读 · 0 评论 -
前端如何优雅的添加水印及去除水印
在最近接手的一个项目中,需要对整个页面加上一个水印,还需要动态修改增加背景色功能。由于使用的第三方库不支持背景色功能,故记录一下。文末会附上如何利用技术手段去除水印。原创 2024-07-03 17:24:20 · 767 阅读 · 0 评论 -
记录---实现一个支持@的输入框
在选择的用户或者内容发生改变时将数据抛给父组件/** @的用户列表发生改变时,将最新值暴露给父组件 */转载 2024-06-28 19:22:18 · 35 阅读 · 0 评论 -
记录--vue3中使用Swiper组件
请注意,如果您传递这些参数而不指定其元素(例如,没有 navigation.nextEl、pagination.el 等),Swiper Vue 组件将为导航、分页和滚动条创建所需的元素。默认情况下,Swiper Vue 使用 Swiper 的核心版本(没有任何附加模块)。如果要使用Navigation、Pagination等模块,必须先安装它们.// 引入swiper样式,对应css 如果使用less或者css只需要把scss改为对应的即可。要使用效果,您必须首先导入并安装它们(与所有其他模块一样)。转载 2024-06-26 17:39:03 · 33 阅读 · 0 评论 -
vue如何实时展示海康威视摄像头多画面?
rtsp流地址就是rtsp://用户名:密码@192.168.1.212:554/Streaming/Channels/101。RTSP流地址正确且取流成功,VLC的界面会显示监控画面。否则会报错,报错信息写在了日志里,在[工具]>[消息]里可以看到。rtsp://用户名:密码@IP:554/Streaming/Channels/101 用户名和密码。IP就是登陆摄像头时候的IP 在浏览器直接输入192.168.1.212回车可打开该摄像头的登录页。1.2调整视频编码为H.264。【知识储备和驱动安装】原创 2024-06-25 18:31:47 · 695 阅读 · 2 评论 -
记录--单页面首屏优化,打包后大小减少64M,加载速度快了13.6秒
大小、请求数、加载时间都大大减少注意优化后的时间chunk-vendors.js和app.js加载一共耗时1.59s,不是1.11+1.59,chunk-vendors的下载解析会阻塞app.js的下载解析,所以一共1.59s。前:本文转载于:https://juejin.cn/post/7359077652445806642如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。转载 2024-06-20 18:51:51 · 32 阅读 · 0 评论 -
记录--Vue 网页全屏
在后台系统中有一种常见的功能,点击按钮将整个网页全屏,再点击退出全屏。浏览器提供了2种全屏方式,一种通过API在js中实现,另一种是按F11键进入全屏模式。但F11进入的全屏模式优先级更高,无法通过API退出。转载 2024-06-13 19:12:28 · 68 阅读 · 0 评论 -
记录--前端实现文件预览(word、excel、pdf、ppt、xmind、 音视频、图片、文本) 国际化
在这之前公司项目的文档预览的方式都是通过微软在线预览服务,但是微软的在线服务有文件大小限制,想完整使用得花钱,一些图片文件就通过组件库antd实现,因为我们项目存在多种类型的文件,所以为了改善用户的体验,决定把文件预览单独弄一个拆出一个项目出来,我们先看一下最终预览效果。如果这些基础的文档渲染render组件,不符合业务需求,你也可以自定义render组件在你自己的项目中,然后跟随pluginsRenders传入即可return (转载 2024-06-12 19:10:45 · 221 阅读 · 0 评论 -
说说webpack的热更新是如何做到的?原理是什么?
通过webpack-dev-server创建两个服务器:提供静态资源的服务(express)和Socket服务express server 负责直接提供静态资源的服务(打包后的资源直接被浏览器请求和解析)socket server 是一个 websocket 的长连接,双方可以通信当 socket server 监听到对应的模块发生变化时,会生成两个文件.json(manifest文件)和.js文(update chunk)原创 2024-05-24 19:10:20 · 962 阅读 · 0 评论 -
说说webpack proxy工作原理?为什么能解决跨域?
在开发阶段, webpack-dev-server 会启动一个本地开发服务器,所以我们的应用在开发阶段是独立运行在 localhost的一个端口上,而后端服务又是运行在另外一个地址上。在开发阶段,本地地址为http://localhost:3000,该浏览器发送一个前缀带有/api标识的请求到服务端获取数据,但响应这个请求的服务器只是将请求转发到另一台服务器中。devServetr里面proxy则是关于代理的配置,该属性为对象的形式,对象中每一个属性就是一个代理的规则匹配。原创 2024-05-15 18:06:06 · 637 阅读 · 0 评论 -
你是怎么处理vue项目中的错误的?
另外,如果任何被覆盖的钩子或处理函数返回一个 Promise 链 (例如 async 函数),则来自其 Promise 链的错误也会被处理。从 2.2.0 起,这个钩子也会捕获组件生命周期钩子里的错误。同样的,当这个钩子是 undefined 时,被捕获的错误会通过 console.error 输出而避免应用崩。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。在Vue 中,则是定义了一套对应的错误处理规则给到使用者,且在源代码级别,对部分必要的过程做了一定的错误处理。原创 2024-05-14 19:28:13 · 776 阅读 · 0 评论 -
vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?
如果路由很多,可以在应用初始化的时候,只挂载不需要权限控制的路由。取得后端返回的菜单后,根据菜单与路由的对应关系,筛选出可访问的路由,通过addRoutes动态挂载。每次路由跳转的时候都要判断权限,这里的判断也很简单,因为菜单的name与路由的name是一一对应的,而后端返回的菜单就已经是经过权限过滤的。登录后,获取用户的权限信息,然后筛选有权限访问的路由,在全局路由守卫里进行调用addRoutes添加路由。如果有嵌套路由,后端功能设计的时候,要注意添加相应的字段,前端拿到数据也要做相应的处理。原创 2024-05-13 18:36:09 · 1211 阅读 · 2 评论 -
Vue项目中有封装过axios吗?主要是封装哪方面的?
基于 XMLHttpRequest 服务来执行 HTTP 请求,支持丰富的配置,支持 Promise,支持浏览器端和 Node.js 端。大部分情况下,请求头都是固定的,只有少部分情况下,会需要一些特殊的请求头,这里将普适性的请求头作为基础配置。不过随着项目规模增大,如果每发起一次HTTP请求,就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作,都需要写一遍。封装的同时,你需要和 后端协商好一些约定,请求头,状态码,请求超时时间…原创 2024-05-11 18:28:48 · 909 阅读 · 0 评论 -
你是怎么理解ES6中 Promise的?使用场景?
Promise,译为承诺,是异步编程的一种解决方案,比传统的解决方案(回调函数)更加合理和更加强大在以往我们如果处理多层异步操作,我们往往会像下面那样编写我们的代码console.log('得到最终结果: ' + finalResult);阅读上面代码,是不是很难受,上述形成了经典的回调地狱现在通过Promise的改写上面的代码})})console.log('得到最终结果: ' + finalResult);})链式操作减低了编码难度代码可读性明显增强。原创 2024-04-30 17:40:48 · 987 阅读 · 0 评论 -
在vue2中,什么是双向绑定,为什么vue3要进行优化?
我们先从单向绑定切入单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新双向绑定就很容易联想到了,在单向绑定的基础上,用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定举个栗子当用户填写表单时,View的状态就被更新了,如果此时可以自动更新Model的状态,那就相当于我们把Model和View做了双向绑定关系图如下Object.defineProperty只能遍历对象属性进行劫持return})原创 2024-04-29 18:13:15 · 978 阅读 · 0 评论