
前端解决方案
摫
这个作者很懒,什么都没留下…
展开
-
ocanvas多边形扩展
ocanvas自带的polygon为正多边形,不支持给点列表进行绘制。扩展ocanvas支持自定义多边形。原创 2023-11-30 14:50:51 · 453 阅读 · 0 评论 -
js 数据脱敏方法
str为需要脱敏的数据,mark为脱敏显示的字符,将字符串中间60%的字符替换。原创 2022-10-11 19:52:59 · 1376 阅读 · 0 评论 -
基于webrtc浏览器截图
网页上某个元素截图,截图后需要显示浏览器提供的navigator.mediaDevices.getDisplayMedia方法可以实现录屏功能,我们将它投放到video标签中进行播放,然后截取其中的一帧。video标签放在最底层藏起来(display不能设none),计算目标元素的位置进行截图...原创 2022-06-24 18:19:17 · 2770 阅读 · 0 评论 -
echarts点击数据联动列表滚动到对应数据位置
点击echarts中的散点图,左侧列表滚动到对应数据位置。使用jquery的scrollTop方法,需要自己计算滚动的偏移距离。我的列表每列都是30px,dataIndex是点击的数据在echarts中的索引,要确定echarts和列表之间数据的对应关系,我这里使用同一组数据 this.chart.on('click', params => { $('#list').animate({scrollTop: params.dataIndex * 30}, 400);});...原创 2022-04-15 16:49:27 · 1100 阅读 · 0 评论 -
ztree隐藏无叶子节点的父节点
递归的方法遍历节点,计数有无子节点,无子节点直接隐藏hideNoLeafNode(ztreeObj.getNodes()[0])hideNoLeafNode: function (rootNode) { if (!rootNode.isParent) { return rootNode.isHidden ? 0 : 1; } var nodes = rootNode.children; if (!nodes ||原创 2022-03-14 19:45:23 · 1093 阅读 · 0 评论 -
js百度地图计算点与折线最短距离
百度地图Android SDk中的方法,用js重写,原理不懂,实际使用时感觉有明显误差,但误差可以接受。/** * * @param linesPoint 折线点列表 Point(lng,lat) * @param point 计算最短距离点 * @param map 百度地图实例,用于计算两点间距离 * @returns {{distance: number, point: (*)}} 最短距离,点 */function getNearestPointFromLine(linesPoin原创 2022-03-02 19:22:58 · 2417 阅读 · 0 评论 -
echarts饼图轮播效果
echarts饼图轮播效果echarts提供的dispatchAction方法可以控制饼图某一段“highlight”’高亮,或“downplay”取消高亮。利用定时器控制饼图循环高亮。循环好做,主要是鼠标移入饼图也会触发高亮导致冲突,显示效果出现问题。需要同时监听echarts的mouseover事件,鼠标移入做特殊处理。 var option; var ele = document.getElementById("chart"); echarts.d原创 2022-02-21 19:58:10 · 2073 阅读 · 0 评论 -
自定义jsp标签
需求一个古老的项目使用jsp页面,shiro进行权限控制(已开发权限管理系统)。现在App要开发H5页面。由于身份校验方式不同,App使用后台H5页面不走系统中的shiro权限校验逻辑。现在想要使用当前shiro权限配置系统去配置App页面。现在可以通过静态方法获取用户的当前用户所拥有的权限代码。我们可以自定义一个jsp标签去控制权限实现准备一个java静态方法,输入权限字符串,输出true / falsepublic class ShiroUtil { public static Boole原创 2022-01-26 17:32:01 · 244 阅读 · 0 评论 -
vuedraggable两个列表拖动,当其中一个列表为空时,无法从另一个列表拖入
问题原因查看页面html文件,我发现他把transition-group标签转成了一个span标签,宽高还是0。当一边的列表为空时,我试图把另一个列表中的列表项拖入空列表正常位置时,无法拖入。但是当我把列表项拖到span标签的位置时,可以拖入。问题就出在这个span上,span是拖动的目标。我们需要给他一个宽高解决方案给transition-group标签设置宽高style(因为转成的span标签为行内元素,要加上display: inline-block才能设置宽高)<transiti原创 2021-12-02 20:28:49 · 1126 阅读 · 1 评论 -
百度地图框选时,在地图外松开鼠标报错
3d地图下引入框选插件DrawingManager.js,当拖动鼠标,鼠标移出地图外,松开鼠标后报错,地图中框无法删除。报错信息:DrawingManager.js:1552 Uncaught TypeError: Cannot read properties of undefined (reading 'lng') at getRectAllPoints (DrawingManager.js:1552) at HTMLDocument.endAction (DrawingManager原创 2021-12-02 19:51:31 · 1008 阅读 · 0 评论 -
多层iframe嵌套之间的函数调用
ruoyi中tab、弹窗是以iframe的形式添加到页面上的,这样想要实现类似广播的逻辑,一个iframe可以通知其他iframe做一些操作。iframe是有自己的window对象的,被调用的iframe原创 2021-11-10 14:22:41 · 1143 阅读 · 0 评论 -
thymeleaf抽取公共html控件复用问题
有时我们需要将html中多次出现的代码抽取出来,使用include进行复用。<th:block th:include="xxx :: xxx" /><div th:fragment="xxx"> <div onclick="testClick()"></div> <script> function testClick(){ ... } </script></div>组件不可避免的需要包括一些方原创 2021-08-18 16:09:13 · 265 阅读 · 0 评论 -
vue模板插值失效问题
用vue的模板插值,出现修改data值页面不变的问题<button @click="click">{{btnText}}</button>...data:{ btnText:'按钮'},method:{ click:function(){ $('button').ladda().start();//启动特效(瞎写的) }}由于我使用了ladda按钮特效,导致改变btnText结果页面显示不响应。猜测原因是,ladda特效修改覆盖了button的一些事件原创 2021-05-27 19:38:15 · 2954 阅读 · 0 评论 -
echarts同时显示折线图与散点图
想要的效果主要遇到的问题如下。原创 2021-05-25 20:05:03 · 4142 阅读 · 7 评论 -
js 将小数转为科学记数法
js 将小数转为科学记数法例如将数字0.00342331转化为3.42331×10^-3的方式展示先用toExponential方法把数字转为科学记数法的字符串,在用正则表达式将小数部分与10的几次幂分离 /** * 0.00342331转为3.42331×10^-3 * 转科学记数法 * @param num 0.00342331 * @returns [3.42331,-3] */ function toScientificNum(n原创 2021-05-19 19:37:43 · 1623 阅读 · 0 评论 -
laydate使用type=month时选中日期无法关闭控件
laydate使用type=month时选中日期无法关闭控件在change方法中用$(’.layui-laydate’).remove();方法可以关闭控件但是控件的左右切换年份也会触发change事件,我们加一个判断,如果年份改变了证明点击的是左右切换,此时不关闭控件在ready中写初始化年份值 var startMonth = laydate.render({ elem: '#startMonth', type:'month',原创 2021-05-07 18:46:07 · 1000 阅读 · 0 评论 -
vue v-show失效
使用v-show控制页面标签是否显示时,无论通过js或是通过控制台修改变量为true都无法显示,查看网页代码,发现标签中有display:none的样式。最后发现是由于我在子标签中调用了$(this).parent().hide();方法。<div v-show="isShow"> <div onClick="$(this).parent().hide();"></div></div>...原创 2021-04-06 19:36:41 · 669 阅读 · 0 评论 -
swiper grid计算宽高内容自适应
swiper网格显示swiper可以通过设置slidesPerView和slidesPerColumn来控制一次显示n*m个slide,其中slidesPerView控制有几列,slidesPerColumn来控制有几行。this.mySwiper = new Swiper('#my_swiper', { slidesPerView: this.columnNum, slidesPerColumn: this.rowNum, navigation: { n原创 2021-04-01 17:40:32 · 1577 阅读 · 0 评论 -
vuedraggable拖动控件的使用
需要引入两个js <script src="/plugin/vuedraggable/Sortable.min.js"></script> <script src="/plugin/vuedraggable/vuedraggable.umd.min.js"></script>原创 2021-04-01 16:36:02 · 1041 阅读 · 0 评论 -
vue动态渲染swiper问题
使用vue控制是否显示swiper的某个slide,出现swiper不显示,以及pagination联动失效等问题。 <div id="mySwiperPagination" class="swiper-pagination"></div> <div id="mySwiper" class="swiper-container" style="width: 100%; height: 200px;"> <div class="swiper-wrapper"&g原创 2021-02-25 19:31:27 · 1938 阅读 · 0 评论 -
使用datav时,容器高度改变后,动态改变轮播表的行数
在页面中使用轮播表当按f11改变窗口高度时,轮播表行数不变间隔会改变,我们想根据高度计算需要多少行<div id="list"> <dv-scroll-board :config="xxConfig" style="width:100%; height:100%"/><div>var myVue= new Vue({ el: '#myVue', data: { list:[], orgListR原创 2021-02-20 18:47:26 · 2566 阅读 · 0 评论 -
JS中使用闭包在循环中获取对应的i值
JS中使用闭包在循环中获取对应的i值问题描述问题原因解决方法问题描述在javascript中我们总是遇到在循环中声明一个回调函数,并且要用到当前循环的i值for(var i = 0; i < phoneList.length; i++){ sendAMessage('么么哒', function(){ console.log('第' + i + '个妹子对你说:滚'); });}我给10个妹子群发消息,可结果却是第10个妹子对你说:滚第10个妹子对你说:滚第10个妹子对你说:原创 2020-09-27 20:44:17 · 582 阅读 · 0 评论 -
用thymeleaf给shiro:hasPermission拼接权限字符串
问题描述前几天的一个项目里有几张逻辑表结构相同,就整合一张表来存,通过一个类型字段区分。于是这几张表同样用一个页面来展示数据。页面上的一些操作按钮通过shiro:hasPermission判断权限是否显示,于是就出现了一个问题。不同类型的数据要配置不同的字符串区分。<div shiro:hasPermission="haveXXXPermission">xx操作</div>比如一个苹果表,一个香蕉表。我想让苹果表显示xx操作,香蕉表不显示xx操作。就需要给haveXXXPer原创 2020-09-23 19:39:06 · 1196 阅读 · 2 评论 -
Validate 使用remote进行网络校验,并根据返回的值不同显示不同提示信息
Validate 使用remote进行网络校验问题分析校验代码注意事项问题分析验证用户账号是否已存在。在验证用户填入的是手机号格式账号后发起网络请求,查询该账号是否已经存在。校验代码 $("#form").validate({ rules: { userName: { required: true, isPhone: true, remote: {原创 2020-06-09 20:23:12 · 1273 阅读 · 2 评论