- 博客(34)
- 收藏
- 关注
RSS订阅原创 Vue项目中实现自定义连线图
在Vue项目中实现自定义块元素组成的连线图，可以使用Leader-Line库。该库是一个轻量级JavaScript工具，专为在网页上创建元素间的引导线而设计，支持高度自定义且不依赖大型框架。实现步骤包括：首先确保Node版本为16.20.2，并通过npm或yarn安装Leader-Line 1.0.8版本。接着，将leader-line.min.js文件复制到项目中的指定路径，并在需要的地方引入该文件。最后，通过LeaderLine API创建连线，连接不同的DOM元素。此方法适用于需要展示元素间关系的场景
2025-05-09 16:41:58
365
原创 我的创作纪念日
2021年的某个瞬间，当我第N次在掘金等技术博客网站上搜索“Video.js组件在Vue项目中的使用时，突然意识到：技术人的成长，不应只有解决问题的瞬间，更应有沉淀思考的轨迹。
2025-04-23 16:26:21
299
原创 前端根据后端返回的excel二进制文件流进行导出下载
使用时把接口/api/file/export换为自己的接口地址即可，记住一定要加返回类型responseType: ‘blob’，否则可能造成文件无法正常打开。
2025-04-17 16:10:37
535
原创 el-input 限制只能输入负数、正数或2位小数的数值
validateNumberKeypress可直接复制进行使用，最好加上@click.native.stop防止事件冒泡。
2025-04-17 15:54:37
468
原创 基于vue2+ElementUI的el-tree封装一个带搜索的树形组件
TreeSelect组件可以直接Copy进行使用，其中common-simple-input为图中el-input输入框的蓝底亮框样式，可根据自身需求进行样式自定义开发。
2025-04-15 15:46:57
499
原创 vue2中基于el-select封装一个懒加载下拉框
懒加载组件可以直接Copy进行使用，然后根据具体接口情况修改loadData方法中fetchData的请求参数和返回结果即可，其中增加了popper-class=，可以处理页面引入多个懒加载组件时无法准确获取下拉框DOM元素。
2025-04-15 15:31:34
425
原创 前端预览pdf文件流
2、创建预览方法（具体使用时将axios的请求路径替换为你的后端下载地址）把后端返回的pdf文件流转为blob路径，利用浏览器直接预览。3、在你所需要的地方调用previewFile方法。后端接口返回pdf文件流，实现新窗口预览pdf。
2024-11-22 15:39:37
1718
原创 在vue中，根据后端接口返回的文件流实现word文件弹窗预览
利用docx-preview实现word文件弹窗预览，以node版本16.21.3和docx-preview版本0.1.8为例。docx-preview官网地址：https://www.npmjs.com/package/docx-preview。弹窗预览word文件，因浏览器无法直接根据blob路径直接预览word文件，所以需要利用插件实现。3、引入docx-preview和axios。5、创建预览方法previewFile。1、安装docx-preview插件。5、在所需地方调用预览方法。
2024-11-22 15:25:12
1295
原创 前端把dom页面转为pdf文件下载和弹窗预览
以上便是完整的利用html2canvas和jsPDF实现把页面转为pdf文件实现下载和预览的功能，不足的地方请多指教。2、在utils公共工具函数文件中引入html2canvas和jsPDF。把dom元素生成的页面生成pdf文件，实现下载和预览pdf文件。利用html2canvas和jsPDF实现把页面转为pdf文件。1、给需要转换为pdf文件的dom增加id。3、创建具体实现方法函数htmlToPDF。4、调用htmlToPDF方法。
2024-11-22 14:57:42
738
原创 Echarts 点击事件无法使用 this 或者 this绑定的数据无法获取
给echarts绑定自定义点击事件时，无法使用this，并且无法获取到this绑定的数据。增加：const _this = this;
2024-10-22 09:09:15
325
原创 在ie edge 浏览器中，uni-easyinput 组件类型为password时，出现两个小眼睛图标
在/uni_modules/uni-easyinput/components/uni-easyinput.vue组件中样式中增加以下代码。在ie edge 浏览器中，uni-easyinput 组件类型为password时，出现两个小眼睛图标，此为官方组件已存在的bug。
2024-06-17 21:19:07
607
原创 想要安利给所有人的开发工具——通义灵码
你还在埋头苦写基础函数，基础组件等代码吗？今天给大家推荐一款由阿里云研发的插件——通义灵码，这是一款可根据当前代码文件及跨文件的上下文，为你生成行级/函数级代码、单元测试、代码注释等。沉浸式编码心流，秒级生成速度，让你更专注在技术设计，高质高效地完成编码工作。这个插件真的强烈推荐呀，作为一名前端开发，它真的帮助我提升了在项目中的工作效率，可以帮我生成许多比较基础的函数方法和组件，小伙伴们快试试吧~点击插件中心，搜索TONGYI Lingma， 点击安装即可。
2024-01-04 14:53:12
721
1
原创 url请求参数带有特殊字符#，%，=等特殊字符时，参数被截断处理
当路由请求参数带有浏览器url中的特殊含义字符时，参数被截断，无法正常获取参数。将特殊字符进行编码转义。
2023-11-17 15:01:30
1399
原创 el-date-picker 禁用日期后，【此刻】按钮点击无反应
使用el-date-picker组件，禁止选择未来日期后，【此刻】按钮点击无反应。
2023-07-03 14:06:42
3426
4
原创 vue.js + el-table 实现键盘上下键控制聚焦行指定单元格编辑——2023/04/18 14:25:00
利用keyup事件监听键盘事件，给待聚焦单元格绑定keyup事件，并动态绑定类名（用下标作为类名，以便后续可通过下标类名找到对应dom元素，实现聚焦）；实现键盘上下键控制聚焦到列表行某个单元格，高亮显示当前聚焦行并编辑单元格。【下键】：自动聚焦下一行，如果当前行为列表末行时，聚焦回到首行；【上键】：自动聚焦上一行，如果当前行为列表首行时，聚焦回到末行。
2023-04-18 15:47:22
2139
原创 Vue切换路由，页面回到上一次缓存的滚动位置（代码量少，通用有效）
本文所提供的方法可适用于大多数vue工程项目，可解决vue-router 所提供方法 scrollBehavior 和 keepAlive缓存滚动位置不生效等问题。
2023-04-14 11:25:48
1414
2
原创 前端Node+Vue项目, 把本地8080端口改为https请求
【代码】前端Node+Vue项目, 如何把localhost请求协议改为https协议。
2023-03-20 17:41:28
587
原创 Node.js请求https协议接口报错Error: self signed certificate
前端用Node.js做中转时，请求后端https协议的接口，出现Error: self signed certificate报错。
2023-03-20 15:45:51
1714
原创 Vue.js 基于el-button封装一个防抖节流按钮
实际开发中，为了防止用户多次按钮点击触发接口请求，例如单据提交等业务场景，可对el-button进行二次封装，利用防抖节流原理实现。
2023-03-15 16:57:09
1809
原创 前端基于Node.js和webpack搭建https服务
1.准备好密钥和证书文件。2.引入https和 fs服务。。3.读入密钥和证书文件。4.创建HTTPS服务器
2023-03-15 16:24:00
412
原创 Vue项目一些有用的配置文件——代理跨域、关闭Eslint校验、设置别名
在根目录下新建vue.config.js文件。在根目录下新建jsconfig.json文件。
2023-03-09 14:44:24
486
原创 el-timeline嵌套el-timeline使用时，子级el-timeline节点时间线不显示
给嵌套使用的子级el-timeline组件的el-timeline-item增加属性区分当前节点是否为最后一个节点，一般来说接口会返回一个状态来区分当前节点是否已审批，顺序排列时，未审批节点即为最后一个节点，利用这个思路我们给子级el-timeline的末级节点单独书写样式来解决这一问题。父级el-timeline的第三个el-timeline-item在elementUI原生样式中会自动定义为末级节点，其中末级节点样式影响了子节点样式，故子节点时间线不显示。待实现效果如下图所示。
2023-02-08 17:48:28
2417
原创 Vue踩坑之 el-select下拉框多选，选择后赋值成功，输入框不显示选中的值
问题描述：多选下拉框，选中列表中的选项，但输入框不显示已经选中的数据并且下拉框中已选中的数据不是选中状态。问题原因：Vue 无法监听动态新增的属性的变化。问题解决：方法一： 在el-select选框组件中绑定change事件，如下:changeData() { this.$nextTick(() => { this.$forceUpdate() })}方法二：change事件中使用$set来对属性赋值，如下:changeData(val) { this.$set(t
2022-02-23 17:44:39
5181
原创 Element UI 中el-input 框回车触发页面刷新问题及解决方案
问题描述：输入框中按回车按钮，页面重新刷新问题原因：当 el-form 内只有一个 el-input 时，在输入框内回车就会触发表单提交的默认事件解决方案：在el-form中加@submit.native.prevent阻止这一默认行为其中.native 表示对一个组件绑定系统原生事件 .prevent 表示提交以后不刷新页面例如： `<el-form label-width="100px" label-position="right"
2022-02-11 17:31:43
2534
4
原创 el-tree使用setCheckedKeys清空树节点不生效
问题描述：在切换下拉选框的change事件中使用this.$refs.tree.setCheckedKeys([])清空目标树已选择节点，但不生效。问题解决// 清空 clearAllNodes: function() { this.$nextTick(function() { this.$refs.tree.setCheckedKeys([]) }) },关键：使用this.$nextTick()在清空所选树节点结束之后执行延迟回调..
2021-10-13 10:07:50
5536
原创 this.$el.querySelectorAll is not a function报错解决
问题描述使用el-tree时，报错this.$el.querySelectorAll is not a function，导致树无法渲染问题解析参考如下代码片段 <el-tree :data="treeData" show-checkbox node-key="id" ref="functionTree" ></el-tree>此报错多为el-tree绑定的data数据不对，数据错误可分为以下两种：
2021-09-17 14:35:07
20089
1
原创 Http请求api时路径中多了%E2%80%8B字符
Http请求api时路径中多了%E2%80%8B字符原因从Swagger文档中中复制里面的解耦路径带了空白url编码（空白编码没有宽度）解决办法方法一：手动输入地址方法二：使用replace(/%E2%80%8B/g, “”)替换掉多余字符...
2021-08-13 13:51:51
3622
原创 Git常用命令速查手册：从入门到高效协作
掌握这些命令组合使用，可以应对90%的日常开发场景。建议将本手册保存为cheatsheet.md放在项目文档中，团队新成员加入时作为必读材料。记住：好的Git使用习惯是团队协作的基石！
2021-07-09 11:23:37
102
1
原创 基于Node.js实现简易留言板
一、效果图二、功能点描述·发表提交留言内容·留言列表展示留言内容·实时展示留言发表时间三、具体实现安装art-template依赖包npm install art-template留言板首页<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge
2021-06-16 14:05:11
1514
2
原创 CKEditor富文本编辑器踩坑-上传视频后无法删除视频和获取鼠标编辑状态光标
问题描述在CKEditor富文本编辑器中成功上传的视频，如果视频前后没有任何内容，视频无法使用退格键正常删除并且无法获取鼠标编辑状态光标。修复办法在创建的Video标签后添加一个换行标签即可代码如下<div class="ck-media__wrapper"><video class="video-js"><source src="${ item.attachUrl}" style=" width: 100%;height: 100%; type="video/mp4
2021-05-31 14:28:11
1592
2
原创 Video.js组件在Vue项目中的综合使用详解（多个视频+倍速播放）
Video.js —— 一款开源且功能丰富的web视频组件Video.js在Vue项目中的综合使用详解（多个视频+倍速播放）开发中，使用video标签自带的属性难以达到我们实际所需要的效果；例如视频的倍速播放功能，利用原生代码重写一个视频标签又太过于繁琐（PS:主要是懒）。在这里，向大家推荐一款很好用的组件video.js，这是一个开源的web视频组件([video.js官网](https://videojs.com/))，其使用基于html5的video标签，同时支持HTML和Flash视频，下面向大
2021-04-21 18:20:33
10276
11
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人