- 博客(52)
- 收藏
- 关注
RSS订阅
原创 Vue 3 的 Teleport 组件实现跨层级通信
组件可以让你将一个组件的 HTML 结构"传送"到 DOM 树的其他位置,从而打破组件的边界限制,实现跨层级的通信和交互。你可能已经熟悉了组件的基本概念:每个组件都是一个独立的单元,拥有自己的模板、样式和逻辑。组件是 Vue 3 中一个非常强大的功能,它可以帮助我们解决一些常见的跨层级通信和UI定位问题。如果你的项目中需要使用模态框、下拉菜单或类似的特殊UI组件,可以使用。这意味着,即使模态框在组件树的深层嵌套中,它的 HTML 结构也会被"传送"到。的父元素中,它可能会受到父元素的影响而无法正确定位。
2024-06-18 11:09:14
1035
3
原创 cesium如何飞到指定层级
那么飞到指定层级首先获取当前相机位置 拿到经纬度。下方代码是cesium中视角高度转层级的代码。之后反转上方的代码 根据层级获取视角高度。根据获取的高度 调用flyTo方法。
2024-08-01 17:07:58
495
原创 JavaScript 监听 localStorage 的变化
如果你需要在同一个页面上监听 localStorage 的变化,可以使用自定义事件的方式。// 更新 localStorage// 监听 localStorage 更新${// 更新 localStorage function updateLocalStorage(key , value) {detail : {
2024-08-01 16:59:42
533
原创 JavaScript中 Map与reduce的应用
构造函数创建一个新Map对象，它允许你以键值对的形式存储数据，提供了一种更加灵活的数据结构。与传统的对象相比，Map允许任何值（包括对象）作为键，而且具有更好的性能表现。初始值（本例中的0）是可选的第二个参数，用于初始化累积器的值。方法则是另一种强大工具，它能将数组元素累积到一个单一的值。比如，从一组对象中提取特定属性的值，然后合并成一个新的对象。不仅完成了数据的聚合，还实现了数据结构的转换，展示了其灵活性和强大功能。，对每个元素应用一个函数（在此例中是平方操作），并将结果收集到新数组。
2024-06-20 16:18:10
459
原创 CSS3中鲜为人知但非常强大的 Clip-Path 属性
在CSS3中,`clip-path`属性可以让我们快速创建各种各样的不规则图形,而无需使用图片或者复杂的绘图工具。它可以帮助我们实现一些非常出色的视觉效果,但遗憾的是它并不是很常见。`clip-path`属性可以接受多种不同的值,比如`polygon()`、`circle()`、`ellipse()`以及`inset()`等。
2024-06-20 11:07:22
313
原创 CSS 变量的优势
CSS 变量,也称为自定义属性(Custom Properties),允许我们在 CSS 中定义可重用的值。它们以--开头,可以在整个文档中使用。:root {.button {.text {在这个例子中,我们在:root和。然后在.button和.text类中使用var()函数引用这些变量。
2024-06-19 11:29:15
452
原创 CSS 属性 `mix-blend-mode`
是 CSS 中的一个混合模式属性,它允许我们控制元素如何与其背景进行颜色混合。换句话说,它可以让元素与其所在的背景产生各种有趣的视觉效果。: 将文字与背景进行混合,可以创造出各种炫酷的文字特效,如发光、镂空、彩色阴影等。: 将图像与背景进行混合,可以实现各种图像合成效果,如双重曝光、逼真的光影效果等。在日常的 Web 开发中,我们大多时候都会使用一些常见的 CSS 属性,比如。可以增加视觉上的层次感和动态感,营造出更加高级和富有艺术感的风格。两种混合模式,与渐变背景进行颜色混合,产生了不同的视觉效果。
2024-06-19 11:27:56
532
原创 联合类型和交叉类型
联合类型和交叉类型在TypeScript中,除了基本的类型(如numberstringboolean等),我们还可以使用更加高级的类型来描述复杂的数据结构。其中,联合类型和交叉类型就是两个非常有用的高级类型。
2024-06-18 11:20:50
372
原创 Canvas实现画板
/ 使用橡皮擦大小为 20x20 的矩形来清除画布上的内容。// 获取 Canvas 元素和上下文。Canvas如何实现画板功能。// 上一个点的 X 坐标。// 上一个点的 Y 坐标。// 监听鼠标离开画布事件。// 监听清除按钮点击事件。// 监听触摸屏按下事件。// 监听触摸屏移动事件。// 监听触摸屏松开事件。// 设置画笔初始状态。// 监听鼠标按下事件。// 监听鼠标移动事件。// 监听鼠标松开事件。// 绘制线条或擦除。
2024-05-08 16:38:56
781
原创 JavaScript中的数组方法
功能：检查数组中的所有元素是否满足指定条件，如果所有元素都满足条件则返回true，否则返回false。功能：检查数组中是否存在满足指定条件的元素，如果存在则返回true，否则返回false。功能：检查数组中是否包含指定的元素，如果包含则返回true，否则返回false。功能：返回数组中第一个满足指定条件的元素的索引，如果不存在则返回-1。功能：在数组的末尾添加一个或多个元素，并返回新数组的长度。功能：对数组中的每个元素执行指定的操作，并返回一个新数组。功能：根据指定条件筛选数组中的元素，并返回一个新数组。
2024-05-08 15:31:39
897
原创 css中cursor有多少值
progress：表示程序正在运行，通常是一个旋转的圆圈或一个沿着水平线移动的条。context-menu：表示上下文菜单应该出现，通常是一个小箭头。help：表示指针提供帮助信息，通常是一个问号或一个问号加箭头。wait：表示需要等待，通常是一个沙漏或一个旋转的圆圈。default：默认光标样式，通常是一个箭头。auto：由浏览器自动决定适当的光标样式。pointer：表示链接，通常是一个手指。运行下方代码清晰直观的了解这些值！none：隐藏光标，即不显示光标。
2024-04-27 09:00:00
941
原创 深入解析 JavaScript 中的 Console 对象
console 对象还提供了计时功能，用于测量代码的执行时间。通过调用 console.time() 和 console.timeEnd() 方法，我们可以开始计时和结束计时，并输出执行时间。console 最常用的功能之一是输出日志信息。通过 log() 方法，我们可以将任何类型的数据打印到控制台。console 对象提供了 clear() 方法，用于清空控制台的内容。在开发过程中，调试是一个重要的环节。console 对象的 table() 方法可以以表格形式输出数据，使其更易于阅读和分析。
2024-04-26 09:30:00
170
原创 alert() 函数功能
这将在消息框中显示一个文本输入框，提示用户输入名称。用户输入的名称将存储在变量。这将在浏览器中显示一个消息框，其中包含文本 “Hello, World!在消息框中，用户可以选择“确定”或“取消”，如果用户点击“确定”，这将在消息框中显示变量。
2024-04-25 11:03:58
857
原创 dat.GUI如何使用和常用方法
dat.GUI是一个轻量级的用户界面库，用于在Web应用程序中创建可交互的控件。它由Google数据艺术家工作室（Google Data Arts Team）开发，旨在简化数据可视化和实验性界面的开发过程。dat.GUI提供了一组简单而强大的控件，包括滑块、复选框、颜色选择器等，使得调整参数和实时预览变得非常容易。// 自定义控件样式在上面的示例中，我们使用gui.add()方法添加了一个滑块控件，并通过方法为控件的DOM元素添加了一个自定义类名。
2024-04-25 10:57:07
1804
原创 解决常见的 `npm install` 报错
这可能是由于依赖包自身的问题或者环境配置不当引起的。这个报错表示指定的文件或目录不存在。这可能是由于文件路径配置不正确或者文件确实不存在导致的。这可能是由于项目中存在无限递归或递归层级过深导致的。检查文件是否存在：确认文件是否真的存在于指定的路径中。优化递归算法：如果递归是必需的，可以尝试优化递归算法，减少递归层级。检查递归调用：检查你的代码中是否存在无限递归的情况。检查依赖包的兼容性：确保依赖包的版本与你的项目兼容。检查文件路径：确保你指定的文件路径是正确的。报错，并提供相应的解决方法。
2024-04-23 17:02:54
1342
原创 前端生成二维码
在现代的 web 开发中，生成二维码是一项常见的需求。Vue 作为一个流行的前端框架，提供了多种方法来生成和显示二维码。本文将介绍如何使用 Vue 和一个流行的二维码生成库。首先，确保你已经安装了 Node.js 和 Vue CLI。现在，你可以启动项目并在浏览器中查看生成的二维码。按照提示选择适合你的配置选项，然后等待项目创建完成。目录下创建一个新的组件文件。
2024-04-23 16:59:24
893
原创 深入解析 HTML 中的 `＜a＞` 标签及其丰富功能
在上述代码中，用户点击链接时，浏览器将根据链接的目标类型采取相应的操作，如显示图片、播放音频或视频。上述代码中，当用户点击链接时，将触发默认的电子邮件客户端，并自动填充收件人为。上述代码中，当用户点击链接时，将打开默认的短信应用程序，并自动填充收件人为。在上面的示例中，当用户点击“跳转到第二部分”链接时，页面将滚动到具有。上述代码中，当用户点击链接时，将在设备上打开地图应用程序，并搜索北京。在上述代码中，当用户点击链接时，在打开的 PDF 文件中将滚动到具有。或其他属性值将链接指向文件内的特定位置。
2024-04-20 11:00:00
1141
原创 Node.js安装和配置
在Node.js官方网站上，你将看到一个大大的绿色按钮，上面写着 “LTS”。P.S.：如果你在安装或运行过程中遇到任何问题，不要惊慌！回到终端或命令提示符中，切换到存储 “app.js” 文件的目录。你将在终端或命令提示符中看到Node.js的版本号，比如 “v14.17.0”。你将在终端或命令提示符中看到 “Hello, Node.js!打开文本编辑器，创建一个新的文件，将其保存为 “app.js”。首先，我们需要安装Node.js。安装完成后，我们需要验证Node.js是否正确安装。
2024-04-20 09:30:00
314
原创 在线编辑器 CodeMirror
editor.getValue() 可以获取代码 当你拿到代码之后就可以通过创建。editor.setValue(code) 可以设置显示的代码。如何优雅的在网页显示代码 如果开发在线编辑器。标签的方式插入到元素里了。
2024-04-19 16:03:01
560
原创 Yarn的安装和配置
Yarn是基于Node.js的，因此我们首先需要安装Node.js。请前往Node.js官网（https://nodejs.org/）下载最新版本的Node.js，并按照提示进行安装。一旦Node.js安装完成，我们可以使用npm（Node.js的包管理器）来安装Yarn。Yarn会引导你完成项目的初始化过程，要求你提供一些基本信息，例如项目名称、版本号等。如果你能看到类似"1.22.5"的版本号输出，那么恭喜你，Yarn已经成功安装了！这会全局安装Yarn，并使其可在命令行中使用。步骤2：安装Yarn。
2024-04-19 10:00:00
298
原创 前端实用插件-日期处理工具Moment.js
在开始使用Moment.js之前，我们需要将其引入到项目中。Moment.js提供了许多方法来操作日期和时间，如添加、减去时间间隔、设置特定部分的值等。Moment.js提供了丰富的格式化选项，使我们能够将日期和时间以特定的格式显示。Moment.js还可以解析字符串形式的日期和时间，并将其转换为Moment对象。Moment.js可以轻松地计算日期和时间之间的差异。现在，我们已经准备好开始使用Moment.js来处理日期和时间了！要获取当前的日期和时间，可以使用Moment.js中的。
2024-04-18 11:43:46
1170
1
原创 HTTP协议中的请求方法及其在前端的应用
简介：HTTP（Hypertext Transfer Protocol）是用于在网络上传输超文本的协议，定义了多种请求方法，用于指定客户端对服务器资源的操作方式。GET：用于从服务器获取资源。POST：用于向服务器提交数据，创建新的资源。PUT：用于向服务器提交数据，更新现有资源。DELETE：用于从服务器删除指定的资源。HEAD：类似于GET请求，但只返回响应头部信息，不返回实际数据。PATCH：用于对服务器资源进行局部更新。OPTIONS：用于获取服务器支持的请求方法列表。TRACE
2024-04-18 11:37:30
352
原创 ECharts：五大卓越在线示例库助力高效数据可视化开发
Make A Pie是一个专注于ECharts图表分享和展示的社区，它汇集了大量用户上传的精美案例，涉及各个行业和场景，不仅提供了完整的代码示例，还支持交互式预览，帮助开发者快速复用或学习创新图表样式。ECharts官网提供的示例库是最权威、最新的展示平台，涵盖了所有基础和高级图表类型，每个示例都配有详尽的代码解释和配置说明。ISQQW作为一个综合性的ECharts示例网站，拥有众多实用的图形示例，尤其适合对ECharts不够熟悉的开发者迅速查找模板并进行快速开发，大大提升了工作效率。
2024-04-17 19:46:42
758
原创 Vue 3 和 i18n 实现多语言
首先，我们需要创建一个基本的 Vue 3 应用。如果你对 Vue 3 不熟悉，别担心，我们将从头开始。然后，我们定义了不同语言的文本消息。现在，我们已经配置好了 i18n，让我们在组件中使用多语言文本。文件中，我们首先需要安装 i18n 库。文件中，我们添加一个简单的按钮来切换语言。安装完成后，我们需要导入和配置 i18n。现在，打开你最喜欢的代码编辑器，并导航到。我们将在这里配置我们的 i18n。最后，我们来实现切换语言的功能。在上述代码中，我们创建了一个。在上述代码中，我们使用。
2024-04-15 17:40:42
710
原创 封装Axios
现在，你可以调用 SuperAxios 的方法，它会帮你处理网络请求！不仅仅是网络请求，你可以在构造函数中添加更多的默认配置，比如请求头、请求拦截器等等。封装 Axios 不仅让你的代码更整洁，还能提高代码的可维护性和复用性。Axios 是一个基于 Promise 的 HTTP 客户端，它可以帮助我们在浏览器和 Node.js 中发送网络请求。它简洁而强大，但是我们可以通过封装它来增加一些额外的功能，让它变得更好用！当然，你可以根据自己的需求继续扩展这个类，增加更多功能。
2024-04-15 11:16:55
488
原创 JS时间戳转换 时间戳转时间 js转换时间戳为时间类型显示
S时间戳转换 时间戳转时间 js转换时间戳为时间类型显示本方法已经抽离出年月日时分秒 更多的时间格式搭配大家可以随意添加！！！。 convertToEnglishMonthAbbreviation方法把月份转化成英文显示 大家可以看下 并非使用通过自定义枚举的方式实现。formatTime方法通过传入24小时制时间 格式化为AM、PM。
2024-04-14 10:30:00
380
原创 Koala：将CSS转换成Less的熊猫宝贝！
不过别担心，有一只特别的熊猫宝贝，名叫Koala（考拉），它可以将CSS编译成更强大、更灵活的语言Less。本文将向你介绍Koala的功能和用法，让你轻松掌握这只可爱的熊猫宝贝。打开Koala后，你会看到一个简洁的界面和一个可爱的熊猫图标。点击界面下方的"编译"按钮，Koala会开始编译你的CSS文件，并将编译后的Less文件输出到指定目录。现在，你可以在Less文件中添加更多功能，如定义变量和嵌套规则，让你的CSS更加强大和灵活。然后，点击右侧的设置按钮，你会看到编译选项。首先，我们需要安装Koala。
2024-04-14 09:45:00
642
原创 Vue中的.env文件：配置、用法和注意事项
它可以有不同的后缀，例如.env、.env.development、.env.production等，用于区分不同环境下的配置。通过使用.env文件和package.json，我们可以轻松地在Vue项目中配置不同环境下的变量，并通过命令行选择不同的环境启动项目。在Vue项目中，你可以通过process.env来访问.env文件中定义的变量。接下来，在.env文件中，你可以根据需要配置不同环境下的变量。这样，你就可以根据不同的环境，通过修改.env文件中的VUE_APP_API_URL来调整API的地址。
2024-04-13 11:00:00
4141
原创 15个有趣和创意的CSS技巧
通过应用飘动动画，云彩将从一侧滑动到另一侧，为你的页面带来一些轻松和宜人的氛围。通过应用闪烁动画，背景将在亮和暗之间切换，给你的页面带来一些奇妙的效果。通过应用闪烁动画，星星将在亮和暗之间切换，给你的页面增添一些神秘感。通过应用旋转动画，彩虹将绕着元素旋转，为你的页面增添一些欢乐的气氛。通过应用跳动动画，元素将上下移动，营造出一种有趣的效果。通过应用抖动动画，按钮将左右晃动，吸引用户的注意力。和旋转变换，你可以创建一个立方体效果，让你的元素立体呈现。，你可以为元素添加一个玻璃模糊效果，使背景透过元素呈现。
2024-04-13 10:00:00
386
原创 打包后，轻松删除所有console输出：给你的代码一次“静音“的机会！
在生产环境中的应用程序中留下了一堆调试时使用的console输出而感到尴尬？我将向你展示如何通过打包Vite来删除所有的console输出。你的代码现在已经被压缩、混淆，并且所有的console输出都不见了！将这段代码放在你的应用程序的入口文件中，它将为你提供一次"静音"的机会，让你的控制台保持寂静无声。的插件来压缩和混淆我们的代码，同时删除所有console输出。现在我们需要在Vite的配置文件中添加一些代码，以便使用。现在，运行你的Vite打包命令，让魔法发生吧！第二步：配置Vite。
2024-04-12 11:42:33
507
原创 页面不活跃状态时 setTimeout不执行
为了解决这个问题，你可以使用Web Workers来执行定时任务，因为Web Workers在后台运行，并不受页面活跃状态的影响。下面是使用Web Workers解决。当页面处于不活跃状态时（例如，用户切换到了另一个标签页或最小化了浏览器窗口），浏览器会对定时器进行限制，以减少不必要的计算和电池消耗。通过这种方式，你可以确保定时器任务在Web Worker中运行，独立于页面的活跃状态。当页面不活跃时，定时器仍然会按预期执行。的回调函数延迟执行或完全停止执行。
2024-04-12 11:07:58
742
原创 setTimeout的最大限制你知道吗
JavaScript 的 setTimeout() 函数接受的第二个参数是延迟的时间，以毫秒为单位。在你的代码中，延迟时间超过了 JavaScript 能够处理的最大时间范围（通常是 32 位有符号整数的最大值），因此 JavaScript 会将其解释为 0，即立即执行回调函数。最大的有符号 32 位整数是 2^31 - 1，约为 2147483647。这意味着在理论上，你可以将延迟时间设置为不超过 2147483647 毫秒，大约为 24.86 天。刷新token的机制一直是对的。
2024-04-12 10:53:31
474
原创 Chrome 中安装 Vue 插件 vue-devtools 的简易教程
它提供了丰富的开发工具和插件，其中一个非常有用的插件就是 vue-devtools。vue-devtools 可以让开发者在 Chrome 浏览器中轻松调试和检查 Vue 组件的状态、事件和数据流。本篇教程将向你展示如何在 Chrome 中安装和使用 vue-devtools。通过安装 vue-devtools 插件，你可以在 Chrome 浏览器中方便地调试和检查 Vue.js 应用程序。希望这篇教程能够帮助你顺利安装和使用 vue-devtools 插件！开始享受它带来的便捷和效率吧！
2024-04-11 15:25:00
869
原创 Node.js 开发技巧
除了常见的 console.log()，你还可以尝试 console.warn() 和 console.error() 来给予你的调试信息不同的颜色和重要性。使用 npm 或 yarn 安装这些模块，并在你的项目中使用它们，可以加速你的开发进程。你可以创建自定义事件，并在适当的时候触发它们，让你的代码变得灵活而高效。使用箭头函数，你可以摆脱函数关键字的束缚，就像一位自由自在的猎人追逐代码的猎物。记住，创意是无限的！参数，你可以启用 Node.js 的调试模式，进入代码的幕后世界，一一解决难题。
2024-04-11 15:17:09
793
原创 Node.js 命令大揭秘：node.js 常用命令
随着时间的推移，你的项目中的依赖包可能会过时。命令就像是一位勇敢的幽灵猎手，它会追踪你的代码中的错误和问题，确保你的项目拥有无懈可击的质量。只需告诉它你需要的包的名字，它就会从互联网上的魔法仓库中将它们下载到你的项目中。命令就像是魔法链接，它可以在你的项目之间建立强大的联盟，让你的代码无缝连接。只需告诉它你想要删除的包的名字，它就会将它们从你的项目中悄悄移除。命令可以帮助你升级你的依赖包到最新版本，让你的项目跟上时代的步伐。命令，你可以搜索 npm 宝库，找到你需要的模块或包的线索。
2024-04-11 15:14:10
387
原创 npm install 报错权限问题
不受支持的引擎版本：根据警告消息，你的当前Node.js版本（v18.15.0）不受支持。确保你的Node.js版本符合所需的版本范围。可以考虑升级到符合要求的Node.js版本。会请求管理员权限来安装依赖项。如果你在Windows上运行，请使用以管理员身份运行的命令提示符。这个问题涉及到权限和不受支持的引擎版本的错误。清除npm缓存：尝试清除npm缓存并重新安装依赖项。npm install 报错权限问题。npm i 报错权限问题。
2024-04-11 14:59:50
905
原创 前端代码整洁指南：15个技巧，让你的代码又干净又好玩！
在前端开发中，写出整洁、可读性高的代码是非常重要的。不仅可以提高团队协作效率，还能让你的代码变得更易维护，减少 bug 的产生。但是，有时候我们写的代码可能会变得混乱不堪，就像一张乱七八糟的地图，让人摸不着头脑。15个技巧，帮助你将前端代码变得整洁。
2024-04-11 14:24:40
133
喝酒神器摇骰子微信小程序源码
2024-07-05
Cesium 天空盒资源 skybox 近景天空盒
2024-04-11
2048 微信小程序源码
2023-02-03
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人