自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

汤一飞

本人很菜, 非常菜

  • 博客(64)
  • 问答 (1)
  • 收藏
  • 关注

原创 记一次解决埋点代码的 jQuery 与客户网站版本冲突(noConflict 也无效, 与 jQuery-ui 有关)

文章目录背景解决过程:背景公司提供埋点代码给客户网站上埋点, 实现在线聊天/留言表单功能, 埋点代码中有 jQuery 代码, 客户网站也有 jQuery 代码, 客户说一埋上我们的代码控制台就报错控制台报错信息如下:jquery-ui.min.js:formatted:18 Uncaught TypeError: Cannot read properties of undefined (reading 'version')Uncaught TypeError: owl.owlCarousel i

2021-11-18 19:57:20 701

原创 第三方软件安装 Node 导致原有项目运行错误

第三方软件安装 Node 导致原有项目运行错误文章目录第三方软件安装 Node 导致原有项目运行错误背景环境解决过程背景安装一个软件时, 此软件自带 Node.js , 会安装它自带的 node , 安装后 node 版本升级导致现有项目运行不起来环境window10 x64原 node : 10.21.0第三方软件安装的 node : 14 (具体的忘了)解决过程系统 - 高级系统设置 - 环境变量 - 系统变量, 修改 Path , 将程序新加入的该软件安装的 node.js 路径移

2021-11-16 11:23:53 1221

原创 使用 width: 0 避免 flex: 1 元素宽度溢出

参考解决用flex布局时内容可能溢出的问题背景使用 flex 布局, 左右两边各一个元素, 中间 flex: 1, 中间结构为: 二行文字, 第一行不换行超长隐藏, 第二个最多支持换两行超长隐藏;结果设置文字不换行后, 中间元素溢出 flex: 1 范围解决上述参考文章, 有两种方案:中间元素 overflow: hidden但是这样会导致第二行文字不能"最多支持换两行";中间元素 width: 0成功解决...

2021-10-12 10:27:21 1148

原创 请求图片时, 图片默认打开方式是下载而不是预览

这与后端返回此文件时, http 响应头 Content-Disposition 属性有关;因为项目用的是七牛云存储的图片, 此时只需要在图片地址后面加上七牛的图片处理参数 ?imageView2/0 即可正常预览图片

2021-09-29 12:29:09 894

原创 踩坑:Notification 不显示

之前发现 Chrome (版本: 81) 浏览器不显示 Notification , 且 Notification.requestPermisson() 也没弹出请求框, 最后定位, 发现原因如下:http 链接, 不允许通知双显示屏 + 独立显示的调试窗口 + 调试窗口最大化第二点有点乱, 没总结出规律...

2021-09-29 12:28:34 2141

原创 pointer-events: none 属性让鼠标无法选中元素

如题, 在元素上设置此属性 pointer-events 可让鼠标穿透元素, 无法对元素做操作

2021-09-29 12:27:52 314

原创 让 echarts 柱状图 label 根据柱高度自适应显示在柱内/柱外

文章目录背景解决方法代码示例背景echarts 柱状图, label 默认显示在柱内, 当数据最大值和最小值相差过大时, 短柱放不下 label , 样式不美观解决方法传入数据时, 不传入实际数据, 而是传入 ${当前实际数据}.${数据最大值} (数据本身不能为小数)在 series.label.formatter 中, 拿到了之前传入的数据, .split('.') 得到实际数据和数据最大值设置 label.padding , top 为负数(自己试), 判断当前数据与数据最大值相差过大时

2021-09-29 12:27:33 2885 1

原创 文本中含有隐藏字符导致错误

文章目录背景unicode 8236 8237背景用户输入的数据未通过正则校验, 但是看起来完全符合要求, 最后复制该字符串逐个打印字符, 发现有一个"空格", 最终发现此问题unicode 8236 8237excel隐藏的空间UniCode 8236和8237 看着像空格(或者看不到), 但却不是空格, 导致错误...

2021-09-29 12:27:19 172

原创 webpack 打包不更新的静态资源为 dll 库文件

文章目录参考实际使用参考vue-cli3 DllPlugin 提取公用库利用DllPlugin分割你的第三方库实际使用我的用法是: 配合 webpack-bundle-analyzer 分析首页加载的 js , 把其中的部分静态资源分开到不同的文件, 减小单次请求体积(但相应地, 请求次数增加了, 总大小是没变的);打包产生的库文件可以放到 CDN , 加载更快;之后其他页面引用被打包的静态资源时也是请求库文件, 而不是打包到自身的 js , 节省资源...

