
Web前端-Javascript
文章平均质量分 69
QC班长
优快云程序员学院讲师,优快云内容合伙人,全栈领域优质创作者,高级瑜伽导师-阿斯汤加瑜伽练习者,透过IT看世界!
展开
-
使用html2canvas转换table为图片时合并单元格rowspan失效,无边框显示问题解决(React实现)
(对于使用了第三方表单的Table组件)-如果用的组件table,tr的背景色也是组件设置的。所以tr样式用这个覆盖background-color: transparent;,再设置单元格的background-color。为tr设置了背景色,然后td设置了rowspan,设置了rowspan的单元格就会出现边框不显示的问题。最近使用 html2canvas导出Table表单为图片,但是转换出的图片被合并的单元格没有显示边框。把tr的背景色设置为透明,在td里设置背景色。最后就正常显示了,可以打印了。原创 2023-11-17 10:16:14 · 2898 阅读 · 1 评论 -
React的UmiJS搭建的项目集成海康威视h5player播放插件H5视频播放器开发包 V2.1.2
其中集成的难点是在于官方开发包的引入,因为下载下来的demo是用HTML写的,直接可以在Head标签中导入,所以没什么问题,但UmiJS框架搭建的组件化项目直接就没有了HTML文件,所以得找到额外script脚本引入的地方,不同框架搭建的项目,建议去看官方文档。那里是最直接的说明书。下载下来后,核心需要的包如下,其中xxx.wasm文件是官方使用C++编写的WebAssembly文件,是基于堆栈的虚拟机的二进制指令格式,一种低级汇编语言,旨在非常接近已编译的机器代码,并且非常接近本机性能。原创 2023-07-28 22:36:53 · 5031 阅读 · 10 评论 -
Echarts的地图实现拖拽缩放同步功能(解决多层geo缩放、拖动卡顿问题)
大屏项目显示云南省3D的地图,可拖拽缩放、地图打点、点击图标弹框等等功能。原创 2023-06-13 16:58:07 · 10468 阅读 · 4 评论 -
基于React的微前端项目构建时Node V8内存溢出问题解决(Ineffective mark-compacts near heap limit Allocation failed)
最近在写前端的React项目,项目用的是阿里飞冰的微前端解决方案,面向大型系统的微前端解决方案,前端的每个模块都拆分成了微模块。编译好后在集成到主应用中。原创 2023-04-21 15:06:50 · 1501 阅读 · 1 评论 -
JS中的some()、every() 、 reduce()方法
一、some() 方法用于检测数组中的元素是否满足指定条件(函数提供)原创 2023-04-18 17:00:31 · 6975 阅读 · 0 评论 -
MacOS系统启动React前端项目时报错Error: EMFILE: too many open files, open解决方法
2、Too many open files是Linux、MacOS系统中常见的错误,从字面意思上看就是说程序打开的文件数过多,不过这里的files不单是文件的意思,也包括打开的通讯链接(比如socket),正在监听的端口等等,所以有时候也可以叫做句柄(handle),这个错误通常也可以叫做句柄数超出系统限制。另外一种情况就是我们的程序存在文件句柄使用完成之后没有正常的关闭的情况,通常是网络连接没关闭,文件打开没关闭等等,这时就需要我们修复程序中的bug,确保打开的文件最后都会关闭,网络连接也会关闭。原创 2023-04-18 16:21:50 · 3528 阅读 · 0 评论 -
macOS端React的项目WebPack热更新(HMR)失效问题分析及解决,原因竟是Windows文件系统不区分大小写导致
最近做的项目是一个使用UmiJS搭建的React的前端老项目,项目是上一个开发团队遗留下来的老项目,我们接着在原来的基础上开发。团队成员中有的是Windows电脑,有的是Mac电脑,所以存在规范不统一的情况。原创 2022-11-30 10:03:26 · 1339 阅读 · 0 评论 -
前端React项目的Next.js项目通过CSS引入自定义字体文件
最近在Web3的项目,需要引入自定义字体,做下记录:1、如果是下载的字体文件,直接能使用的就不需要转换,如果是TTF格式则需要转换成eot、svg、woff、woff2,这里提供一个网站Font Squirrel | Create Your Own @font-face Kits,进行文字转换。原创 2022-11-23 09:33:48 · 1493 阅读 · 0 评论 -
JavaScript实现React实现网页转换成图片截屏下载
最近有项目的需求需要把网站内HTML内容转换成图片保存下载,找了一圈发现一个不错的插件HTML-to-image,npm 包地址:Html-to-image ,该插件的原理是:SVG的foreignObject标签可以包裹任意的html内容。那么,为了渲染一个节点,主要进行了以下步骤原创 2022-11-13 21:52:57 · 1937 阅读 · 0 评论 -
ECMAScript 6(ES6)JavaScript中的数组扩展运算符、函数剩余参数运算符(...)三个点的应用小技巧
最近写前端项目,经常看到...的使用,但在不同的地方又有不同的作用,记录下:(...)三个点是ES6新加的数组扩展运算符-spread(它用于把一个)、函数剩余参数运算符-rest,两个关键字是一致的写法,是因为它们本质是一样,都是解构赋值。当三个点(...)在等号左边,或者放在形参上。为 rest 运算符。当三个点(...)在等号右边,或者放在实参上,是 spread运算符。原创 2022-10-10 11:25:59 · 622 阅读 · 0 评论 -
React报错Warning: This synthetic event is reused for performance reasons. If you‘re seeing this, 解决方法
使用React的NavLink标签作为菜单列表,点击菜单列表按钮,动态更换菜单名称。React报错Warning: This synthetic event is reused for performance reasons. If you're seeing this, 解决方法原创 2022-10-08 10:20:30 · 3631 阅读 · 0 评论 -
React封装APP端弹框筛选组件带div蒙层遮罩层
先看下效果:点击筛选,弹出框显示筛选面板,再点击确定关闭面板,取消遮罩层出。第三方依赖组件:antd-mobile、antd-mobile-icons。index.less样式代码。index.tsx代码。原创 2022-09-28 17:09:34 · 845 阅读 · 0 评论 -
React AntV/G2Plot环形图Pie添加点击事件,即点击图环触发获取相关数据。
/ 图表的点击事情,可参考文档添加其它事件,https://charts.ant.design/zh/examples/pie/donut#basic。* @param plot 在 Plot 上通过 on 绑定事件、off 移除绑定事件。1、添加相关依赖,引入AntV/G2Plot图表组件。原创 2022-09-26 10:59:27 · 3069 阅读 · 1 评论 -
React中样式调整“横线“的使用
height:2px;skyblue 下颜色。dotted:点线;dashed:虚线;double:双线;groove:槽线;outset:外凸;groove 上颜色。原创 2022-08-20 15:00:03 · 941 阅读 · 0 评论 -
前端样式排版布局技巧汇总杂记
最近在做前端的可视化大屏展示,记录一下相关的知识点。1、布局display属性根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,称为块元素,而span元素的默认display属性值为“inline”,称为“行内”元素。display常用属性值1. none:隐藏对象1.1 不用none前:1.2 用了none的时候:...原创 2022-05-29 16:08:35 · 1289 阅读 · 1 评论 -
Vue3.2.33、 VueCLI4.5.0打包 chunk-vendors.js 文件过大解决方案(compression-webpack-plugin)
最近项目发布到公网服务器,发现首次打开加载时太慢了,查看js文件发现chunk-vendors.js太大了,于是想着优化,发现了其中一种方案是使用压缩插件compression-webpack-plugin,压缩打包编译后的代码。将文件打包成 .gz 文件,然后通过 nginx 的配置,让浏览器直接解析 .gz 文件,可以大大提升文件加载的速度,浏览器可以直接解析 .gz 文件并解压。压缩文件格式介绍.gz:浏览器可以直接解析并解压。.br:BR 文件是使用 Brotli(一种开源数据压缩算原创 2022-04-28 22:37:32 · 3419 阅读 · 0 评论 -
前端工程师面试题问答(React方向)
你好,我们的项目目前是从零到一的过程中,我这边有两个问题,麻烦回答后我们进一步来沟通1、你认为的前端工程师要对哪些业务的结果和价值负责?2、我们目前基于react- ant design pro搭建了一个框架(https://github.com/ant-design/ant-design-pro),来做中后台的业务系统,在开始开发我们自己的业务之前,要做好准备以便,基于这个框架可能需要做哪些修改、精简、配置、流程定义等具体工作?以下回答仅代表QC班长的个人关点,回答可能存在不足,请选...原创 2022-03-30 18:47:16 · 1505 阅读 · 0 评论 -
React中为className添加多样式名的几种方式
问题需求,我需要在jsx中的className中同时引用SCSS文件中的.top .A这两个CSS样式类,如何实现呢? .top { width: 250px; height: 250px; font-size: 3rem; z-index: 0; position: absolute; } .top:hover { box-shadow: 0 0 10px #ccc; z-index: 999; } .A {原创 2022-02-25 19:28:42 · 2137 阅读 · 0 评论 -
什么是语法糖(Syntactic sugar)?
大学时没选修编译原理这门课,不知道什么是语法糖,最近看React的官方文档才接触语法糖的概念,简单查了下资料记录下,以下是来自百度百科的解释:语法糖(Syntactic sugar),也译为糖衣语法,是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语,指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性,从而减少程序代码出错的机会。简单理解就是在不改变其功能的情况下,通过改变代码的写法,让代码原创 2022-02-24 13:00:27 · 20730 阅读 · 0 评论 -
Vue3.0.0、VueCLI4.5.0启动运行时报错Cannot read properties of undefined (reading ‘NormalModule‘)解决方法
最近升级前端框架尝鲜,用VueCLI4.5.0脚手架工具创建项目,然后在开发工具中把项目的node_modules文件夹删除,package-lock.json文件删除后,重新npm install,没什么问题。然后启动就报错了ERRORTypeError: Cannot read properties of undefined (reading 'NormalModule')NormalModule属性未定义,缺少了某些了依赖然后只能用排除法逐个排出问题,我又用了vue脚手架vue c..原创 2022-01-25 16:35:27 · 18966 阅读 · 7 评论 -
Vue3使用element-plus1.3.0版本的el-menu菜单组件引入动态渲染icon图标时,图标组件刚好是Menu时报错,菜单不显示的解决方法
目前在升级前端框架,UI组件element-plus升级到了目前最新的1.3.0beta8版本,图标也换成了官方提供的SvgIcon图标,官方提供了组件导入的方式使用图标。而我的图标是全局导入的,默认使用官方的命名。在菜单栏使用图标,并且是动态渲染的,刚好用到图标组件名称是Menu时,点击带有这个图标名称的菜单,就出问题了,导致其他菜单不显示。下面是在main.js中全局引入图标的方法:import {createApp} from 'vue'import App from './App..原创 2022-01-25 15:39:59 · 8467 阅读 · 4 评论 -
网站(WordPress)添加Google广告后加载速度太慢的解决方法
最近用WordPress搭建的网站添加了Google的广告代码,网页加载速度太慢了,于是想着优化下加载顺序代码及JavaScript代码,思路是延迟加载Google的JavaScript,以及把Google的JavaScript的代码放在页脚,最后才加载,以提升用户体验。我的原生的Google Adsense的JavaScript代码如下:<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"&原创 2021-12-24 16:09:21 · 1246 阅读 · 0 评论 -
Ionic4最新版(4.7.1)解决浏览器跨域访问问题以及与Ionic3的差别
升级以前的WebAPP框架时发现以前的原先Ionic3浏览器跨域解决方法不能用了。Ionic3的浏览器跨域解决方法是在ionic.config.json文中添加以下内容:"proxies": [ { "path": "/proxyApi", "proxyUrl": "http://149.129.73.181:9999" }]但是升级到最新版Ionic4...原创 2019-12-12 15:49:02 · 1224 阅读 · 0 评论 -
js字符串数组转数字数组,并去掉最后一个元素
js把字符串数组转数字数组let menuIds=["1,2,3","3,6,7,4,2"2,5,3"]//测试数据let newArr = [];//初始化数组if (Array.isArray(menuIds)) { for (let o of menuIds) {//循环数组 let menuId = o.split(",").map(Number...原创 2019-11-19 23:48:04 · 1126 阅读 · 0 评论 -
VueJS Element UI自定义控件:Cascader级联下拉框,解决查看时树形数据回显
下拉框在业务开发中还是很常用的,比如下拉菜单,上级组织机构选择,各种分类等等。在用到Element UI的Cascader 级联选择器下拉框组件时,不能满足我的需求,就在此基础上自定义了控件。存在的问题:1、Element UI官方的级联下拉控件el-cascader选择数据后,被选中的数据是数组形式的,例如:[7,6,1],但在数据库中保存时,一般只保存ID,不保存数组。所以就需要我们...原创 2019-11-16 13:10:33 · 5591 阅读 · 0 评论 -
关于前后端分离项目的 VueJS前端Token 存储问题,如何做更安全
关于Vue前端token的存储问题:Vuex的store,localStorage,sessionStorage三者都可以存记录登录状态一般都是token,例如:存在token说明已经登录,不存在就没登录->跳转登录页面每一次请求都携带token在后台验证,如果token合法,没过期则返回请求的数据,否则返回token错误/过期等状态码。至于浏览器开发调试手动改 你阻止不了其他...原创 2019-10-15 13:08:50 · 5911 阅读 · 0 评论 -
Mac(版本10.15 (19A583))执行npm install xxxx报错gyp类错误解决方法
最近新装了MacOS的最新版10.15,重新安装开发环境,nodejs安装的是最新的,再用npm 安装包时总会报 gyp ERR!错gyp ERR! configure errorgyp ERR! stack Error: EACCES: permission denied, mkdir解决方法,在命令后加上--unsafe-perm例如sudo npm insta...原创 2019-10-12 13:31:41 · 3957 阅读 · 0 评论 -
JavaScript实现数组去重方法总结(六种方法)
方法一:双层循环,外层循环元素,内层循环时比较值如果有相同的值则跳过,不相同则push进数组Array.prototype.distinct = function(){ var arr = this, result = [], i, j, len = arr.length; for(i = 0; i < len; i++){ for(j = i + 1; j <...原创 2018-02-08 15:52:02 · 6809 阅读 · 1 评论 -
使用LocalStorage、sessionStorage报异常DOMException: Failed to execute 'setItem' on 'Storage': 解决方法
本次项目需要用到前台缓存,使用了LocalStorage、sessionStorage,但使用过程中报异常,原因及解决方法如下:缓存到LocalStorage调用localStorage.setItem方法保存缓存对象。一般来说,只要这一行代码就能完成本步骤。但是LocalStorage保存的数据是有大小限制的!我利用 chrome 做了一个小测试,保存500KB左原创 2018-02-06 13:53:06 · 40554 阅读 · 6 评论 -
javascript将时间和日期字符串转换为时间戳
// 获取当前时间戳(以s为单位)var timestamp = Date.parse(new Date());timestamp = timestamp / 1000;//当前时间戳为:1403149534console.log("当前时间戳为:" + timestamp);// 获取某个时间格式的时间戳var stringTime = "2014-07-10 10:21:12";...原创 2018-02-11 10:47:33 · 645 阅读 · 0 评论 -
js wdate 日期格式转时间戳
var subTime = new Date(startTime.replace(new RegExp("-", "g"), "/")) - new Date();if (subTime 0) { advertisementInfoRecord.status = 0;}原创 2016-12-08 10:54:58 · 1033 阅读 · 0 评论 -
JS根据指定日期获取该日期所在的周一和周日,获取任意一天0点和24点时间戳,计算两个时间点的间隔,获取当天、最近七天、最近一月、最近 一季度起止时间戳,修改时间
【代码】JS根据指定日期获取该日期所在的周一和周日,获取任意一天0点和24点时间戳,计算两个时间点的间隔,获取当天、最近七天、最近一月、最近 一季度起止时间戳,修改时间。原创 2018-03-15 16:01:06 · 5028 阅读 · 2 评论 -
nodejs更新package.json中的dependencies依赖到最新版本
如果手动去修改dependencies中各个包的版本号,那就太麻烦了,借助npm-check-updates工具可以很方便的将package.json中的依赖包版本号更新为最新版本。1、安装:npm install -g npm-check-updates使用:2、检查package.json中dependencies的最新版本:ncu3、更新dependencies到新版本:ncu -u更新全部...原创 2018-03-02 09:55:24 · 8369 阅读 · 1 评论 -
VueJS2.0 生命周期和钩子函数的一些理解
所谓“生命周期”,是指对象从构造函数开始执行(被创建)到被gc回收销毁的整个存在的时期。“钩子”就是在某个阶段给你一个做某些处理的机会。vuejs2.0的生命周期可以总共分为8个阶段:beforeCreate(创建前),created(创建后),beforeMount(载入前),mounted(载入后),beforeUpdate(更新前),updated(更新后),beforeDestroy(销毁...原创 2018-02-24 10:57:46 · 703 阅读 · 0 评论 -
ionic浏览器刷新页面报错throw er; // Unhandled 'error' event解决方法
这几天做移动端开发,需要使用Ionic写手机客户端,遇到一些奇怪的问题,具体问题就是启动使用ionic serve启动服务器之后只要一刷新界面就会导致服务器关闭,报的错误如下:events.js:182 throw er; // Unhandled 'error' event ^Error: spawn "C:\Program Files\nodejs\node.exe" EN...原创 2018-06-05 14:54:20 · 2115 阅读 · 0 评论 -
最新Vue2.0+组件开源项目库集合
是最新的由OpenDigg整理并维护的Vue相关开源项目库集合。原文地址:https://github.com/opendigg/awesome-github-vue内容UI组件开发框架实用库服务端辅助工具应用实例Demo示例UI组件element ★13489 - 饿了么出品的Vue2的web UI工具套件Vux ★8133 - 基于Vue和WeUI的组件库iview ★6634 - 基于 Vu...原创 2018-07-16 09:55:10 · 5222 阅读 · 0 评论 -
Mac OS 控制台使用Gulp报错Cannot read property 'apply' of undefined
gulp -vCLI version 3.9.1Local version 4.0.0这里的CLI版本是什么意思?不懂?但是npm上发布的gulp-cli的版本最新是2.0.0,执行gulp命令后才会出现下面的错误在gulp的github的issue里找到解决方案是全局安装下gulp-cli:sudo npm i gulp-cli -g ...原创 2018-11-26 07:57:57 · 1590 阅读 · 0 评论 -
vuejs 页面跳转和跳转到外链(其他外站)
1、vuejs 是单页面应用,应用内的跳转,可以用router-link标签 router-link tag='a' :to="'/'" >跳转demorouter-link>router-link tag='span' to="#" @click.native="handleEditPassword">span class="a-inner">i class="el-ic原创 2017-12-27 11:21:42 · 112881 阅读 · 0 评论 -
解决vue-cli element-ui打包报错Unexpected token: punc (() [./~/element-ui/packages/row/src/row.js
1.问题描述我用vue-cli写了项目,界面都是用element-ui写的,打包时报错:ERROR in static/js/19.7a249ea6c2bf376ba720.js from UglifyJsUnexpected token: punc (() [./~/element-ui/packages/row/src/row.js:24,0][static/js/19原创 2017-12-17 22:02:41 · 6701 阅读 · 2 评论 -
Extjs遍历Store里面的record
1、使用eachvar jsonArray=[];store.each(function (record) { jsonArray.push(record.get('ORGID'));});2、使用for循环var jsonArray=[];for(var i=0;istore.getCount();i++){ var recored =原创 2017-04-06 09:26:52 · 7899 阅读 · 0 评论