- 博客(199)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 前端工程部署步骤小记
Vue创建Demo项目：https://blog.csdn.net/weixin_41924879/article/details/128828854。webpack初始化项目参数详解：https://blog.csdn.net/qq_31754523/article/details/99622172。6、使用 vue init webpack命令创建一个项目(项目名不能用大写字母)：vue init webpack design-system。4、更新插件 vue upgrade --next。
2024-03-07 19:47:08
405
原创 2021片段代码记录-智能感知
// 前if(newValue.length === 0){ this.btn_disable = true} else{ this.btn_disable = false}// 后this.btn_disable = newValue.length === 0// 前watch: { startTime (newValue, oldValue) { const diff = (this.endTime - newValue) / 1000 / 60 c
2024-03-07 19:42:44
392
原创 【vue】provide/inject
/</</importfromexportdefaultname"Parent"providefor"demo"components</在这里我们在父组件中provide for这个变量。
2024-02-23 15:57:45
1083
2
原创 $attrs
vue官网定义如下：包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。
2024-02-22 16:50:24
454
原创 【前端】WebSocket接收二进制数据转JSON并解决中文乱码问题（ArrayBuffer转json）
WebSocket与mqtt服务器通信，接收二进制数据并将其转为Json使用。一般方式都会出现中文乱码问题。
2024-01-21 00:23:08
849
原创 Vue中使用debugger在浏览器中不起作用解决方案
使用vscode编辑器，运行vue项目时想要断点调试，奈何始终进不了断点。先后尝试Edge和chrome浏览器，均不生效，排除浏览器因素，定位为代码问题。找到文件vue.config.js，或全局搜索。，重新启动项目，debugger即可生效。
2024-01-20 18:36:09
2286
1
原创 html+js网页连接MQTT服务器new Paho.MQTT.Client
/连接服务器并注册连接成功处理事件。//注册连接断开处理事件。//注册消息接收处理事件。
2024-01-18 00:25:16
574
1
原创 代码审核提升小Tip
定时器的第一个参数应该是函数而不是函数的结果，this.handleqQuery 的返回值不是函数 此方法会报错。3、【优化】通过匹配key获取目标值。1、【优化】格式化日期，0的填充。2、【缺陷】定时函数书写。4、多余的三点表达式。
2023-07-19 15:15:39
589
转载 vue实现table自动滚动
客户需求：右下角表格实现自动滚动本案例中没有使用任何第三方插件，全部使用vue中相关的js、css以及定时器方式实现。解决问题的第一步不是找代码，而是分析问题。列表自动滚动常见方式有两种（上下左右的滚动不赘述，只是方向的问题，本案例以向上自动滚动为例）：（1）匀速滚动 （2）有间隔的平滑滚动。本案例先给出匀速滚动的方案。要匀速向上滚动，以我的经验，最容易想到的是用定时器实现，每隔一个时间差，列表向上移动一个像素（大于一个像素，可能会在视觉上给人卡顿掉帧的感觉），在时间够短的前提下，就会给人一种匀速向上的
2023-06-12 16:28:17
4103
2
原创 理解canvas元素，绘制简单2D绘图形
JavaScript 代码可以访问该区域动态在上面绘制图片，类似于其他通用的二维 API，通过一套完整的绘图函数来动态生成图形。canvas最早是苹果公司提出并准备用在控制面板中的，随着其他浏览器的迅速跟进，HTML5 将其纳入标准。所以图中蓝色方形左上角的坐标为距离左边（X 轴）x 像素，距离上边（Y 轴）y 像素，坐标为 (x,y)。因为这个方法是后来才增加到规范中的，所以支持的浏览器也是在后面的版本实现的，包括 IE9、Firefox 3.5 和 Opera 10。如果你要给每个图形上。
2023-05-22 20:43:33
1103
原创 【echarts】markPoint使用示例
xAxis：1 // 标记点横轴位置，索引为1代表第二个点（从0开始为第一个）如上图，想要在第二个点标记Y轴为1.5的点，并展示值“-100”，对应。yAxis：-1.5 // 标记点的纵坐标。value：-100 // 标记点展示内容。
2023-04-26 11:17:15
2533
原创 左右icon切换中间图片逻辑，坑：if判断条件不要连写
坑：if的判断条件要注意不要连写，0 < index && index < (list.length-1)！
2023-04-18 17:06:33
118
原创 【Echarts】markLine自定义位置及样式
symbol : [ 'none' , 'arrow' ] , // none为标线两端的样式为无，可更改 data : [ {silent : false , yAxis : 50 , // 警戒线位置，这个赋值为纵轴50 label : {position : 'end' , // 文字位置 formatter : '标准供给时长' , //文字 color : 'green' // 文字颜色 } , lineStyle : {
2023-04-13 11:33:55
5661
原创 【vue3】watch侦听器的使用
计算属性允许我们声明性地计算衍生值。然而在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。在组合式 API 中，我们可以使用 watch 函数在importfrom'vue'constref''constref-)'// 可以直接侦听一个 refwatchasync=>ifindexOf1tryconstawaitfetchawaitjsoncatch'Error!
2023-03-31 21:08:50
664
原创 【vue3】数据绑定，动态渲染class与style
数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式（style）。因为 class 和 style 都是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 class 和 style 的 v-bind 用法提供了。
2023-03-28 20:45:08
4990
原创 【vue】计算属性及其缓存特性
想象一下我们有一个非常耗性能的计算属性 list，需要循环一个巨大的数组并做许多计算逻辑，并且可能也有其他计算属性依赖于 list。更改快照是没有意义的，因此计算属性的返回值应该被视为只读的，并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。更重要的是，如果在模板中需要不止一次这样的计算，我们可不想将这样的代码在模板里重复好多遍。计算属性默认是只读的。若我们将同样的函数定义为一个方法而不是计算属性，两种方式在结果上确实是完全相同的，然而，不同之处在于计算属性值会基于其响应式依赖被缓存。
2023-03-28 15:29:10
530
原创 【vue3】reactive与ref
响应式对象其实是 JavaScript Proxy，其行为表现与一般对象相似。不同之处在于 Vue 能够跟踪对响应式对象属性的访问与更改操作。
2023-03-28 11:20:21
298
原创 【vue3】响应式代理vs原始对象
只有代理对象是响应式的，更改原始对象不会触发更新。因此，使用 Vue 的响应式系统的最佳实践是 仅使用你声明对象的代理版本。这个规则对嵌套对象也适用。
2023-03-28 11:00:51
412
原创 处理数组循环中删除元素导致索引错位情况
就是很多时候我们对一个数组进行操作的时候，在for遍历的过程中删掉了一个元素，那么在删掉那个元素之后的所有元素的索引值都会减少一位，数组长度缩短一位，删完之后，正在进行的循环会继续循环下去，但是循环的索引不变，就会导致被删元素紧邻的后面那个元素跳过了循环检查。这个程序的意思就是在数组arr找出3来并把它删除，但是结果只打印了一次“抓到一个3”，就是说它只找到一个，而另外一个去哪了？而它后面那个3因为前面删掉一个，会往左挪一位，从索引3变成索引2了，而循环继续检查是从索引3开始，即对应数组中的4，直到结束。
2023-03-23 10:35:07
729
原创 【echarts】图表配置tooltip 的formatter，如何获取并显示返回值的其他字段，附示例
分别表示系列名，数据名，数据值等。在 trigger 为 ‘axis’ 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。说到底，无论是哪种方式，最终formatter的return值都是字符串，所以我们需要做的就是字符串的拼接，回调函数的方式的优势在于处理字符串更加灵活，调用属性的方式获取想要的值，可读性更高。{b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等去做拼接来展示，只能展示显示的图表看到的数据，
2023-01-14 16:09:24
20145
4
原创 ＜table＞＜tr＞不换行，使用rowpan导致表格错位
当某一个tr中所有的td元素的rowspan属性均大于1时，会发生错位情况。因为rowspan是用来占行的，如果一行里全部td的 rows 都为2，则意味着 下一tr 里应该是没有 td 元素的但是实际上 下一tr 又有td，所以这行的td没有容身之处，被挤到右边去了。如下图，第二行有两个元素，当第一行也有两个未跨行元素时，第二行就会正确显示，而不是被挤到右边。...
2022-08-04 10:51:11
1940
原创 【echarts】stack实现堆叠柱状图
同个类目轴上系列配置相同的stack值可以堆叠放置，stack只支持堆叠于‘value’和‘log’类型的类目轴上。
2022-07-27 11:26:35
6225
原创 动态样式：根据时间长短绘制色块宽度和颜色，鼠标hover显示具体信息
根据时间长短绘制色块宽度和颜色### 目标效果：根据时间长短绘制色块宽度和颜色：鼠标hover显示具体信息：——>
2022-07-26 19:38:22
281
原创 【Canvas】绘制时间轴+动态当前时间线
/一分钟的宽度，每十分钟一小格每六个小格一个大格。重要ctx赋值全局变量，以免传输中改变。//超过2030时间从2030开始显示。//计算出当前时间与830之间的差值。//绘制时间轴时间线。//绘制动态时间线。...
2022-07-25 15:55:16
1911
原创 【Canvas】绘制时钟
坐标轴x的正方形从向上开始算起。//把坐标轴的远点平移到原来的中心。*参数1要绘制的针的角度。*参数2要绘制的针的长度。*参数3要绘制的针的宽度。*参数4要绘制的针的颜色。/*绘制时针、或分针、或秒针。//一定坐标原点到原来的中心。//计算出来秒针的弧度。//计算出来分针的弧度。//计算出来时针的弧度。/*绘制时分秒针*///沿着x轴绘制针。...
2022-07-22 11:25:34
95
转载 【js】 传值!=传址 引用类型和基本类型赋值到底有什么区别
基本类型存入栈内存里，引用类型存入到堆内存（用的时候 在栈里面留了地址，地址指向堆内存中存的数据）值传递：把数据复制一份传递（基本类型）引用传递：把数据地址传递一份（引用类型）对象（包括数组)使用的是引用赋值。当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在堆中的地址，而不是堆中的数据。也就是将一个变量的数据地址，“拷贝”一份，传给另了另一个变量。这两个变量，指向“同一个地址”。因此，两个对象是联动的。concat() 方法用于连接两个或多个数组。concat() 方法不会更改现有数组，而
2022-07-13 16:04:56
124
原创 [JS] 项目中常用日期方法：setDate getDate toLocaleDateString……
代码】[JS]项目中常用日期方法setDategetDatetoLocaleDateString……
2022-07-13 14:59:46
260
转载 关于父元素min-height/postion:relative等，子元素设置 height 100% 不生效的问题
解决办法第一种： 父元素设置position: relative, 子元素设置 position：absolute第二种： 给父元素加一层 box, 给 box 添加 flex 布局第四种：给子元素添加 min-height inherit,这个的问题在于，如果父元素的高度比 min-height 高，子元素不会自动变高第五种：给父元素添加 display: flex; flex-direction: column; 子元素添加 flex: auto;这个问题在于，没法设置为50%的高度。第六种： d
2022-06-16 09:39:24
1058
原创 【vue】如何根据变量名称获取此变量？
<van-field v-model="matCode" @click="handleMatCode(matCode, 'matCode')" label="零件编号"></van-field><van-field v-model="catchMatCode" @click="handleMatCode(catchMatCode, 'catchMatCode')" label="零件编号"></van-field>-------------------
2022-05-13 11:26:32
1311
1
原创 VsCode+Node的前端环境搭建
1、下载vscode，地址：https://code.visualstudio.com/2、下载nodejs, 地址：https://nodejs.org/zh-cn/download/，完成后输入npm -version验证是否成功。3、找个前端项目编译运行试试：在项目文件夹下打开命令行，安装依赖 npm install（或者vscode开终端输命令也可以，但是我这边vscode提示找不到npm，所以直接cmd开的命令行）。4、如果出现npm install卡顿问题可以使用代理解决：先清理
2022-02-12 11:03:46
1201
原创 【Echarts】柱状图渐变两种实现方式
效果展示两种写法方法一：color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{}，{}，{}])方法二：避开new echarts，color: {x: 0, y: 0, x2: 0, y2: 1,colorStops: [{}，{}，{}]}option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Su
2022-02-09 14:44:37
9855
原创 （八）Python小甲鱼入门教程笔记——列表（Ⅲ），关于改查方法及sort、copy、reverse
列表和字符串的区别是：列表是可变的而字符串是不可变的列表Ⅲ3、改1、替换列表中的元素跟访问列表类似，都是使用下标索引的方法用赋值运算符将新的值替换进去。k = [1,2,3,'00000',5,6]# 第一种替换方式：使用索引赋值k[3] = 4print(k)# 第二种替换方式：使用切片（切片万能）k[4:]=[1001,1002,1003]print(k)================ RESTART: D:/ALIproject/pythonPractise/5_list..
2022-01-19 20:12:30
563
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人