- 博客(110)
- 收藏
- 关注
RSS订阅原创 封装图片压缩
1.可以设置压缩后的图片最大宽度/高度。限制输出最大宽/高值 （如果不设置，按照原图尺寸大小）3.可以设置输出图片的质量级别（假设1-10级别。级别越大，质量越高，占用存储越大，越清晰）2.要求输出格式支持blob 和 File 文件。
2024-07-12 17:31:03
193
原创 this指向问题以及如何改变指向
箭头函数的"this"是静态的，它捕获其定义时（而不是运行时）的上下文。因此，箭头函数通常不适合作为Vue组件中方法的定义方式，因为它无法访问Vue实例的数据和方法。：普通函数的"this"是在运行时动态绑定的，取决于函数的调用方式和上下文。Vue.js在模板和事件处理函数中自动绑定了组件实例，以便确保方法中的"this"指向正确。会指向当前的Vue实例，因为Vue在内部会确保方法被调用时绑定正确的上下文。方法创建一个新的函数，称为绑定函数，它会把指定的对象绑定为调用函数时的。
2024-07-05 17:28:33
780
原创 关于WebSocket
通过在建立 WebSocket 连接时使用加密传输，可以确保数据在传输过程中被加密，并防止第三方窃听或篡改数据。通过can i use网址我们可以知道，WebSocket 在现代的 Web 浏览器中具有广泛的兼容性，但在一些旧版本的浏览器中可能存在兼容性问题。WebSocket可以提供实时、双向、持久的通信能力，使得 Web 应用能够实现高效、实时的数据传输和即时通信。因此，如果在使用 WebSocket 时不进行任何加密措施，那么数据在传输过程中可能会被窃听、篡改或伪造。
2024-06-26 17:31:43
901
原创 JavaScript 预编译与执行机制解析
在深入探讨JavaScript预编译与执行机制之前，我们首先需要明确几个基本概念：声明提升、函数执行上下文、全局执行上下文以及调用栈。这些概念共同构成了JavaScript运行时环境的核心组成部分，对于理解代码的执行流程至关重要。本文将围绕这些核心概念，展开一次深度解析之旅,全面而深入地阐述这一主题。
2024-06-23 22:56:52
1115
原创 如何在 Vue 3 中使用 vue3-print-nb 实现灵活的前端打印
它的属性值可以是一个对象以此来实现更加定制化的打印效果，一起来看看吧💖 HTML。我们可以给要打印的页面指定额外的样式、额外的样式、额外头，甚至是添加回调函数！属性即可实现打印的效果，可以选择打印全部或者打印指定页面，比如我只想要打印。对象添加一个url属性即可实现打印当前网址对应的整个页面。还有一点需要的注意的是设置url属性需要确保同源策略相同！设置了preview属性将在打印时候显示打印预览。，我已经提前在el-table上定义好了。以上实现了一个最基本的打印效果，只需要在要打印的元素上通过。
2024-06-16 15:56:46
945
原创 echarts组件x轴坐标显示不全解决方法
/ endValue: 4, //滚动条的截止位置（按比例分割你的柱状图x轴长度）// type: "slider", //给x轴设置滚动条。// show: true, //flase直接隐藏图形。// startValue: 0, //滚动条的起始位置。interval: 2 // 每隔两个标签显示一次。
2024-06-10 22:30:03
850
原创 JS判断对象是否为空对象的几种方法
/true 为空， false 不为空。console.log('对象是否为空：', isEmptyObj({}))console.log('对象是否为空：', isEmptyObj({}))console.log('对象是否为空：', isEmptyObj({}))console.log('对象是否为空：', isEmptyObj({}))
2024-05-30 17:26:48
466
原创 ?? 运算符、?. 运算符和 ?. .运算符
运算符的进一步简形式是?如果对象的某个属性或方法不存在，. 运算符会抛出一个TypeError，而?在这个例子中，虽然obj.foo存在，但它的值为null，所以使用. 运算符对bar进行访问抛出TypeError，而使用?在这个例子中，如果getInputValue(‘username’)返回的值为null或undefined，则username会被设置为加菲猫作为默认值。在这个例子中，由于x的值为0，它被判定为 “falsy” 值，所以使用 || 运算符时返回了y的值，而使用?
2024-05-26 17:50:04
407
原创 Promise.all()
在处理多个并发请求时，一般会用Promise.all()方法。Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例Promise.all() 方法接收一个 promise 的 iterable 类型（注：Array，Map，Set 都属于 ES6 的 iterable 类型）的输入，并且只返回一个Promise实例， 那个输入的所有 promise 的 resolve 回调的结果是一个数组。
2024-05-19 17:53:10
236
原创 实现echarts地图
color: "#c4cccd", //鼠标悬浮时显示各省名称的颜色。areaColor: "#f1ffff", //区域颜色，鼠标悬停颜色。数组中提供了地图上各个区域的数据，每个数据项包含了区域的名称、数值和额外的自定义数据。borderColor: "#4a87fb", //区域边框颜色。color: "#c4cccd", //显示各省名称颜色。内容通过一个自定义的。areaColor: "#f1ffff", //区域颜色。layoutCenter: ["35%", "50%"], //位置。
2024-05-12 14:58:09
538
原创 echarts部分属性使用
/ 文字超出宽度是否截断或者换行'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为...'break' 换行'breakAll' 换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行。// horizontal: ['arrow-left', 'arrow-right'], // 设置水平方向翻页按钮图标。// 'scroll'：可滚动翻页的图例。// 控制下一页的显示在左侧还是右侧'start','end'// 'plain'：普通图例。
2024-04-21 18:24:08
745
原创 从输入url到页面加载的全过程
3.生成渲染树：从DOM树的根节点开始，遍历每个可见节点，对于每个可见节点，找到CSSOM树中对应的规则并应用，根据每个可见节点及其对应样式，组合生成渲染树。当页面元素样式改变不影响元素在文档流中的位置时，如color、visibility等，浏览器只会将新的样式赋予元素并进行重新绘制的操作。浏览器查看缓存（浏览器缓存、系统缓存、路由缓存），如果缓存中有，直接在屏幕上展示页面内容。5.根据渲染树及其回流得到的集合信息，得到节点的绝对像素，绘制页面像素信息。7.加载js脚本，加载完成解析js脚本。
2024-04-14 18:39:31
241
原创 JS获取12小时内的时间，时间格式为：YYYY-MM-DD hh:mm:ss
const before12Timestamp = timestamp - 12 * 60 * 60 * 1000// 获取12小时前的时间戳。const timestamp = defaultTime.getTime() // 获取当前时间的时间戳。var date = new Date(timestamp) //当前时间戳。// 将时间戳转换为日期格式。
2024-04-08 20:04:03
212
原创 关于style/class的几种写法
2.计算属性判断return this.isTrue;// 这里的值可以根据需要进行修改。如果isActive为true，则元素会应用active类；在data中定义 textColor和fontSize。在data中定义isTrue active为样式。/* 添加相应的样式 */data中定义isTrue。一. style写法。
2024-03-29 17:25:33
526
原创 Vue 实现带拖动功能的时间轴
用于设置时间轴滑块的初始日期，格式通常为 YYYY-MM-DD。：一个数组，用于标记特定日期，在时间轴上会有相应的标记显示。：一个数组，用于锁定日期，当滑动结束时自动跳到指定的日期。：一个布尔值，用于控制是否显示背景遮罩。
2024-03-24 18:30:46
1588
原创 echarts地图
左侧为地图展示，右侧可滚动地域和游客总量，地图下方图例对应4个区间分别是0，0.25，0.5，0.75 1对应地图颜色。2.如要实现地图展示，需创建一个div容器用来加载地图，在加载地图前需准备json数据。这个数据就是当前的国内地图。基于 Echarts 的中国地图展示游客数据的图表。，该参数应为一个包含了各地区游客数据的数组。，根据下载json数据。3.配置当前地图的显示。
2024-03-15 14:52:53
293
原创 视频m3u8(hls)
1.需要hls插件配合video，在需要的地方调用函数，并且传值，用来记录。判断目前是单屏幕还是多屏幕，先清除视频，然后加载url，再初始化。
2024-01-28 16:10:49
142
原创 视频录制(本地好使，线上未解决)
会出现报错，跨域隔离SharedArrayBuffer 报错问题。把下载的nodemoudle中的放到public下，项目中引入。在vue.config中解决。
2024-01-19 17:39:59
391
原创 视频监控(抓拍)
创建canvas节点，设置宽高，调用canvas 的getContext方法，以及drawImage方法，传入。urlObj是当前这一项，然后获取当前这一项的下标以及dom节点。新打开链接，展示图片以及下载。
2024-01-14 15:47:25
449
原创 echarts 柱状图
4.如何固定最后一根柱子的高度在同一个位置，data: dataArry.map(item => fixedTotal)3.第一根柱子的 position: "right", 相当于百分比跟随柱子的最右边，data是百分比的数据。数据过多会导致下拉的时候，触发y轴formatter，更新序号，序号会重新排列，不准确。所有的数据返回项都变成新数组，全部返回[100,100,100........]1.y轴显示的序号和名称需要在数据中拼接，而不是在y轴data中拼接，这在用柱子做背景的时候有用(中间的柱子)。
2023-12-24 18:47:20
104
原创 CSS3 2D变形 过渡 动画
在CSS3中，动画效果包括4个部分：变形（transform）、3D变形、过渡（transition）、动画（animation）。CSS3 2D变形 3D变形 过渡 动画。
2023-12-17 21:37:39
800
原创 vue递归以及示例
递归是一种在函数中调用自身的编程技巧。通过递归，函数可以将一个问题分解为更小的子问题，并且在达到基本情况（终止条件）时停止递归。递归在解决某些问题时非常有用，特别是那些可以被分解为相同类型的子问题的情况。2.例如递归级联去掉空的children。传入相对应的属性以及数据源。3.例如级联禁用某一层级。
2023-12-09 18:21:55
1295
原创 flv 轮播功能(单个、多个)
/ 当多分屏进入单分屏的话currentVideoIndex.value 可能会有问题，不能保证选择的视频是从index=0开始的。// 这里设置了超过1秒以上则进行视频加速播放。// 默认索引0，取二维数组第一项的id 1为视频时，调用init改变dom和index。// 二维数组取余数，currentVideoIndex.value，第一次加url数据。// 当前的值取余的值大于0说明有多组 然后循环，如果
2023-12-03 19:18:36
93
原创 flv视频轮播功能(单个时)
img @click="stopClick" src="@/assets/images/1p.png" class="imgStyle" alt="">停止。// 当多分屏进入单分屏的话currentVideoIndex.value 可能会有问题，不能保证选择的视频是从index=0开始的。// 默认索引0，取二维数组第一项的id 1为视频时，调用init改变dom和index。enableWorker: false, //启用分离的线程进行转换。cors: true, // 是否跨域。
2023-11-25 19:24:14
472
原创 em/px/rem/vh/vw 的区别？
为了简化 font-size 的换算，可以在css中的 body 选择器中声明font-size= 62.5%，这就使 em 值变为 16px*62.5% = 10px。em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值。在移动端中存在设备像素比，px实际显示的大小是不确定，之所以认为px为绝对单位，在于px的大小和元素的其他属性无关。rem，相对单位，相对的只是HTML根元素font-size的值。在桌面端，指的是浏览器的可视区域。
2023-11-19 18:55:29
108
原创 ES6 数值扩展
将es5的全局方法parseInt()、parseFloat()改为Number.xxx，目的是减少全局方法，使语言模块化。// 33334444555566667777n // 可以保持精度。Math.sign()判断是正、负、零，非数值会先转换数值。let b = 15346349309n // 大整数。let a = 2172141653n // 大整数。Math.sign('5') // 1 整数。Math.sign(-5) // -1 负数。大整数语法(后缀n)：数据n。
2023-11-05 17:14:00
222
原创 ref、reactive、toRef、toRefs
语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）应用：常用于es6的解构赋值操作，因为在对一个响应式对象直接解构时解构后的数据将不再有响应式，而使用toRefs可以方便解决这一问题。toRefs后的ref数据不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据。toRef后的ref数据不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据。reactive定义的响应式数据是“深层次的”
2023-10-29 23:37:19
429
原创 Echarts柱状图数据过多设置滚动条效果
未设置前：设置后：dataZoom: [ { show: true, height:8, bottom:0, startValue: 0, //起始值 endValue: 5, //结束值 showDetail: false, fillerColor: "rgba
2023-10-22 16:50:14
459
原创 异步代码执行顺序
promise.then().catch().finally() 成功失败都会触发finally()中的回调，pending是不会触发的。先执行微任务，执行完所有微任务，再检查宏任务执行。当执行完一个宏任务，继续检查微任务，如果有就执行，没有就执行下一个宏任务。微任务优先级：process.nextTick优先级最高 ，其他微任务按顺序执行。注意：定时器阶段和检测阶段，如果定时器有延时1s，那就是检测阶段先执行。js引擎对异步代码优先级进行划分：微任务、宏任务。总之：微任务优先级高，宏任务优先级低。
2023-10-15 18:37:49
148
原创 elementui实现表格(el-table)默认选中
遍历表格的数据，再遍历需要在表格中反显的数据，两者的id一致（两者之间共同的标识即可，一般以id做判断）// 把判断出来的默认表格数据push到创建的数组中。//遍历表格的数据，再遍历需要在表格中反显的数据，两者的id一致。把判断出来的默认表格数据push到创建的数组中。//再遍历数组，将数据放入方法中。//创建一个空数组用来存放默认数据。label="日期"label="姓名"label="地址"创建一个空数组用来存放默认数据。再遍历数组，将数据放入方法中。
2023-09-24 16:39:48
3488
原创 关于try..catch..finally..throw
catch 无法捕获无效的 JS 代码，例如try块中的以下代码在语法上是错误的，但它不会被catch块捕获。每个try块必须与至少一个catch或finally块，否则会抛出SyntaxError错误。如果没有catch块，错误将不能被优雅地处理，从而导致未捕获的错误。将try与catch块一起使用，可以处理try块抛出的错误。即使在try块抛出错误之后，finally块仍然执行。即使从try块抛出错误后，也会执行finally块。使用嵌套的try和catch块向上抛出错误。catch 与 异步代码。
2023-09-17 21:47:20
91
原创 vue2.0 使用可选链操作符
空值合并操作符（?）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。空值合并操作符（?）与逻辑或操作符（ || ）不同，逻辑或操作符会在左侧操作数为假值时返回右侧操作数。逻辑空赋值运算符 (x?ES6中js的运算符（?1、空值合并操作符（?2、可选链操作符(?
2023-09-10 16:40:37
395
原创 小程序当前页面栈以及跳转
/触发上一个页面中的方法。//获取上一个页面实例对象。页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。调用页面路由带的参数可以在目标页面的。只能打开 tabBar 页面。1.调用页面栈刷新接口。
2023-09-03 21:01:23
743
原创 JS使用Object.keys
Object.values()和Object.keys()是相反的操作，把一个对象的值转换为数组。Object.keys(obj)返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。返回值：一个表示给定对象的所有可枚举属性的字符串数组。person[key] // 获取到属性对应的值。参数：要返回其枚举自身属性的对象。处理对象，返回可枚举的属性数组。name:"张三",name:"张三",处理字符串，返回索引值数组。处理数组，返回索引值数组。
2023-08-27 19:24:17
194
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人