自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(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

原创 Element UI 动态表格踩坑指南

Element UI 动态表格踩坑指南,可避免出现表格表头、内容错位问题。

2023-06-14 11:29:24 387

原创 VUE导出多级表头Excel

VUE导出多级表头Excel

2022-08-18 15:38:37 1404

原创 uni-app 踩坑指南

uni-app 踩坑指南

2022-08-01 16:04:44 2047

原创 CSS calc()函数

一、calc()函数介绍二、calc()函数与val()联合使用

2022-06-24 11:57:18 1621

原创 图片预览插件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关注的人

提示
确定要删除当前文章?
取消 删除