weixin_45776308的博客

原创 组件未暴露点击事件，但是需要做额外的事情处理怎么做

文章摘要：介绍了两种事件监听方法：1）通过父元素事件委托，利用事件冒泡原理，从e.target中获取目标元素标识进行逻辑处理；2）当方法1不适用时，可直接通过querySelector获取目标元素并添加事件监听器。两种方法分别适用于不同场景，第一种适合动态元素，第二种适合明确的目标元素。

原创 生成一个文本链接

【代码】生成一个文本链接。

原创 当页面在当前页面切换路由时，只修改路由参数，导致页面报错，使用这种方法

【代码】当页面在当前页面切换路由时，只修改路由参数，导致页面报错，使用这种方法。

原创 常见的自适应处理

1.动态根字体大小将html的font-size设置为1vw（或者更复杂的视口比例），使1rem=1%视口宽度。设计稿为1920时， 1rem = 0.625vw * 1920 = 12px。通过数字计算保持内容宽高比不变。

原创 Promise(2025.6.18)

Promise相关知识

原创 图片or视频有没有加载完成

【代码】图片or视频有没有加载完成。

原创 通过粘性布局实现表格且带有固定列

1.sticky中top，bottom，right，left的值都是相对于父元素定位的（只针对父元素）1当父级元素的宽度超出可视区域时即可生效，无需考虑是否出现水平滚动条。2当父级滚动条设置为不可见时，建议添加一个模拟的水平滚动条。top: 设置父级元素的overflow为可见值，当。滚动的高度超出父级高度时，则粘性布局失效。

原创 使用nrm设置下载源，解决下载nrm时报错

手动修改 nrm 源码：找到自己文件的cli.js文件。nrm add qt-new 下载源地址。node版本：v16.13.1。

转载 原型继承和类继承区别

JavaScript中的原型继承和类继承之间的区别_原型继承 与类继承区别-CSDN博客

原创 原型的理解

可以理解为一个对象直接控制台打印出来时显示的是JavaScript 中所有的对象都有一个内置属性，称为它的（原型）。它本身是一个对象，故原型对象也会有它自己的原型，逐渐构成了。原型链终止于拥有null作为其原型的对象上。指向对象原型的属性并是prototype。它的名字不是标准的，但实际上所有浏览器都使用。访问对象原型的标准方法是。二.设置原型。

原创 实现一个异步队列，带有回调函数

【代码】实现一个异步队列，带有回调函数。

原创 el-table表格滚动到指定的位置

1.通过 :row-class-name="rowClassGet" 属性给每一行添加不同的类名。2.获取上面的类名，进行跳转。

原创 通过id滚动到指定的地方

document.getElementById(id)?.scrollIntoView();

原创 换行实现复制功能

【代码】换行实现复制功能。

原创 通过层级选择器（el-cascader）修改的不带多选框的，但是可以实现多选的功能

2.通过组件提供的插槽自定义点击事件，将点击到的值进行手动处理，渲染到页面。主要方法 dataNode。1.去除原本的el-checkbox，通过css隐藏。

原创 加载图片进行懒加载处理

【代码】加载图片进行懒加载处理。

原创 批量添加时，两个选择框为一组，不能选择一模一样的值，将不符合条件的值禁止设为禁止点击

【代码】批量添加时，两个选择框为一组，不能选择一模一样的值，将不符合条件的值禁止设为禁止点击。

原创 无法展示自定义头部问题

原创 元素实现吸顶

直接设置元素需要吸顶的距离，

原创 监听元素的变化

【代码】监听元素的变化。

原创 给el-select的change事件传自己想要的参数

例如：校验函数 正常使用时我们会只传前面三个参数，后面想获取当前的index的值，必须把自身的四个参数全写，第五个参数index才是我们自己的参数。return callback(new Error("下架时间不得早于上架时间"));return callback(new Error("请选择当前以后的时间"));可以写成箭头函数： @change="(e) => changeUp(e, is)"placeholder="选择日期时间"需要把该函数的参数全部写完之后，后面的参数才是自己传的参数。