2021-09-27 15:50:12 218

原创 echarts dataZoom 属性不生效解决办法

echarts 实例 options 对象的 dataZoom 属性修改之后, 先 echarts 实例 .clear() 清空实例, 再 .setOption 重新渲染

2021-09-27 15:47:31 5525 2

原创 sortable.js 相关

文章目录使用 sortable.js 时, 固定列表顶部和底部(不能修改顺序)原理代码使用 sortable.js 时, 固定列表顶部和底部(不能修改顺序)原理先设置顶部和底部的选项不可被拖动(通过 sortable.create 的参数 handle, filter 实现), 并记录中间可移动区域的 index 范围(上限, 下限)利用 sortable 配置的 onEnd 函数和 sortable 实例的 toArray 方法, 暂存移动前的顺序移动完成后, 若发现被移动项新位置超出了允许移

2021-09-27 15:45:40 1152

原创 使用 flat 函数平铺复杂数组

flat函数我的运用:展开复杂数组(可指定展开到多少层数停止)查看复杂数组中一共有多少项(会去掉空项)获取指定层所有元素(如果有 undefined 注意去掉)跟 slice(0) 一样 , flat(0) 复制数组(但是会去掉空项)...

2021-09-27 15:21:21 164

原创 常用正则及相关资源网站

