- 博客(21)
- 收藏
- 关注
转载 前端加载超大图片(100M以上)实现秒开解决方案
图像切片是指将一张大图分割成若干个小图的过程,以便于存储和处理。图像切片常用于网络地图、瓦片地图、图像拼接等应用中。切片原理主要包括以下几个步骤:定义切片大小:首先需要定义每个小图的大小,一般情况下是正方形或矩形。计算切片数量:根据定义的切片大小,计算原始图像需要被切成多少个小图。计算公式为:切片数量 = 原始图像宽度 / 切片宽度 × 原始图像高度 / 切片高度。切割图像:按照计算出的切片数量,将原始图像分割成相应数量的小图。可以使用图像处理库或自己编写代码实现。
2023-06-26 16:22:15 560
原创 CSS关于图片填充指定元素或者用图片做背景
在实际开发中,经常会遇到需要将某图片填充到指定的div中或者将图片作为某个div的背景图片,然后还需要在图片的不同层面嵌入不同的操作。一般,要达成对应的效果的操作方式多样,但想要在不同浏览器上或者不同移动端达到兼容,既完成了图片的填充又能是图片完成各种div的自适应,推荐使用css样式里,“background:url (图片地址) center no-repeat;”-“设置自适应大小”。其中,background-size还可以选择background-size: cover,具体可以根据实际需求来。.
2022-09-01 16:50:47 1410 1
原创 vue项目中实现对页面复制粘贴剪切等功能键的限制和局部开放
在前端项目中有时候会遇到对页面做出功能键限制的要求,比如说禁止使用复制粘贴、剪切或者右键等相关功能。其实只要想通了需求的本质就简单了,这些功能键的本质就是对相关事件进行监听,而在前端的事件监听中离不开addEventListener。废话不多说,直接上代码:上面的代码在所有前端项目中均可通用,在vue项目中还可以适当的封装下,直接在main.js中进行全局设置,如下:但有时候又需要在项目中某些页面局部进行功能键开放,咱直接在需要开放功能键的页面加入如下代码就行:...
2022-06-21 11:02:46 1169
转载 Vue 基础难点总结
vue各种各样的命令和语法的格式容易记混语法:v-model.修饰符="vue数据变量".number 以parseFloat转成数字类型.trim 去除首尾空白字符.lazy 在失去焦点时触发更改而非inupt时计算属性有缓存,提高渲染性能。如果在页面上需要用到 对现有的数据进行加工得到新数据,则时要使用计算属性普通写法完整写法vue监听器可以监听数据(data/computed等)的值的改变。数据的值有类型:基本数据类型,引用数据类型深度监听
2022-06-16 10:07:11 357
原创 原生js配合ajax实现文件上传(兼容ie浏览器)
原生js配合ajax实现文件上传(兼容ie浏览器),及解决低版本ie浏览器文件上传兼容处理办法
2022-06-15 16:16:59 1344
转载 Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸
场景:解决办法:2. Vue 无法检测对象 property 的添加或移除场景:解决办法:3. Vue 不能检测利用数组索引直接修改一个数组项场景:解决办法:拓展:Object.defineProperty() 可以监测数组的变化场景:4. Vue 不能监测直接修改数组长度的变化场景:解决办法:5. 在异步更新执行之前操作 DOM 数据不会变化场景:解决办法:拓展:异步更新带来的数据响应的误解
2022-06-06 11:36:58 4128 1
原创 ie浏览器上传文件时自带文件本地路径处理办法
在一次项目中上传文件时突然发现,IE浏览器上传文件时总是会带着本地路径一起被上传,谷歌就不会出现问题,经过对比排查后,发现还是浏览器自身解读文件时的不同造成的,因此,解决问题的办法就来了:方法一:既然是浏览器解读文件时出的问题,就在浏览器身上找办法——打开IE浏览器internet选项,然后点击安全选择自定义级别,找到【文件上载到服务器时包含本地目录路径】,直接禁用就行了。如图:方法二:作为一名合格的程序猿同志,我们都喜欢从根本上解决问题,既然是上传文件名的时候不需要其他附带的...
2022-05-30 11:09:13 3711 1
原创 element项目中保留文本域内容格式
有时候在项目中会遇到这种需求,要求将文本域的内容包含格式保留下来。猛的接到这需求或许还有点懵,其实细品之后了解了需求本质了就没有那么无处下手的别扭感了。在文本域中保留格式其实就是要合理的将空格符和换行符保留下来并完成渲染。 了解了事情的本子再着手就简单多了,稍微熟悉下html方面的东西就发现,css里的white—space就能很好的解决这个问题。下面是white-space的几个值其及其解释:属性 换行符 空格和制表符 文字换行 行尾...
2022-05-20 10:46:26 960
原创 关于vue组件的刷新问题
最近在项目中偶然碰到了一个问题,同一个页面组件,在不同的操作中进行展示,突然发现,页面的数据没有变化,意思就是我的组件没有进行数据刷新。经过各种尝试,终于解决,现将方法共享出来: vue本来就是一个数据双向绑定的框架,而页面在初始化完成渲染过后,如果没有命令介入,有时候及时数据有变化也不会触发页面的重新渲染。当我们在调用同一个组件的时候,如果调用的数据是通过同一个字段或者属性获取而来并且这个字段或者属性没有发生变化的时候,组件自身是监控不到数据的实际变化的。这个时候就...
2022-05-18 17:53:45 6686
原创 element树形表格踩坑记
偶遇一项目需要element实现树形表格,按照文档实现表格展示后,发现子级表格无论如何都无法动态控制收缩或者展开,开始各种尝试,都无法解决,在论坛上也各种搜索,都没抓到要点,各种抓狂,最终经多番尝试后发现解决方案早就出现!不多说,直接上代码:前端要求的效果差不多如下图:代码的处理需要如下图进行处理:在el-table中,支持树类型的数据的显示。当 row 中包含 children 字段时,被视为树形数据。渲染树形数据时,必须要指定 row-key。支持子节点数据异步加载。通过指定 .
2022-04-14 19:24:29 1870
原创 vue的组件封装选择个人之见
现在的编程开发中,组件化开发越来越常态化,并且许多人在实际开发中直接一开始就是封装一大堆的各种组件,然后再把各种组件按照需求往主体中进行各种加塞。 其实,我们在实际开发中,很多时候接到的需求其实是对已经存在的项目进行优化、拓展或者说升级,这种已经有的项目框架部分已经决定好了你接下来的主要技术栈,如果脱离了现在已经投入项目适用的技术栈来进行后面拓展功能开发的话,很容易存在各种问题,比如说:页面主体风格,框架样式冲突,各功能页面交互...所以,一定要综合考虑这些问题之后再决定用什么技术栈进...
2022-04-02 16:12:37 1163
原创 spring boot 导入excel表格方案
方案1:用poi组件 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> <version>3.9</version> </dependency>然后创建要导入的相应实体类,至于判断文件类型或者上传文件时的其他操作就 不赘述了,直接上关键地方的重点代码:..
2022-04-02 15:56:24 3960 3
转载 多个实用的 JavaScript 单行代码
获取浏览器Cookie的值通过document.cookie来查找cookie值constcookie=name=>`;${document.cookie}`.split(`;${name}=`).pop().split(';').shift();cookie('_ga');//Result:"GA1.2.1929736587.1601974046"颜色RGB转十六进制constrgbToHex=(r,g,b)=>"#"+...
2022-03-31 16:34:09 117
转载 44道有意思的js难题,如果能全做对就是高手
一个偶然的机会看到了一篇有意思的js试题,这里没办法直接贴出转载地址,直接把内容复制过来,以供各位前端大神尝试、参考:国外某网站给出了44道JS难题,试着做了下,只做对了17道。这些题涉及面非常广,涵盖JS原型、函数细节、强制转换、闭包等知识,而且都是非常细节的东西,透过这些小细节可以折射出很多高级的JS知识点。你可以通过传送门(http://javascript-puzzlers.herokuapp.com/)先去测试一下你的水平,然后回来看看我的解析。为了详细解释这些细节,我也查阅了不少资料,弥补了
2022-03-31 16:28:51 472
原创 js获取当前客户端的mac、ip地址
在前端开发中,偶尔会接到获取当前客户端的mac或者ip等地址的需求,之前在网络上搜索了一圈发现多种方法,但实际上并不是所有的方法都能行的通,或许是个人技术级别没到家,也或者开发环境或者其他因素影响了测试结果,现将本人测试过且行得通的方法放出来供参考,如果能帮助到同行,就免去了各位到处注册充值会员或者花钱购买了。在IE浏览器环境且activeX的所有权限都开启的情况下,用如下代码获取mac:function MacInfo(){ var locator =new ActiveXO...
2022-03-31 15:53:45 11299 1
原创 json对象数组的去重踩坑记
一次无意接受到json数组去重的帮助需求,自信满满的直接上手,不到两分钟留下代码就转身而去,不等屁股挨上座椅就被告知,无法实现去重效果。。。。立马转身再次回头梳理代码,经过各种梳理与尝试,最终完成了预期效果的实现,也意外的发现中间的一些容易忽略的坑与迷失点,现整理出来给自己梳理知识点的同时也给码友们提供参考。json数组去重的方法其实很多,最原生的js写法就是for循环遍历,然后剔除重复的对象之后新建一个数组,最后这个新建的数组就是自己需要的,如下实例代码:function unique(arr){
2022-03-14 16:46:24 2546
转载 【无标题】前端上传文件时解决IE8的兼容问题
在实际项目中,特别是某些公司或者企业的内部管理系统中,经常遇到前端在上传文件时需要考虑到兼容IE8浏览器的情况,很多码猿同志包括俺自己在内,在遇到这种情况的时候总是出现这样那样的问题,现在推荐一篇文章,有比经典的解决方法,或许能给你不同的研究思路或者对应的参考价值。链接地址:https://www.cnblogs.com/zhaoyan001/p/9455811.html...
2022-01-20 11:18:33 194
原创 推荐一个使用的前端页面画流程图的插件——X6
突然接到一个需要在h5页面上展示一个流程图,原想着用css配合js的写法来完成,结果大致的尝试了下感觉工作量有点巨大,有点不太划算,就到处找各种插件,各种海搜,还是有不少资源蹦跶了出来,像gojs啊,flowcanvas啊什么的,诸君也可以去看看。但个人感觉还是X6好用点儿,简单方便明了。全称是antv/x6、相比gojs可能涉及到版权收费之类的问题,X6是开源的可以放心使用,其他很多类似画布工具般使用X6可以直接以代码方式实现流程制作与展示。有兴趣的可以看看。[X6官网地址](https://x6.an
2021-11-16 10:59:21 5519
原创 vue中js方法加载遇到的坑
项目场景:刚用vue完成了几个小项目,在其中一个项目处理ajax请求传参的时候遇到一个问题:在初始化(created)的时候我各种获取不同数据的方法是按照顺序排列进行请求的,其中有部分请求的传参需要从另外的请求中获取,于是我选择将获取传参的方法排在前面优先执行,以便后面的请求能准确得到参数。问题描述:问题来了:不论怎么在(created)优先执行获取传参的方法,我设置的全局变量就是获取不到整个方法返回的结果,但是这个获取传参的方法是被执行了,在该方法执行成功后能在success里面得到准确的结果,但这
2020-09-04 16:51:14 864
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人