- 博客(56)
- 收藏
- 关注
原创 BUG解决(vue3+echart报错):Cannot read properties of undefined (reading ‘type‘)
这是 vue3+echart5 遇到的报错:Cannot read properties of undefined (reading ‘type‘)用于读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引起页面更新。当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能。作用:将一个由reactive生成的响应式对象转为普通对象。有些值不应被设置为响应式的,例如复杂的第三方类库等。作用:标记一个对象,使其永远不会再成为响应式对象。
2024-07-30 20:51:05
371
原创 【性能优化】在大批量数据下使用 HTML+CSS实现走马灯,防止页面卡顿(二)
上一篇只是简单演示了’下一张’的操作和整体的设计思路,这两天把剩余功能补全了,代码经过精简,可封装当成轮播组件使用,详细如下.
2024-07-22 09:56:10
1086
原创 前端加载,渲染十万条数据(性能优化)
子盒子C,信息展示的载体,里面是一定数量的单条展示信息盒子,子盒子C相对于父盒子A绝对定位,每次滚动时修改偏移量,保证信息显示在父盒子A的视口,不随滚动卷到其他地方。项目中某个弹窗展示设备信息卡片,返回的设备信息很多,页面样式有很花哨,导致渲染极其缓慢。子盒子B,用于模拟滚动条长度,高度设为单条展示信息盒子的高度×子盒子的数量。采用虚拟列表的方式,滚动时,dom元素数量不变,只改变展示的数据。//冻结数据,优化性能,//接收传入本组件的超大数据。//列表展示的开始索引。//列表展示的结束索引。
2024-06-03 15:24:42
447
原创 threejs的基本属性(三)
1.创建场景,摄像机,渲染器,几何体,材质,网格。场景.add(网格),网格加入场景中。相机的轨道控制器是个单独的对象。场景.add(坐标辅助器)渲染 = 场景+摄像机。网格 = 物体+材质。
2024-05-23 16:14:39
201
原创 使用 ResizeObserver解决页面尺寸变动,echarts或地图等自适应的一种方法(监听特定DOM元素尺寸变化)
项目中,页面做了响应式布局.大量使用了弹性布局,导致盒子没有固定的宽高,在菜单切换或者窗口缩放时,echarts或者地图元素就会出现扭曲,错版,填充不完全,溢出等问题.当通过监听window的resize事件时,难以精准捕捉目标容器,同时echarts的resize()方法并不一定达到效果。
2024-04-23 20:39:48
1354
原创 浏览器页面缩放导致弹性布局页面无限扩张的问题(overflow的妙用)
根据原型设计和需求文档,搭建如图项目框架(vite+vue3+js),主要页面使用弹性布局搭建.但是在反复缩放页面的情况下,main盒子出现越来越宽的情况,缩放次数越多,main盒子越宽,导致出现滚动条和页面被无限拉伸.
2024-04-01 17:46:58
557
原创 Error: Cannot find module ‘@rollup/rollup-win32-x64-msvc‘
新项目需要使用vite搭建一个v3项目,之前也弄过,但项目创建后却一直无法跑起来,大聪明的我一直没有注意到这个问题。
2024-03-27 21:03:28
2880
原创 vue3组合式api(一)
Vue 3 中引入了一个新的 Composition API,其中包含了 setup 函数,用于替代 Vue 2 中的 data、methods 等选项。setup 函数提供了更灵活和可组合的方式来组织组件的逻辑,并且更加符合函数式编程的思想它的执行比created还要早,在这里打印不了this,v3的项目几乎用不到this.setup是进入页面时自动触发而定一个函数。
2024-03-22 17:05:24
902
原创 filter过滤器
在 Vue.js 中,过滤器(Filters)是一种用来格式化和处理模板中显示的数据的技术。过滤器可以用在两个地方:双花括号插值表达式(Mustache 插值)和 v-bind 表达式中。过滤器通过在双花括号插值表达式中使用管道符 | 的方式来应用。myFilter是一个过滤器的名字,用于将 message 的值转为大写后显示在页面上。Vue.js 会自动将 message 的值作为过滤器的第一个参数传入过滤器函数中。也可以传递参数给过滤器,多个参数之间使用 | 分隔。
2024-03-21 16:58:00
210
原创 threejs简单创建一个几何体(一)
拖动网页,刷新后画布尺寸发生变化,再次拖动窗口,会出现空白。这样创建的几何模型是纯色的方块,效果如上图。这一步将前面的设置全部加入到画布中。// 设置摄像机z轴的空间的位置。// 设置几何体的材质(纯色)// 将网格对象添加到场景中去。// 把渲染器添加到页面中去。// 设置几何体皮肤(贴图)// 设置渲染器场景的大小。// 给网格对象添加动画。// 4.创建几何模型。// 2.创建摄像机。// 3.创建渲染器。
2024-03-14 16:29:12
355
原创 vue插槽的基本使用
在Vue.js中,可以通过使用默认插槽来在组件中插入内容。默认插槽允许你在父组件中传递任意内容给子组件,并在子组件中使用这些内容。如果在子组件中的slot中写内容,则为默认内容,父组件未插入值的情况下显示,插入则被覆盖。在父组件页面的子组件标签中插入值,需要用template标签,v-slot:""指定这段内容是插入哪个插槽的。作用域插槽可以从子组件传递数据到父组件,写一个表格的例子。通过子组件的slot标签将子页面的数据传递到父组件。/* 设置细线边框的颜色和宽度 *//* 设置表头的背景颜色 */
2024-03-13 16:14:15
817
原创 xlsx.js读取本地文件,按行转成数组数据
/读取文件内容,并以二进制字符串的形式传递给 reader.onload 的回调函数进行处理。//遍历工作表的名称(workbook.SheetNames)并获取每个工作表的数据。//通过 workbook.Sheets[sheetName],获取到具体工作表的数据。//这里我们将 type 设置为 'binary',以二进制字符串的形式读取文件。//通过 event.target.files 获取到选择的文件。//通过循环遍历每一行数据),将每一行的数据打印出来。//将工作表的数据转换为数组形式。
2024-03-11 17:00:34
499
原创 vue项目通过nginx部署到服务器
当你在开发环境中运行 Vue 项目时,devServer 的代理配置允许你将特定的请求代理到后端服务器,以便在开发过程中模拟生产环境中的 API 请求。但是,一旦你将 Vue 项目部署到 Nginx 中,Nginx 将成为前端和后端之间的统一入口,所有的请求都将由 Nginx 接收并处理。因此,如果你的 Vue 项目中有依赖于代理的请求,你需要在 Nginx 配置中设置适当的代理规则,以确保这些请求被正确路由到后端服务器。部署的服务器是阿里云买的,使用finalShell根据账号秘密链接服务器即可。
2024-03-08 15:19:46
672
原创 简单整理vue-router,路由知识
在实际使用中,通过 path 传递参数时,并不能直接在目标页面的组件中通过 $route.params 获取到参数值,因为 path 传递参数是基于路由配置中动态参数的匹配,而非通过 params 属性传递参数。在main.js中 书写,会造成单个js文件过于臃肿的情况,需要将路由配置部分抽离出来,在src下新建router文件夹,新建index.js文件。2.全局解析守卫(beforeResolve):在路由被解析之后,组件被激活之前调用,可以用来做一些全局的前置操作。
2024-03-06 17:33:22
542
原创 vscode代码片段设置,一键生成预编代码
在vue文件中输入你的指令接回车,即可出现保存的代码片段。选择新代码片段,在这里给你的代码片段文件取个名字。选择新代码片段,也可在现有代码片段上增加。点击左下角落设置按钮。
2024-02-28 14:54:21
231
原创 websocket实现一个局域网在线摸鱼聊天室
第一个前端项目,搭建聊天室页面,同时使用Websocket API,与服务端进行通信。第二个项目,使用node环境,下载ws包,搭建服务。// 为WebSocket添加事件监听。'websocket连接建立完毕'// 生成WebSocket对象。
2024-02-27 15:22:53
1141
2
原创 奇怪的需求之与图片做交互
2.观察点击事件传入的参数,e.target.clientWidth和e.target.clientHeight是图片被点击时的宽和高,同时存在e.offsetX和e.offsetY,代表鼠标点击位置相较于点击对象的偏移值.3.由已知条件可知:点击事件发生时鼠标在X方向的偏移值与图片元素此时的宽度的比值是固定的,同理Y方向的偏移值和图片元素此时的高度之比也是固定的.通过这两个比值的范围,可以粗略判断当前点击位置是否在图片对应的位置上。// 判断滚轮是上滚还是下滚,对应的进行放大缩小操作。
2024-02-22 14:34:34
1675
原创 vue2中几种组件传值方法
父组件在子组件标签中传入fatherMess,在子组件使用$emit,约定子传父事件名,将子组件的数据传递到父组件.通过按钮修改,可以发现,这里的传值是响应式的 1.在父组件中给子组件标签添加属性 2.在子组件中使用props接受数据 3.子组件中使用数据,可以直接访问。
2024-02-21 17:16:37
1013
原创 openlayers地图点击标记点,弹出当前位置自定义弹窗(三)
1. 效果图2. 代码<template> <div class="container"> <div id="map" style='width: 100%; height: 100%;border: 5px solid #a4cdff;'> <div class="toolBox"> <div class="messageBox" v-show="isShow"> <di
2024-02-19 16:38:54
1767
原创 页面切换导致echarts不加载的问题
在A页面写了echarts,初始化dom元素加载,显示正常.当切换到B页,再切换回B页面时,echarts加载不出来.f12召唤出来看看报错,没有问题,但是有这样的警告渲染echarts的dom元素上多了一个""的属性,这是用来表示唯一性的.
2024-01-31 17:12:22
591
原创 js中数组的常用处理方法
如果 a 等于 b,则返回 0。filter 方法接受一个回调函数作为参数,并对数组中的每个元素调用该回调函数。回调函数会对数组中的每个元素进行调用,并传入三个参数:当前元素、当前索引和整个数组。回调函数会对数组中的每个元素进行调用,并传入三个参数:当前元素、当前索引和整个数组。回调函数会对数组中的每个元素进行调用,并传入三个参数:当前元素、当前索引和整个数组。Array.from 方法接受两个参数:第一个参数是要被转换为数组的对象,第二个参数是一个可选的映射函数,用于对数组中的每个元素进行转换。
2024-01-31 11:34:53
723
原创 js动态参数与剩余参数
动态参数指的是在函数或方法中,可以接收不定数量的参数,并将其作为一个数组或类似数组对象进行处理。这样可以方便地处理不确定数量的输入数据。1.arguments功能是动态获取函数的实参 2.arguments是动态参数,只存在于函数里面 3.得到的arguments是一个伪数组 4.argument在使用时,不需要写在形参位置,应为它是函数内部内置的伪数组变量 5.箭头函数中没有arguments。
2024-01-26 16:53:42
319
原创 nodejs写接口实现图片上传回显(三)
(1)页面用formData上传图片文件(2)接口配置multer中间件,解析存储图片文件(3)接口返回图片地址,回显。
2024-01-25 16:35:32
662
原创 SpeechSynthesis实现页面内容语音播报
不同的浏览器可能会在支持的语音合成引擎、可用语音列表和不同语音的声音质量方面有所差异。具体的支持情况和可用语音列表可以通过speechSynthesis.getVoices()方法获取。Mozilla Firefox:支持SpeechSynthesis API的所有版本。Microsoft Edge:支持SpeechSynthesis API的所有版本。Google Chrome:支持SpeechSynthesis API的所有版本。
2024-01-23 22:16:28
1230
原创 前端使用nodejs写一个get请求接口(一)
可以使用参数、中间件和处理函数来处理请求,并根据不同的 URL 和请求方法返回相应的响应。Express 是一个流行的 Node.js Web 应用程序框架,用于构建前后端分离的 Web 应用程序和 API。可以使用现有的中间件(如日志记录、静态文件服务、解析请求体等)或编写自己的中间件来处理特定的需求。:Express 具有内置的错误处理机制,可以捕获和处理应用程序中的错误。:Express 提供了一些安全性措施(如 CSRF 保护、防止常见的 Web 攻击等),帮助开发者提高应用程序的安全性。
2024-01-22 14:38:54
758
原创 节流和防抖的思想
防抖是一种用于控制函数执行频率的优化技术。它通过延迟函数的执行时间,直到一段连续的触发事件停止后的指定时间间隔,从而减少函数的执行次数。防抖可以用于减少频繁触发的事件中函数的执行次数,从而提高性能和响应速度。节流是一种用于控制函数执行频率的优化技术。它通过限制函数的调用速率,以便在高频率事件中减少函数的执行次数。节流可以使函数在一定的时间间隔内最多只执行一次,从而减轻计算量和提高性能。
2024-01-18 17:28:36
415
2
原创 深浅拷贝几种常用的方法
浅拷贝是创建一个新对象,然后将原对象的属性值复制给新对象。如果属性值是引用类型(例如数组、对象、函数等),则复制的是引用,即新对象和原对象将引用同一块内存。因此,修改新对象的属性值可能会影响原对象。它将原始数组与传入的参数数组连接起来,按照参数数组的顺序排列。Object调用assign静态方法后,将第二个参数传入的对象复制到第一个参数,也就是新的对象.同时静态方法调用后返回的也是复制产生的新对象。深拷贝和浅拷贝是对象拷贝操作中的两个概念。
2024-01-17 17:04:38
566
原创 使用md5js包对数据进行简单加密
MD5是一种哈希算法,而不是一种加密算法。哈希算法是不可逆的,这意味着无法将哈希值逆向还原为原始数据。因此,MD5是无法被解密的。MD5通常用于数据完整性校验和密码存储,而不是用于加密和解密敏感数据。当存储密码时,我们通常会计算密码的MD5哈希值,并将哈希值保存在数据库中。当用户输入密码时,我们再次计算其MD5哈希值,并将其与数据库中保存的哈希值进行比较,用于验证密码的正确性。
2024-01-17 14:52:46
501
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人