文章目录资源网站常用正则邮箱校验电话校验纯数字/大/小写字母/键盘特殊符号非[键盘特殊字符|数字|空格]正则匹配非注释非console的中文正则小技巧webStorm 全局搜索显示全部匹配结果转载: [正则表达式匹配"非",以及"非"字符串的匹配](https://blog.csdn.net/xuyangxinlei/article/details/81359366)资源网站正则可视化网站这个网站可以将正则表达式显示成可视化的流程图, 方便自己查看正则是否写对, 也可以照着图给产品解释(有时候产品

2021-09-27 15:19:50 388

原创 使用 element-resize-detector 监控 div 的 resize

如题, 找"监控 div 的 resize 事件"方法时, 发现 iview 框架中也用了这个包直接 npm 安装使用就行, 详见 https://www.npmjs.com/package/element-resize-detector

2021-09-27 14:47:28 170

原创 ngrok 内网穿透

文章目录背景实操步骤背景想让 UI 在他自己的电脑上看到我这儿开发中还没上测试环境的界面, 于是想到了之前大学时候用过的这个工具实操步骤访问网站 ngrok.cc , 按着网站上的教程来,选择免费服务器,一般来说就可以了但是这次用的时候报错了Webpack 出现 Invalid Host header 错误 ,可将 webpack-dev-server disableHostCheck 设置为true直接在 webpack 配置文件中 module.exports 的对象中加上 d

2021-09-27 14:33:47 175

原创 JS 拖拽上传文件

文章目录参考参考DataTransfer拖拽献祭中的黑山羊-DataTransfer对象监控 drop 事件, 从 event.dataTransfer.files (或 event.dataTransfer.items) 中取文件注意:兼容性问题拖拽网页文件上传时, 要注意是否正确取到了文件...

2021-09-27 14:29:30 669

原创 JS操纵剪切板

文章目录文本文件(图片)文本如果是 textArea 或 input Text 之类的可以使用 select 方法选中文本的 DOM 元素DOM元素.select();if (document.execCommand('Copy')) { // 提示已经复制} else { // 提示不能复制}如果不是设置一个隐藏的可以 select() 的 DOM 元素,用户点击复制按钮或者其他操作时,动态把目标文字复制给隐藏 DOM 元素的 value ,随后同上.DO

2021-09-27 14:27:10 236

原创 JS文件操作

JS文件操作参考HTML5 进阶系列:文件上传下载如何用 JavaScript 下载文件vue+axios上传文件axios全攻略小tips: 纯前端JS读取与解析本地文本类文件上传通常思路隐藏掉很丑的 input type="file" ,在自定义的上传按钮上绑定点击事件,通过 id 调用这个 input ,然后 .click() ,在这个 input 的 change 事件内获取到 event.target.file 做各种操作axioslet param = new F

2021-09-27 14:24:03 658

原创 非 Vue 相关技术总结

如题

2021-04-28 11:28:56 308

原创 两边自适应宽度文字不换行, 中间文字换行/省略号显示

<div class="Grid"> <div class="Grid-cell">前前前前</div> <!-- 直接用 div 包裹文字就是换行显示, 加上这些样式后就是省略号显示 --> <div style="overflow: hidden;"> <div ...

2019-07-01 17:28:06 1050

原创 Iconfont+IcoMoon 升级 iview2 图标库到 iview3 (打造自己的图标库)

进入 IcoMoon , 导入 node_module 里装的 iview2 和 iview3 的 SVG 字体文件.IcoMoon 很简单, 不会弄可以自己上网查;同理, node_module 里找到 iview 文件夹了慢慢找 fonts 里的 svg 文件, 基本上看着文件夹名字就知道在哪儿了导入完成后, 先全选 3 版图标再全选 2 版图标, 选择导出, 导出时可以设置...

2018-12-10 21:52:19 1516

原创 工作中遇到的技术问题备忘(五): 两个 iFrame 标签包裹 Vue 项目互相传值

场景描述:两个 &amp;lt;iframe&amp;gt; 里包着同一个 Vue 项目的两个页面,在一个页面点击了,传递参数过去到另一个页面跳转方式: 通过 DOM 取到左边目录所有目录项的路径属性,检测到符合另一个页面的路径就属性手动 click 该目录项一下, 切换到另一个 &amp;lt;iframe &amp;gt;初步实现:通过 sessionStorage + 每次切换标签到这两个 Vue 页面就刷...

2018-08-05 14:08:54 867

原创 工作中遇到的技术问题备忘(四): ngrok 内网穿透让外网可以访问本地运行的测试项目

同事问我: 有没有办法让别人在外网看到我本地正在运行的测试项目? 随后我想起了我原来做学年设计时用过的 ngrok访问网站 ngrok.cc ,这个是我当初用的,现在也就把账号直接给同事用了,按着网站上面的教程来,选择免费服务器但是这次用的时候报错了Webpack 出现 Invalid Host header 错误, 网上说这种情况可将 webpack-dev-server 的...

2018-08-05 14:05:23 241

原创 工作中遇到的技术问题备忘(三): 让 JSON.parse 出错后继续执行

这里不是把项目代码复制过来之后有些地方修改了一下, 没运行, 不知道是否奏效/* 代码注解:* 1. 使用 promise 使得 JSON.parse 出错时程序能够继续运行* 2. 因为 then 中的函数是异步执行,可能导致原代码中想要 Object.assign 时 result 仍为属性未 parse 的状态,所以每次 parse 成功都调用一次 assign* 3. 本...

2018-08-05 14:00:33 879

原创 工作中遇到的技术问题备忘(二):JS操纵剪切板

JS操纵剪切板 此系列只写我在工作中使用到的操作/代码,不是系统概括如果是 textArea 或 input Text 之类的可以使用 select 方法选中文本的 DOM 元素DOM元素.select();if (document.execCommand('Copy')) { // 提示已经复制} else { // 提示不能复制}如果不是设置一个隐藏...

2018-06-09 14:33:33 114

原创 工作中遇到的技术问题备忘(一):JS文件操作

JS文件操作 此系列只写我在工作中使用到的操作/代码,不是系统概括 参考: HTML5 进阶系列:文件上传下载 如何用 JavaScript 下载文件 vue+axios上传文件 axios全攻略 小tips: 纯前端JS读取与解析本地文本类文件上传通常思路隐藏掉很丑的 input type=&amp;quot;file&amp;quot; ...

2018-06-09 14:31:11 225

原创 工作中对 Vue 和 iView/Element 的一些技术备忘总结

如题

2018-05-19 11:49:17 4867 1

原创 npm 包解析 eml 文件

背景后台问我能不能前端直接解析 eml 文件,项目是 Vue , 首先想到能不能 npm 找个包解析过程首先上 npmjs 直接搜 eml , 找到了一个 eml-format 包了解 quoted-printable 编码,随后发现我从QQ邮箱导出的 eml 文件是 GB2312 编码,因为之前对编码不熟悉, JS 也没有直接对它解码的方法,想用 JS 原生的编解码方法也没弄...

2018-05-19 10:53:49 1826 2

原创 freeCodeCamp题目:No repeats please(排列组合题)

fuckkkkkkkkk!同样的代码,在网站上运行就卡死,在chrome调试工具里sources里面运行就没事儿。忘了排列组合知识的我伤不起啊。做完题目再看官方提示更伤不起啊,看到下面一波波秀操作的高端玩家,觉得自己弱爆了。在这写一写,做个备忘记住这题。

2017-12-18 17:54:17 372

原创 markdown-it+highlight.js后端渲染的代码高亮问题解决

起因 想把自己写的Vue学习笔记挂到自己用heroku搭的小网站上去,已经在npm上搜到GitHub风格的插件,配合markdown-it可以做到GitHub的markdown风格显示效果,但是昨天发现代码没有高亮,想做好代码高亮效果解决过程首先查看markdown-it,毕竟这样一个大插件没有自带的highlight效果可能性很小,Ctrl+F搜索后发现了相关代码,发现了,后端直接赋值。

2017-11-14 18:33:03 6674 1

原创 Vue的父组件到底是啥?

希望看到我回答的大家如果有答案一定要告诉我!!!万谢!!观点:我现在搞不懂,到底哪个想法是对的,暂且支持观点1:Vue.component里定义的template部分是子组件,HTML中组件标签为父组件。包裹组件的那个有Vue实例挂载的元素是父组件,HTML中组件标签为子组件。另外,没有写过组件内还有组件的代码,不过暂且直观地认为这种情况下两个组件为父子关系论证:Vue教程中Ctrl+F搜

2017-11-06 16:09:57 3973 1

转载 vue的符号{{}}和handlebars的符号冲突问题解决

转载:vue的符号{{}}和handlebars的符合冲突 Handlebars官方文档说要输出 {{abdc}}这样的字符串有两种方法 1. 内联 只有一行的 直接在内容前面加 \ ,既\{{abdc}}; 2. 用raw包裹,想要输出{{abc}}{{wed}} 就 {{{{row}}}} {{abc}}{{wed}} {{{{/row}}}}

2017-10-25 10:24:21 2291

转载 一行代码快速去掉字符串中的所有空格

今天看QQ时看到大佬发的' s tr in g '.split(' ').join('');

2017-09-26 14:03:25 2611

原创 select设置默认文本的方法,相当于placeholder

第一个option中写好默认文本,然后设置display为none,这样在选项中就不会出现第一个option了,同时在没选择option时,选择框还能显示出第一个option的文本。 <select> <option value="" style="display: none">请输入用户</option> <option value="1">1</option

2017-09-22 10:03:00 10041 1

原创 阮一峰老师网络协议相关博客读后总结_图解

引用阮一峰老师博客: 互联网协议入门(一) 互联网协议入门(二) TCP协议简介 HTTP协议入门总结Xmind文件百度网盘分享链接总结的也不全,如有错误,希望大家指正

2017-09-07 15:54:06 569 1

原创 廖雪峰老师JS教程读书笔记(三):attr()和prop()和is()

attr()和prop()的差别 简单来说,根本区别就是,attr操作HTML元素的属性,prop操作DOM元素的属性,因为DOM会解析某些HTML元素属性到自己身上,此时prop和attr都能操作这些属性。廖老师教程原文,获取节点信息那块prop()方法和attr()类似,但是HTML5规定有一种属性在DOM节点中可以没有值,只有出现与不出现两种,例如:<input id="test-rad

2017-09-05 14:26:03 392

原创 廖雪峰老师JS教程读书笔记(一):JS继承

真正理解prototype原型继承 核心思路:在子类原型链中加入父类的原型//定义父类构造函数function Student(props){ //传入参数为对象,这样的好处是不用按顺序传入参数 this.name=props.name||'UnNamed';}//在父类的原型对象上定义方法Student.prototype.hello=function(){ aler

2017-09-04 17:02:20 413

原创 廖雪峰老师JS教程读书笔记(二):原生AJAX与跨域总结

廖老师网站原文原生AJAX请求//创建一个XMLHttpRequest对象var request=new XMLHttpRequest();//readystate发生change时会执行的回调函数request.onreadystatechange=function(){ if(request.readystate===4){ //请求完成 if(request.st

2017-09-04 15:50:09 1675

原创 真正理解prototype

Created with Raphaël 2.1.2构造函数构造函数实例对象实例对象prototype对象prototype对象Function.prototypeFunction.prototypeObject.protoTypeObject.protoTypenullnull创建原型链,对象上未发现请求的属性和方法则向prototype上溯寻找函数也是对象,所有函数的__proto__都指向F...

2017-09-01 17:59:50 434

转载 超方便的数组去重

摘自廖雪峰老师的教程下的一篇评论 原理: es6里引入了新的数据类型Map和Set,一眼看到Set就觉得它自动去掉重复的key这个特性很适合做数组去重,评论果然有人和我一样想的。 Array.from():作用是将类数组对象转换为数组对象,还有这种操作?!!'use strict';var arr = [1,2,1,2,2,1];//new Set 数组去重function uniq

2017-08-31 17:21:18 280

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

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