原创 刷新页面时记住当前的地址

【代码】刷新页面时记住当前的地址。

原创 加载html代码

2.使用iframe中的srcdoc属性加载。1.vue中适应v-html。

原创 iframe判断加载是否完成添加loading或者取消loading效果

2.2 将src置空后会立马又调一次这个加载方法，但是此时iframe的内容为空白，所以判断src是否为空值再进行操作，比如我这个里面是加载完成后将loading效果去除。2.1在来回切换iframe得src时，有的iframe已经加载完成却没进入到加载完成得方法中，解决方法：把src置空后调用此方法，然后把src的赋值写在方法的最后面。1.判断iframe是否加载完成的方法。

原创 setInterval在指定条件下清除自身

【代码】setInterval在指定条件下清除自身。

原创 监听滚动条页面时使用window时不生效

在mounted生命周期里面加。

原创 el-table进行列的拖拽

代码重点：可以参考以下代码（不是拿来就可以用的,需要摘取重要代码的内容）row-key="id" 必须添加且唯一。主要是initSort()方法。1、使用Sortable插件。el-table添加一个id。引入到当前使用的页面。

原创 el-switch进行二次确认

将el-switch的v-model 换成:value，让数据单向流动，这样点击el-switch的时候就不会直接修改el-switch的绑定值

原创 通过循环生成多个echarts图表并实现自适应

不推荐使用grid布局，不清楚为什么左边一列的不会自适应，换成flex布局就可以了。主要方法借助中的getInstanceByDom方法。

原创 将el-table数据导出csv各式，纯前端实现

如果想要将表头替换为文字，可以重新遍历循环tableData，例如将【column1】转化为【第一列】使用: 将 modifiedTableData 替换成自己的table表格数据即可。使用json2csv 插件。

原创 前端将页面转化为图片---进行下载导出、打印等功能

1.需要实现一个将div页面的东西导出,使用到了html2canvas。2.下载html2canvas。3.导入使用到的页面。4.创建图片基础应用。

原创 el-tree 懒加载数据，增删改时局部刷新实现

主要思路：将展开的层级的node保存当curNode中，在进行添加刷新后调用partialRefreshpartialRefresh（）方法【下面代码】模拟一次节点展开事件，加载重命名后的新数据；的展开事件，可以设置node.parent.loaded = false;node.expand() // 新建子节点是刷新一次本节点的展开请求，而重命名和删除则需要刷新父级节点的。2.defaultProps 需要设置isLeaf: 'isLeaf',去除最后一层孩子节点的展开图表。2.增删改时实现局部刷新。

原创 01.创建vue项目

转载 01.浏览器审查hover元素

2、开发者工具中有一个Sources，里面有一个暂停功能，打开开发者工具后，先把tooltip框展示出来，再用快捷键F8暂停，tooltip框就不会消失了，可以一直查看样式。1、在浏览器中f12打开开发者工具，鼠标移入到元素上 显示出来tooltip框后，使用ctrl+shift+c快捷键打开小箭头就可以看到tooltip框样式。转载自：https://blog.csdn.net/qq_37815596/article/details/120208247。

原创 流程图实现，基于vue2实现的流程图

flex布局 + 伪元素实现竖直的连接线+组件递归。

原创 递归遍历树结构数据（js，vue）

【代码】递归遍历树结构数据（js）

原创 字符串转为数字，使用Number和parseInt会出现精度丢失，使用BigInt

【代码】字符串转为数字，使用Number和parseInt会出现精度丢失，使用BigInt。

原创 对于某些组件没有暴露的属性怎么查看

avue-input-icon组件时,鼠标触摸时显示了一个删除图标，但是删除不起作用,修改其样式进行隐藏不起作用。clearable 属性，修改clearable值。解决方案：通过ref获取其属性。结果：可以查看里面有个属性。

原创 el-tree-select中的编辑回显问题

render-after-expand="false" 属性，才可以进行编辑回显label的值，

转载 时间段选择，时间轴选择，时间颗粒度为5分钟（vue）

时间段选择