- 博客(63)
- 收藏
- 关注
RSS订阅原创 【Vue】解决设置html根字体大小，但使用rem在某些手机浏览器样式错乱问题
首先不知道为什么如下代码在html中如下写在某些浏览器（比如华为自带的浏览器）中不生效，但是在手机端edge浏览器没问题。我调试了下发现在那些不生效的浏览器他貌似不能识别@media (max-width: 550px)这个媒体选择器，用的还是根目录设置的字体大小。于是我尝试使用js来设置根目录字体大小，如下所示，你可以根据自己的需要更改下面的代码。
2024-06-14 16:55:11
364
原创 【前端基础】使用 typeof 进行类型判断注意点
使用typeof进行类型判断时需要注意上述情况，特别是`null`、`NaN`和数组类型的判断。在某些情况下，需要结合其他方法进行更准确的类型判断。
2024-03-28 16:28:07
393
原创 【前端基础】什么是类数组对象，类数组对象转换成数组的方法
DOM 元素列表 (NodeList)：由 DOM 查询操作返回的结果，如等。NodeList 是一个类数组对象，包含了匹配查询条件的 DOM 元素列表。函数参数对象 (arguments)：在函数内部可以通过arguments对象访问所有传递给函数的参数。arguments对象是类数组对象，具有类似数组的特性，例如有一个length属性和通过索引访问参数的能力。字符串 (String)：字符串也可以被视为类数组对象，因为它们包含一系列字符，并且可以通过索引访问单个字符。
2024-03-28 16:08:53
694
原创 【Vue】导出Excel（xlsx和file-saver）
该方法会创建一个包含三列（姓名、年龄、职业）的二维数组，然后使用xlsx库将其转换为工作表，并添加到工作簿中。接着使用FileSaver库将工作簿保存为.xlsx格式的文件，并提供一个下载链接，最后清理URL。在Vue中导出Excel文件，可以使用第三方库如xlsx和file-saver。// 使用blob和FileReader创建一个Blob URL。// 假设你有一个表格数据的数组。// 使用saveAs下载文件。// 创建工作簿并添加工作表。// 将数据转换为工作表。// 生成Excel文件。
2024-03-28 10:28:09
881
原创 【Vue】监听div宽高的变化（动态渲染echarts宽高案例）
是一个现代的JavaScript API，它允许你监听元素的大小变化。// entries 是一个 ResizeObserverEntry 对象数组，包含目标元素的大小信息。// 在这里可以触发自定义的处理逻辑，例如将宽高信息传递给 Vue 组件的方法。的回调函数中，我们可以获取目标元素的新宽度和高度，并在。// 在这里可以执行你想要的操作，比如更新组件的状态。// 在组件销毁时停止监听，防止内存泄漏。元素的宽度和高度的变化，你可以使用。// 获取要监听的 div 元素。// 开始监听目标元素的大小变化。
2024-01-23 17:11:36
1790
原创 【前端基础】uniapp、axios 获取二进制图片
在网络请求中，`responseType: "arraybuffer"` 是指定服务器响应的数据类型为二进制数据缓冲区（ArrayBuffer）。这是XMLHttpRequest（XHR）和Fetch API等客户端JavaScript API中的一个选项。
2023-12-24 19:06:27
1252
原创 【uniapp】uniapp中本地存储sqlite数据库保姆级使用教程（附完整代码和注释）
封装好的 uniapp 操作 sqlite 数据库方法，附带使用案例，完整代码和注释，好理解，复用性高
2023-12-20 17:35:47
9476
9
原创 【ECharts】从零实现echarts地图完整代码（纯前端，包含地图资源）
echarts可视化2.5D地图，自定义地图纹理，伪热力图，高亮，自定义提示框，地图下钻，定位 logo 显示。完整代码，纯前端，下载完即可运行
2023-12-14 12:59:01
2004
原创 【Vue】使用.sync实现父子组件数据双向绑定
`.sync` 修饰符实际上是一种简写形式，它展开为一个包含 `v-on` 和 `v-bind` 的语法糖。在上述例子中，`:message.sync="message"` 实际上是 `:message="message" @update:message="message = $event"` 的缩写形式
2023-11-23 15:52:12
273
原创 【CSS】全局声明引入自定义字体
在Vue.js中可以使用全局样式表来定义字体。通常，可以在项目中的主样式表中定义全局字体，然后确保该样式表在整个应用程序中被引入。这样自定义字体就会在整个Vue应用程序中全局生效了。确保测试在不同浏览器和设备上的兼容性。或者如果你的项目使用了Vue CLI，可以在。以下用vue项目为例，其他的也是类似！为你实际字体文件的路径。
2023-11-10 17:44:05
990
原创 【CSS】解决上层盒子遮挡下层图片点击事件的三种方法
在Web开发中，我们有时候会遇到一个常见的问题：上层盒子的点击事件遮挡了下层图片的点击，导致用户无法与图片进行交互。本篇博客将介绍三种解决这个问题的方法，通过使用CSS和JavaScript，使得上层盒子在视觉上处于上层，但不影响下层图片的点击事件。
2023-11-10 14:19:37
2235
原创 【Vue】组件二次封装小技巧 — 利用$slots接收插槽
通过使用v-for和$slots来动态渲染插槽名，你可以实现更灵活的组件，让父组件能够以动态方式定义插槽内容。这使得组件更具通用性，适应各种不同的用例和需求。
2023-11-08 10:20:52
1313
原创 【Vue】组件封装小技巧 — 利用$listener和v-on接收父组件传递的事件
在Vue.js中，使用`$listener`可以使二次封装组件更加灵活和强大。它允许你轻松地将父组件的事件监听器传递给内部元素，而无需手动触发事件。这提高了组件的可重用性和可定制性，使你能够更容易地构建符合各种需求的通用组件。
2023-11-08 10:01:46
511
原创 【Vue】组件封装小技巧 — 利用$attrs和v-bind接收传递未定义的属性
在Vue.js中，$attrs和v-bind可以用于组件的二次封装，以在封装的组件中传递父组件的属性和事件。这对于创建高度可定制的通用组件非常有用。下面是一些示例代码：假设你有一个名为MyButton的自定义按钮组件，它接受一些常见的按钮属性（如disabledtype等），然后你想将其二次封装，以添加一些额外的样式和功能。以下是如何使用$attrs和v-bind来实现这个目标的示例：-- 添加自定义样式 -- > v-bind="$attrs"
2023-11-08 09:27:59
756
原创 【Vue】路由组件向app.vue主文件传值
在路由定义中，你可以使用路由参数来传递数据。首先，你需要在路由配置中定义路由参数，然后在组件中使用。你还可以使用路由状态来传递数据，这种方法适用于需要在多个组件之间共享数据的情况。主页面传递数据的两种常见方法。你可以根据你的需求选择其中一种来实现数据传递。首先，在路由配置中，你可以为每个路由添加一个。在Vue.js中，可以使用路由传参的方式向。这样，你可以在多个组件中访问相同的数据。在这个例子中，我们定义了一个路由参数。然后，在你的组件中，你可以通过。然后，在组件中，你可以通过。对象来访问这些参数。
2023-11-07 15:43:40
223
原创 【Vue】使用v-model实现控制子组件显隐
可以实现双向绑定的效果，允许父组件控制子组件的显示/隐藏，同时允许子组件自己控制自身的显示/隐藏。这样，父组件和子组件都可以独立地控制显示/隐藏状态，实现了双向绑定的效果。// 子组件自己控制显示/隐藏状态。在子组件中，你需要定义一个名为。事件，这将影响父组件中。在父组件中，你可以使用。，以便接收来自父组件的。
2023-11-02 17:24:21
874
原创 【ECharts】保姆级从空白项目到Echarts地图
/控制提示框是否总是显示内容,false 表示提示框只在特定触发条件下显示。//指定触发提示框显示的方式(click: 当鼠标点击时触发提示框的显示)//控制是否可以通过鼠标进入提示框内部，允许与提示框内部的内容进行交互。// 地图注册，第一个参数的名字必须和option.geo.map一致。//提示框显示的延迟时间，即鼠标悬停后经过多少时间才会显示提示框。// 鼠标移开后提示框消失的延迟时间(单位:毫秒)// 指定何时触发提示框的显示。// 鼠标放上去高亮的样式。// 地图区域的样式设置。
2023-10-31 14:53:05
110
原创 【开发工具】vConsole - 手机前端开发调试利器
是一个用于在移动端网页上显示控制台日志的轻量级调试工具，它通常用于开发和调试移动网页应用程序。控制台，从中可以查看控制台日志、网络请求、DOM 树、localStorage 等信息，以进行调试。主要用于开发和调试，因此在生产环境中应该将其禁用或删除相关代码，以确保用户不会访问调试工具。刷新移动网页应用程序时，将在页面底部看到一个小的悬浮按钮，点击该按钮将打开。在您的网页中添加以下 JavaScript 代码，以便在页面加载时启用。就绪时要执行的操作以及清除日志时要执行的操作。// 清除浏览器控制台的日志。
2023-10-16 12:04:06
1451
原创 【Vue】v-model修饰符
和修饰符可以让你更好地控制表单元素和组件的双向数据绑定行为，以满足不同的需求和约束。它们在开发Vue.js应用程序时非常有用，可以减少样板代码，提高开发效率。它允许你在表单元素和组件中轻松绑定数据和用户输入，以便在用户输入数据时，数据会自动更新，反之亦然。修饰符用于延迟数据更新，只在输入框失去焦点时才将数据同步到模型。上的额外标记，用于调整其行为。Vue.js提供了几个修饰符，让你更灵活地控制双向绑定的行为。修饰符用于去除用户输入的首尾空格，以保持数据的干净性。这些修饰符可以单独使用，也可以组合使用。
2023-10-12 16:20:18
361
原创 【Vue】组件通信与方法暴露实践
在Vue.js中，组件通信和方法的暴露是非常常见的需求。通过使用自定义事件和对象暴露方法，我们可以轻松地在组件之间实现通信和方法调用。这种模式使代码更加清晰和可维护，有助于更好地组织Vue.js应用程序。
2023-09-27 11:48:25
327
原创 【Vue】避免Vue组件中常见的props默认值陷阱
当你将一个对象或数组作为props的默认值时，它们会在组件的所有实例之间共享。这意味着如果一个组件修改了这个默认值，其他组件也会受到影响，因为它们共享同一个引用。如果后续更改了默认值，不会触发组件的重新渲染。如果尝试将非原始值作为默认值类型，Vue可能会引发警告。如果默认值与验证类型不匹配，Vue将不会发出警告，但仍然可能导致意外行为。使用一个函数来返回一个新的对象，以确保每个组件都有自己独立的对象。默认值与验证类型不匹配可能导致类型错误和不一致的数据。的默认值，组件不会重新渲染。
2023-09-18 20:30:17
661
原创 【前端基础】如何判断某个字符串是否以 abc 开头
可以使用 JavaScript 中的多种方法来判断一个字符串是否以 “abc” 开头。方法是最常用的，因为它简单且直观。可以根据具体需求选择其中的任何一种方法。
2023-09-08 10:48:07
1489
原创 【前端基础】垂直居中效果
这些方法中的任何一个都可以用来实现垂直居中效果，具体取决于项目需求和个人偏好。选择其中一个并根据需要进行调整。你也可以使用 CSS Grid 布局来实现垂直居中效果，类似于 Flexbox，但它更适合复杂的布局。使用 Flexbox 布局是实现垂直居中效果的一种简单方法。使用绝对定位也可以实现垂直居中效果，但这通常需要明确定义容器的高度。还可以使用表格布局来实现垂直和水平居中效果，但这种方法不太常见。
2023-09-08 10:28:57
429
原创 【前端基础】js 如何判断一个值是数组
在JavaScript中，可使用不同的方法来判断一个值是否是一个数组。操作符也可以用来检查一个值是否是一个数组。但需要注意，如果在多个窗口或框架中操作对象，进行比较来检查值是否是一个数组。这种方法比较繁琐，但在某些情况下仍然有效。可能不够可靠，因为它检查的是对象的构造函数。方法是最简单和推荐的方法，它会返回。如果传入的值是一个数组，否则返回。这种方法通过获取值的内部。推荐使用第一种方法，即。，因为它简单且可靠。
2023-09-08 09:30:44
818
原创 【uni-app】压缩图片并添加水印
这是一个用于检测上传的图片文件格式的函数。它接受一个文件名列表作为参数，并返回一个 Promise 对象。它接受一个图片的URL作为参数，并返回一个Promise对象。这个函数的作用是加载指定URL的图片，获取其宽度和高度，并将它们包装在一个对象中返回。函数的目的是检查上传的文件是否属于支持的图片格式（.jpg、.jpeg、.png）。它接受一个图片的URL、图片的宽度和高度作为参数，并返回一个Promise对象。这是一个用于在图片上添加水印并将结果绘制到 canvas 上的异步函数。
2023-08-24 12:00:43
1214
原创 【前端基础】通过 JSON.parse(JSON.stringify(obj)) 来实现深拷贝
需要注意的是，这种方法对于大多数情况下是有效的，但是有一些特殊情况下可能会出现问题，比如对象中包含函数、循环引用等情况。在实际应用中，为了更加健壮的深拷贝，你可能需要使用成熟的库，例如。这种方法可以很方便地实现深拷贝，并且能够确保两个对象之间不会相互影响。会将对象转换成字符串再解析回对象，从而实现深拷贝。完全独立，修改其中一个对象不会影响另一个对象。是一种简单且有效的深拷贝方式。但对于大多数情况下，最简便的实现方式是使用。
2023-07-31 20:01:05
882
原创 【Vue】】img使用 :src 动态绑定图片地址，但是加载图片不成功
img标签直接动态绑定图片的相对路径的时候，图片不能正常显示。动态地址，路径被加载器解析为字符串，所以图片找不到。设置绝对路径或者相对路径是改为用。引入才能成功，就可以动态使用了。
2023-07-31 10:18:22
4756
2
原创 【uniapp】长方形图片显示中间正方形部分不压缩图片（圆形展示）
组件时，如果要将长方形图片显示为中间的正方形部分，可以使用 CSS 来实现裁剪效果。，让图片宽度等于盒子的宽度高度自适应。再将图片父盒子设置宽高以及使用。的话，超出高度的图片也有可能挤压别的盒子，导致其他元素错位。使得图片水平垂直居中。在使用 uni-app 框架的。来达到超出部分不显示的目的。
2023-06-14 13:33:55
1526
原创 【算法】Fisher-Yates 洗牌算法
作为乘数，我们可以确保生成的随机数逐渐减小，从而在算法中正确地选择要交换的元素位置。在 Fisher-Yates 洗牌算法中，这个表达式用于生成一个介于 0（包含）和。是当前迭代的索引值，它表示从数组的最后一个元素到当前迭代的元素的范围。方法返回一个介于 0（包含）和 1（不包含）之间的伪随机小数。（包含）之间的随机整数。这个随机整数表示要与当前元素交换的位置。在 Fisher-Yates 洗牌算法的每个迭代中，我们使用。是一个生成0到1之间的随机数乘以。（不包含）之间的随机数。）得到一个介于 0 和。
2023-06-13 18:01:12
596
原创 【通用方法】日期获取相关的方法封装（获取近n天的日期数组、获取当前时间、昨天日期）
日期获取相关的方法封装（获取近n天的日期数组、获取当前时间例如2023年6月14日 11:10、昨天日期2023年6月14日）
2023-06-12 10:09:50
212
原创 【uniapp】获取url中的参数this.$route.query或this.$mp.query
其中，第一种方法适用于h5、APP和微信小程序等平台，而第二种方法只适用于微信小程序平台。在uniapp中获取url中的参数值可以通过。
2023-06-07 14:25:45
9922
1
原创 【uniapp】同一页面实现描点定位
如果需要在同一页面内实现锚点定位，可以使用uni.createSelectorQuery获取到目标元素的位置信息，然后调用uni.pageScrollTo方法滚动到该位置。这样就能在同一页面内实现简单的锚点定位了。
2023-06-07 11:42:19
400
原创 【前端基础】JavaScript中的加密方法encodeURI() & encodeURIComponent()
当我们需要在 URL 中传递参数时，为了避免出现一些特殊字符或中文等无法正常解析的情况，我们需要对这些参数进行编码。函数则用于对 URI 中的组件部分进行编码，包括参数、路径、哈希等。该函数会对所有非字母数字字符进行编码，包括冒号、正斜杠、问号和井号等，并将空格转换为。这两个函数的作用与编码函数相反，将编码后的字符串解码为原始字符串。该函数会保留某些字符，例如冒号、正斜杠、问号和井号等，并将空格转换为。需要注意的是，在解析 URL 时，使用。这两个函数来实现字符串编码。
2023-06-02 16:23:38
2013
4
JavaScript图片压缩前端基操
2023-06-16
常用的linux命令（特别全）
2023-06-12
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人