- 博客(60)
- 收藏
- 关注
RSS订阅原创 vue3 + ts中，element-plus组件通过ref引用组件内方法，显示提示
这是因为 ref() 没有指定泛型，没有呢指定泛型，ts就默认为泛型类型就是 any，对于 any 任意类型，是无法给出提示的。而 ElForm 是一个模板，ElForm在template中应用出来的是一个组件实例，所以这里的泛型类型应该是一个组件实例。就会想到直接用element-plus提供的类型，就有了上述代码，但是ElForm是一个值，不是一个类型，根据错误提示，就可以用 typeof 去获取类型。这里需要理解什么是模板（或class或构造器），什么是实例。所以这里就需要指定一下泛型类型。
2024-05-15 14:40:26
384
原创 可用在vue自动导入的插件unplugin-auto-import
配置项 dirs 配置自定义插件的路径plugins: [}),],},在路径 ./src/api 下的所有插件都导入。注意：不推荐将自己的方法通过这种方式进行引用，因为定位不了方法的在那个文件中，自定的方法或插件，最好还是在每个文件中单独通过import引入，像框架中的api可以通过这种方式导入，架构中api是常用的，每个组件都能用到，自定义的只能在特定的逻辑或组件中使用。
2024-05-15 13:21:11
333
原创 解决 vue-antd-jeecg 管理系统中 online生成的在线表格固定高度
再说说antd中a-table表格组件，它是通过定义scroll属性来控制横纵向滚动条的，但是低代码生成的表格，它通过@jeecg/antd-online-mini这个插件来根据配置项来构建表格，但是没有指定scroll固定值。全局搜索 antd-online-mini，将所有的引用antd-online-mini都替换成上述代码，我的项目只有在src/utils/util.js中动态生成菜单路由的时候有使用。用法：将OnlineForm.umd.min.js放到src中的一个文件中。
2024-04-02 14:47:28
369
原创 解决 Ant 版本 1.7.8 组件中 a-table 固定列导致表头错行问题
但是与正常显示的表格样式对比可以看出，问题出现在 margin-bottom 上，正常显示的表格样式 margin-bottom 的属性值是 -8px，但是具体造成这个现象的原因，没有深入细追。这里说明一下为什么不能修改 padding-bottom 的值，这个方法要用在每一个表格组件中，错行和正常显示的 padding-bottom 的值都是0，如果修改 padding-bottom 会影响正常的表格显示，就会出现以下现象。但是这个问题，有可能不是必现的，像我这边，本地没有问题，只在服务器上有问题。
2024-03-25 18:56:01
733
原创 JavaScript 深度克隆
通过 JSON 进行转化，但是这中方式有局限性，对于包含循环引用或不符合 JSON 的数据类型（如 Map 和 Set，Blob 等 ） 的更复杂对象时，是有很多不足之处的。而现在，JavaScript 内置了一个 structuredClone() 的方法， 此方法提供了一种简单有效的方法来深度克隆对象， 且适用于大多数现代浏览器和 Node.js v17 以上。在JavaScript 开发中，很多场景会遇到，引用类型的深度克隆。在 ES5 时，大部分开发者都用使用以下语句进行深度克隆。
2024-03-11 13:41:13
416
原创 vue provide 与 inject使用
在vue项目中，如果遇到跨组件多层次传值的话，一般会用到vuex，或者其他第三方共享状态管理模式，如pinia等，但是对于父组件与多层次孙子组件时，建议使用provide 与 inject，与之其他方式相比，简单方便。
2024-03-11 11:45:04
417
原创 vue中动态引入图片
可以看出普通加载的图片会被编译成/img/img.13eb2ff7.jpeg这种路径，而动态加载的还是原始路径，这是因为webpack或vite，会将代码编译，最终在内容内构造出一个类似于打包后的dist文件，而就会将普通方式图片路径编译转化成dist文件夹下img文件夹下的资源。很多时间，不管是vue2，还是vue3开发中都会遇到，动态渲染图片的功能，但是为什么我们直接将图片的路径直接赋值给变量的时候，图片渲染不出来，而通过require引入加载图片后却能正常渲染呢？（以下代码为vue3，vue2一样）
2024-02-29 15:41:05
1834
原创 Vue3 watch 与 watchEffect 用法
参数一是一个副作用函数，在这个副作用函数，会收集在这个函数中，用到的所有reactive，ref等声明的变量，作为监听触发依据，但必须是具体值，比如，如果是ref声明的变量必须.value，直接变量是不行的，它只会在初始化的调用一次，在以后的数据变化是监听不到的。所以就可以换种想法，只要在watchEffect里用的副作用，都可以被监听到，如下，不管是num.value还是data.a的值发生变化的时候，都会监听到。第三种 监听多个值，参数一返回的是一个数组，参数二对应每一项也是一个数组。
2024-02-27 16:19:39
579
原创 Vue3 isProxy，isReactive，isReadonly 三者解析
注意：它只对通过 reactive，readonly，shallowReactive，shallowReadonly 这四个方法包裹的数据返回true，对于 ref 以及通过 new Proxy 代理的数据返回都是false。但是如果 reactive 包裹的是一个 readonly 的数据的话，那么 isReadonly 为true，isReactive 为false。原因是：readonly 包裹的数据是一个只读的数据，不能在通过reactive方法进行代理。作用：判断当前数据是否为代理数据。
2024-02-27 11:16:45
558
原创 Vue3 toRaw 与 markRaw
作用：标记数据不可变为代理数据，也就是reactive，readonly， shallowReactive 或者 shallowReadonly 这四个方式不能将markRaw标记的数据转为响应式数据。作用：返回将reactive，readonly， shallowReactive 或者 shallowReadonly 这个四个方法包裹的原始数据。toRaw返回的数据与包裹之前的数据一个地址值数据，也就是两个数据是相等。注意：toRaw不能乱用，因为会使数据失去响应式。
2024-02-27 10:08:32
455
原创 JS如何判断普通函数与异步（async）函数
但是异步（async）函数的原型链上有一个Symbol(Symbol.toStringTag)标记，这个标记会影响Object.prototype.toString.call的输出，就可以看出。可以看出两者原型链，普通函数的原型链指向的是一个函数，异步（async）函数原型链指向的是一个AsyncFunction，这时就会想到通过判断原型链的方式判断，就如下图。但是不能通过typeof来判断，typeof对于两者都是‘function’。这里可以先打印一下普通函数和异步（async）函数的结构，如下图。
2024-02-15 11:09:58
500
原创 js toFixed函数精度问题
在使用toFixed函数会出现精度缺失问题，如下图在2.55与1.45保留1位小数时，正常情况下应该为2.6与1.5，而toFixed函数得出的是2.5与1.4。这和计算机中小数存储有关。其实这三个方面都不精确。
2024-02-14 19:21:55
732
原创 JS取余运算符 %，ES2023 新增数组方法Array.at
有一中情况是，在数组中负数下标的话，应该获取到数据为length + 负数下标的数据，在es2023中，新增了一个数组方法at()，用来根据下标获取数据，但是通过取余的方式就可以用以下代码。注意，两个操作数取余是有循环范围的，这个范围为 0 - 第二个参数 - 1。取余运算符（%）的作用就是用来两个操作数进行相除运算之后的余数。而如果第一个参数是一个负数的话，则范围为0 到 -第二个参数-1。对于6取余的话，得到的取余数据就会一直在0-5之间进行循环。所以可得一个自定义at方法。
2024-01-18 16:17:02
442
原创 Vue3+el-table实现甘特图
这里也是根据开始时间和结束时间，但是会判断过滤掉时间中没有时分秒的数据。在Worker方法中会返回当前列所涉及到的列数据，并在handleData方法中进行数据开始时间，结束时间跨度与列时间跨度是否有交集，如果有，则在该条数据中新增字段，该字段就是生成列的数据中key属性值。在根据时间动态生成列时，由于开始时间与结束时间跨度过大时，计算列逻辑，会堵塞js线程，甚至卡死浏览器。具体实现逻辑：通过不断循环累加开始时间，与结束时间进行比较，生成所需要展示的列。进度列，可以通过设置天或小时，切换不同列显示类型。
2023-12-18 16:46:54
1044
原创 canvas精灵图动画-基于Vue3
这张精灵图分辨率为6876 × 5230，而横向最多有12个图像，纵向最多有10个图像，所以单个图像的分辨率为（6876 / 12 =）573 × （5230 / 10 = =）523，所以就可以定义如下变量。我们通过下拉框选择切换动画，拿到的数据是key数据，现在数据是一个数组，通过find或者filter有点麻烦，那我们就把数据格式化成Map形式，key就是数组中 key，这就有了如下方法。但是发现这太简单，那我们就一种思路。今天，我们实现如下图一个精灵动画，通过选择不同的动画类型，实现动画切换。
2023-12-13 13:52:16
309
原创 Js时间日式格式化工具类
使用正则表达式和ES6中class封装一个时间日期格式化工具类。通过回调函数的方式，给调用者提供灵活的外部处理方式。使用定时器实时获取当前日期。
2023-12-01 10:59:50
48
原创 vue自定义指令之激活指令（v-active-style）
用法：接受一个伪数组，数组第一项为：样式，第二项为：激活依据，可以是一个方法（必须返回boolean值，或者一个表达式）v-active-style指令。Vue2中的指令钩子。
2023-11-30 15:45:58
88
原创 Java 企业微信群机器人推送信息和Excel表格
在企业微信群中新增一个群机器人，并获取到webhook连接地址。三、通过easyExcel形成file文件。EasyExcel依赖。一、企业微信推送工具。二、Http请求工具。
2023-11-24 13:54:30
1013
2
原创 js + canvas 签名插件
pageX，pageY：鼠标指针的位置，文档的坐标。（也就是相对于浏览器窗口），会受css样式偏移量的影响，如padding，margin等。在init方法中构建canvas实例，并绑定相应的鼠标事件，通过单独的事件绑定方法，将三种鼠标事件处理逻辑分割开来。鼠标按下时，获取当前的当前的坐标，并记录当前开始坐标，在此设置线样式。offsetX，offsetY：鼠标相对于事件源元素的x，y坐标。鼠标移动时，记录每一次移动的坐标信息，也就是路径点位信息。sign.js插件代码。
2023-10-01 17:56:18
182
原创 vue+vant 微信小程序上传图片（上移，下移，旋转，旋转）
图片旋转是通过 Cropper.js 插件进行实现的。以下是用到的公共方法 index.js，直接复制使用。这里提供一个功能方法，注意 axios 引入。功能包括上移，下移，旋转，旋转。这里使用的组件是 vant。
2023-07-31 18:54:15
806
原创 vue中微信分享好友，朋友圈功能
title : name , // 分享标题 desc : desc , // 分享描述 link : link , // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl : imgUrl , // 分享图标 success :() => {Toast('发送好友分享模板设置成功') } , fail :(err) => {// 设置失败 Toast('发送好友分享模板设置失败') } }) wx . updateTimelineShareData({
2023-07-31 18:38:02
635
原创 vue中组件嵌套问题
模块系统发现它需要 A，但是首先 A 依赖 B，但是 B 又依赖 A，但是 A 又依赖 B，如此往复。这变成了一个循环，不知道如何不经过其中一个组件而完全解析出另一个组件。官方给的解决方法就是异步加载组件。将上面的 import 加载的方式全部变成异步加载，代码如下。
2023-06-14 10:04:53
308
原创 JS 跨标签页或窗口通信
5、存储数据类型只能是字符串，引用类型会转化为相应的数据类型，比如对象存储的是[object Object]；2、数据大小有限制，与localStorage有关，不同的浏览器不一样，一般5M；3、只能旧的窗口发送信息，新窗口接受信息；2、后端可以控制是否对哪一个设备发送消息；3、发送信息的窗口不会触发监听事件；1、兼容性低，与worker类似；1、需要前后端需要一直保持通讯；4、只有数据改变了才能监听到；1、对数据类型传输没有限制；2、对数据类型传输无限制；1、必须同域，不可跨域；1、发送窗口也能监听到；
2023-05-25 21:28:28
610
原创 JSP前后端不分离-JQuery+Iframe+JQgird dom缓存导致列表跳动现象问题。
初次加载时，iframe根据URL渲染jqgird表格查询正常显示，但是二次打开时，这时dom中还存在上次加载iframe界面和数据，打开后，iframe重新渲染，这时就会出现新老数据交互消失，显示的调整现象。监听对话框关闭事件，对话框关闭时，清空iframe url，这时，iframe就没有上次的界面数据。
2023-05-22 17:31:36
105
原创 H5界面打开唤醒移动端APP应用程序
H5界面打开唤醒移动端APP应用程序4、补充检测移动端是否已经安装app，若未安装，则下载。通过监听visibilitychange，浏览器页面是否显隐切换。
2022-08-22 19:25:07
1910
原创 Tomcat部署前端以及jar包部署
Windows 安装1、Tomcat 安装请查看详细安装地址2、部署前端将打包好的前端项目Tomcat文件中webapps文件下。启动Tomcat服务后访问地址为：http://localhost:8080/dist/index.html。3、打包后端为jar// 打包命令mvn clean package -DskipTests在target文件下找到jar包。将jar包放到想要放到的目录下，在cmd中运行。java -jar xxx.jar如果有乱码问题可运行以下命令，指定
2022-04-21 13:19:42
4897
原创 vue表格数据优化
table表格加载大量数据缓慢的处理方式原理，将大数据分批异步渲染到界面中init(data) { if (!data.length) { return; } requestAnimationFrame(async () => { const num = 100; this.data.push(...data.slice(0, num)); this.setData(data.slice(num)); })},.
2022-04-13 14:28:59
27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人