- 博客(23)
- 收藏
- 关注
原创 扫码枪踩坑指南
仓储、收银、快递等方面扫码枪都应用的非常广泛,所以也来尝试接入一下扫码枪,这篇文章是接入成功后的踩坑指南综合1和2,最省心的办法就是二维码内容只有字符和数字,那就万无一失,或者每次扫码前确认输入法是英文(扫码枪设置使用虚拟键盘,不然识别到汉字后电脑输入法可能会自动变为中文输入法)。这样在保证需要扫码枪的页面没有输入框,就可以写一个看不见的输入框,在扫码时自动获取焦点,之后直接取输入框的值就行,当然扫码结束后要清空隐藏输入框内容。
2024-03-29 11:09:49
1663
原创 Element UI 表格拖动到左侧树
随着互联网的不断发展,网页的便捷性操作也越来越重要,方便快捷的操作方式越来越受人青睐,本文就介绍了表格拖动到树的操作逻辑,方便用户修改表格数据的所属。前期花费了大量时间去使用各种VUE拖动插件(vuedraggable、sortablejs之类),但都无法满足我的需求,最后还是原生JS比较靠谱,才有了今天这篇文章。以上就是我的表格拖动到左侧树方案,有不同的见解或者疑问,欢迎留言。
2023-09-15 09:51:24
880
原创 VUE页面导出PDF踩坑指南
导出方案用的是html2canvas+jspdf,简单的导出很容易实现,但是也会有一些问题:一是不同分辨率下导出内容不同的问题,这个需要固定导出内容的宽度;二是会遇到页面内容被切割的问题,因为导出原理是先使用html2canvas将DOM元素转换为canvas,再利用 canvas 的 toDataURL 方法输出为图片,之后使用jspdf添加图片生成PDF。图片生成PDF过程中必然用统一的格式切割图片分页,所以内容很容易被切割;
2023-08-11 16:01:40
3277
1
原创 图片预览插件Viewer.js的使用
一、相关资源Viewer 下载地址: https://github.com/fengyuanchen/viewerjs其中docs文件夹下是使用演示:PS: 图片预览依赖的资源可以使用docs文件夹下css文件夹下的viewer.css和js文件夹下的viewer.js,也可以使用dist文件加下压缩后的资源:viewer.min.css和viewer.min.js二、使用介绍简单使用如下:<!DOCTYPE html><html lang="en">
2022-05-17 17:03:36
2460
原创 Element UI 踩坑指南
一、ElementUI 弹框内图片预览遮罩显示到了最外层只需要在图片预览弹框组件上添加:append-to-body="true"就行 <el-upload ref="licenceUpload" action="xxx" :limit="6" multiple list-type="picture-card" :http-request="uploadImg" :before-upload="beforeAvatarUpload"
2022-04-28 15:56:46
1255
原创 鼠标事件穿透遮盖物
一、鼠标事件穿透遮盖物正常来说当有点击事件的元素被遮盖时,点击事件是不生效的,如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
2022-04-21 10:17:23
573
原创 海康web插件视频播放异常
海康web插件视频播放异常解决方案下载海康插件VideoWebPlugin.exe后,低版本谷歌可以正常播放视频,高版本不行因为新版本google内核安全策略升级,公域资源不能访问电脑私域资源,造成视频不能播放。处理方案:使用出现问题的浏览器访问如下地址 chrome://flags/#block-insecure-private-network-requests禁用该安全策略...
2022-03-23 11:21:45
4669
原创 css多边形区域显示
可以使用css中的clip-path属性将内容区域裁剪成圆形、椭圆形、多边形。代码如下:<style> .box { width: 200px; height: 200px; margin: 10px 40px; background: #4FA6E5; } /* 圆 :必须是正方形,否则长边无裁剪*/ .round { .
2022-03-23 09:49:59
413
原创 vscode 代码格式化
1、安装vscode 扩展 Beautify2、文件=>首选项=>设置,打开设置找到扩展里的Beautify在settings.json中编辑{ "editor.fontSize": 16, "workbench.colorTheme": "Visual Studio Dark", "workbench.startupEditor": "newUntitledFile", "files.associations": { "*.wxml": "html"
2022-03-11 11:16:21
546
原创 前端踩坑指南
一、使用原生js开发分页功能// 分页逻辑const pagination = function (option, fun) { this.parentId = option.id; //容器 this.pageSize = option.pageSize || 1; //每页显示多少条 this.totals = option.totals || 0;
2021-12-07 18:50:39
940
原创 JS 正则校验总结
1、电话号码校验复杂校验: /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/普通校验: /^1[3|4|5|6|7|8|9 ][0-9]\d{8}$/2、邮箱校验 /^([a-zA-Z0-9]+[_|_|\-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,6}$/...
2021-11-30 10:01:53
441
原创 VUE踩坑指南
一、环境变量添加没反应添加环境变量VUE_FILE_BASE_URL之后,暂停服务重新运行,但是使用console.log(process.env)打印没有发现这个字段。本来以为是哪里还需要配置一下,结果。。。只有以 VUE_APP_开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中????????????二、后续补充。。。.....................
2021-11-25 09:18:47
986
原创 动态路由踩坑指南
一、动态路由添加没反应动态路由的添加一般是在permission.js文件中 vue router导航守卫中进行配置,添加动态路由router.beforeEach((to, from, next) => { NProgress.start() if (getToken()) { /* has token*/ if (to.path === '/login') { next({ path: '/' }) NProgress.done()
2021-11-23 13:24:19
1309
原创 常用IP解释
常用IP解释0.0.0.0 本机所有可用ip - 启动监听的时候使用这个表示监听所有网卡的所有可用ip127.0.0.1 本机ip - 启动监听之后只有127.0.0.1能够访问到,本机之外该服务不可见(当然有的服务器软件会优化掉这个,使本机之外也可见)localhost 本机默认域名 - 会走本机的dns解析系统,一般操作系统默认的localhost指向127.0.0.1255.255.255.255 局域网广播地址,向该地址推送数据包,局域网内所有的主机都会收到(范围只到上级网关)...
2021-11-04 09:49:20
236
原创 JS文件流下载
一、接口校验下载前最好先校验接口是否可以正常下载,这里使用的是: postman正常情况下,点击 Send 按钮会返回如上图所示的文件流,鼠标滑过 Send 按钮右侧的箭头会显示 Send and Download 按钮,点击此按钮会直接下载文件(文件后缀不正常时,手动更改就好了)二、通过JS下载文件 export function downLoadPdf(query) { return request({ url: 'xxx/download', method:
2021-09-30 16:20:10
5534
原创 VUE使用Echart,并保存为图片
一、VUE使用Echart1、安装echarts依赖 npm install echarts -S 或者使用淘宝的镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install echarts -S2、在main.js中全局引入 // 引入echarts--- 这是全部引入 import echarts from 'echarts' Vue.prototype.$echarts = ec
2021-09-28 14:43:43
2239
2
原创 JS数组去重方法
方法一:ES6中的Set 对象存储的值总是唯一的,可以利用这点进行数组去重let arr = [1,2,2,3,3,3,4,4,5,6,7,8];let arr2 = Array.from(new Set(arr)); console.log(arr2); //[1, 2, 3, 4, 5, 6, 7, 8]方法二:利用对象的属性不能相同的特点去重let arr = [1,2,2,3,3,3,4,4,5,6,7,8];let arr2 = Array.from(new Set(ar
2021-08-17 11:01:10
163
原创 Linux 系统显示emoji表情
国产机是linux系统,通常不能正常显示emoji表情解决方案:前端引入字体资源,这里使用的是 noto-emoji;emoji字体下载地址:https://gitee.com/songboy/noto-emojigit clone https://gitee.com/songboy/noto-emoji.git<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
2021-08-13 14:25:53
2138
原创 Ajax请求详解
Ajax一、原生Ajaxfunction AJAX_OBJ(url) { var xmlHttp = {}; if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlHttp.onready
2021-08-12 17:20:09
180
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人