章若楠圈外男友-CSDN博客

原创 Vue3 + Vite根据接口返回的信息动态引用组件

glob 导入的组件需要通过 .then 方法拿到使用，因为 .then 是异步的，所以我这里使用了async 和await 来等待 .then方法执行完毕，确保页面加载完成时动态导入的组件能够在页面上正常显示。在开发的时候遇到了一个问题，导入多个组件的时候最后一个组件不能正常显示，推测应该还是异步导致的问题，页面渲染完毕之后，触发重绘就能正常显示，我的解决方式是改变页面元素的坐标导致其进行重绘，从而绕过这个问题。作为构建工具时，在本地使用这种导入方式是没有问题，在。

2024-04-28 15:01:14 389 3

原创 Echarts图响应容器大小的变化

创建了一个 ResizeObserver 对象，在被观察的元素大小变化时执行指定的回调函数。比如，图表容器是一个高度为 400px、宽度为页面 100% 的节点，你希望在浏览器宽度改变的时候，始终保持图表宽度是页面的 100%。将 ResizeObserver 对象绑定到 maine 元素上，以便观察其大小变化。有时候我们可能会通过 JS 或 CSS 调整容器大小，由于页面大小并未发生改变，因此。在有些场景下，我们希望当容器大小改变时，图表的大小也相应地改变。事件获取浏览器大小改变的事件，然后调用。

2024-04-16 10:11:04 295

原创 VUE中使用requestFullscreen实现全屏展示

这个方法实现的全屏可以按下ESC键退出全屏模式，如果想在退出全屏模式时进行一些处理，我这里监听了 fullscreenchange。函数实现的功能就是控制页面全屏，如果想在点击某个按钮时进入全屏模式，只需要在按钮的点击事件中调用。它首先获取到文档根元素 document.documentElement。事件，当页面的全屏状态发生变化时，触发回调函数。在回调函数中进行相关处理。方法请求将页面切换到全屏模式。其中的 if 判断可以去掉。

2024-04-16 09:08:56 609

原创 Vue3 根据接口返回的信息动态引用组件

我在开发的时候发现，后端只返回了4条数据，应该只展示4个组件，但是这个4个组件一直在重复渲染导致内存溢出，后来发现是后端加数据的时候把主页面当作组件引用了，就导致了主页面引用了主页面，主页面又引用主页面。所以平时开发的时候，可能不一定是代码有问题，也可能是数据有问题，有时候解决不了的bug可以尝试换一些数据测试。我的需求是要实现缩放和拖拽，并且页面上会有很多组件，所以我使用了。后面的路径根据自己项目的路径，以及接口返回的数据进行调整。来实现拖拽和缩放功能，并把接口返回的数据存在。方法来动态引入组件。

2024-03-21 10:51:40 358 1

原创 Vite项目打包后打开html后页面空白并报错Access to script at ‘file:///G:/ceshi/%E8%A3%85%E5%A4%87/charts-vue/Ec

注释掉这些预加载标签并不会影响页面展示和功能的使用，因为这些模块资源仍然可以通过其他方式被加载和使用，比如通过 JavaScript 动态加载或者在其他地方引入。页面的展示和功能依赖于模块资源的正确加载和执行，而不一定依赖于预加载标签的存在。也就是说vite 默认使用 ES Module 模块是不支持file协议的，所以需要使用插件来进行配置，才可以正常使用file协议打开。标签的作用是为了告诉浏览器在解析 HTML 和执行 JavaScript 之前预加载指定的模块资源，以提高页面加载速度和性能。

2024-03-13 15:37:58 1543

原创 vue3项目中使用Echarts图表的dataZoom实现动态展示数据时报错：Cannot read properties of undefined (reading ‘type‘)

在使用Echarts图时，遇到数据量过多，x轴展示不下的问题，可以使用dataZoom实现动态展示。

2024-03-12 18:59:50 349 1

原创 element plus中tree组件选中、悬停背景颜色和字体颜色设置

如果项目中使用了scss、less，以上代码可能不生效，遇到这种情况则需要再加一个<style>标签来写这部分css样式。

2024-03-11 09:23:25 833 1

原创 json-server模拟数据

使用nvm list available命令查看可用的node版本，使用nvm install <版本号>进行下载，使用nvm use <版本号>使用刚才下载的版本即可。可以使用 nvm node_mirror https://nodejs.org/dist/ 命令将 nvm 源更改为官方源（Node.js 官方源），再执行其它命令。可以看到它要求的node版本必须大于等于18，所有我们需要升级一下node版本，就可以正常启动服务。扩展: 修改启动命令。

2024-03-09 15:17:53 367

原创 Element UI 双层弹窗背景变灰问题（遮罩层）

只需要在第二个Dialog上加上append-to-body属性就可以完美解决问题。第二个弹窗不会被灰色遮罩遮盖。

2024-02-22 11:01:50 540 1

原创 Object.assign修改原对象属性值的问题

如图所示，使用 Object.assign 合并了 obj1 和 obj2 之后，obj1 里面 like 的值被 obj2 替换了。使用 lodash-es 库的 cloneDeep 对 obj1 进行深拷贝，然后用深拷贝的数据进行合并，这样就不会影响 obj1。

2024-01-10 14:53:29 435

原创 vue3实现监听浏览器窗口切换

表示在页面从隐藏状态变为可见状态，想要在该窗口被隐藏时进入 if 判断触发事件可以将 visible 替换为。

2023-12-28 18:27:49 637 1

原创 console.log打印对象的属性，外层与展开的属性值不一致问题

还有一种说法是，当在打印一个对象的时候，由于对象中的值是引用的内存中的值，所以就会存在当打印对象的时候，当引用到对象中的值的时候，对象中的值已经发生变化了。但是，这段代码运行的时候，浏览器可能会认为需要把控制台I/O 延迟到后台，在这种情况下，等到浏览器控制台输出对象内容时，所以如果在调试的过程中遇到对象在console.log(..) 语句之后被修改，可你却看到了意料之外的结果，要意识到这可能是这种I/O 的异步化造成的。首先，JS中对象是引用类型，每次使用对象时，都只是使用了对象在堆中的引用。

2023-12-25 10:11:18 1362

原创如何利用ps修改图片中的文字

如果要调整输入的文字之间的距离，可以选中当前文字图层，Ctrl+A全选文字，按Alt+→右方向键即可调大文字间距。双击图层中的T部位--单击顶部文字颜色工具--可以用吸管吸取图片上的颜色，新的颜色确定好之后点确定。单击工具栏文字工具--单击需要增加文字的地方--输入文字（此时文字显示不出来，与背景色一样）单击工具栏中的吸管工具--单击所选区域的背景，吸取颜色，颜色会显示在设置前景色的位置。直接拖拽图片到PS，或者点击右上角文件--打开--选择图片。文件--存储为---psd格式，放在桌面（减少卡顿）

2023-12-20 15:08:49 966 1

qq_57229245的博客