前端开发
粉末的沉淀
无趣
展开
-
uniapp:如何修改组件默认样式
日历组件默认样式如下图,但是我不想要右上角的红点,并且日期下面的数字要加红色背景,变成圆形,还是先用元素检查找到元素的类名,然后通过/deep/来覆盖样式,需要注意的是,lang要scss或者less,lang必须要写,否则不生效。但是今日的颜色还是蓝色,我试了一下,用上述方法不管用,这时候就可以试试直接去组件里修改,通过全局搜索可以找到样式的具体在哪个文件里。总结一下:先查找元素,然后用/deep/覆盖样式,如果无法覆盖,就直接去组件里修改样式。进过样式覆盖后,基本效果都达到了预期。原创 2023-09-25 20:15:47 · 2180 阅读 · 0 评论 -
uniapp:如何修改路由加载条的样式
路由加载条默认是绿色,通过元素选择工具我们可以知道元素的类名是#router-loadding .loadding,具体设置在h5-dom.js文件里。important一定记得要加,否则不生效,如果还不行,就试试加/deep/.加载条变成红色,并且右边的元素查看也显示样式被覆盖了。原创 2023-09-25 11:39:30 · 360 阅读 · 0 评论 -
css:全局设置滚动条样式:鼠标移入才显示
需要注意的是,如果容器想要带滚动条,那么它本身要设置滚动overflow: auto;否则全局设置滚动条也是无效的。全局引入该css文件即可。原创 2023-07-07 17:34:21 · 3547 阅读 · 1 评论 -
ant design vue:带日期标记的日历
在template里直接用moment,先import然后还需要在data里再定义一下moment。,如果是做项目的话,直接在App.vue文件里设置,整个项目的antd组件就都被汉化了。,我的日历头部右边只需要显示月,不需要年,把年的部分去掉即可。日历默认是英文的,需要汉化,原创 2023-02-21 10:01:00 · 1815 阅读 · 0 评论 -
echarts:去掉markLine
想要去掉markline,要用this.option.series[0].markLine.data[0].yAxis = {},千万不要写成this.option.series[0].markLine.data[0] = {},否则会一直报错。需求:当markline的值为0的时候不显示,不为0的时候则显示。初始值都是0,然后根据自己的条件给每个markline赋值。三元运算符里要写===,我开始写成了=,浪费很多时间。我的图里有多条markline,如下定义。原创 2023-01-28 18:53:44 · 1220 阅读 · 0 评论 -
uniapp:在HBuilderX里使用夜神模拟器
4、点击刷新,就可以看到62001端口的设备了,如果提示找不到设备,可能是端口配置错误或者模拟器没有启动。5、点击右上角的齿轮,可以进行系统设置,比如我想要模拟安卓平板电脑,就选择对应的分辨率即可。点击运行,就从HBuilderx跳转到夜神模拟器去了,会弹出很多权限设置,点击允许就可以了。1、选中需要调试的移动项目,点击运行 ->运行到手机或模拟器->ADB路径设置。如果不知道模拟器的端口怎么办,例如多开模拟器,怎么查看模拟器端口号是多少?2、打开夜神模拟器,点击右侧的模拟器助手图标。原创 2022-11-21 11:19:21 · 4715 阅读 · 4 评论 -
uniapp:使用百度API提取身份证信息(微信小程序适用)
但是接踵而来的问题是,获取token和获取图片都很快,但是识别图片内容超级慢,开始以为是我的网络问题,提高了网速后,识别速度稍微提高了一点,但依旧觉得无法接受,最后在室友的建议下,尝试修改自定义相机的quality参数,网上抄来的代码,设置的是high,也就是说图片高清,信息量可能太大,导致识别速度慢,改成low,识别依旧很慢,最后设置为normal,识别速度终于可以接受了。3、使用前面的token和base64,跟百度发起请求,识别图片内容,提取到身份证信息。原创 2022-10-21 16:17:37 · 2885 阅读 · 0 评论 -
echarts:面积图按照数值标记颜色
网友求助,要做如下echarts图,分析一下,这是一个基础面积图,然后超过30就标红,低于10就标黄,中间10-30的markarea区域是浅灰色,难点在于标黄的区域,它在折线上边,如果在折线下边,那就好办了。实现过程:1、先画一个面积图,然后利用visualMap来分段设置颜色。参考官网的案例但是我们这里是要根据y轴的值来设置,官网案例是根据x轴,我们需要把dimension: 0, seriesIndex: 0,去掉,然后gt、lt这里设置y轴的值。现在我们得到这样...原创 2022-05-31 12:10:13 · 2867 阅读 · 0 评论 -
threejs:两点坐标绘制贝赛尔曲线遇到的坑
飞机从武汉飞往背景,根据起点和终点,需要绘制飞机航线,网上搜来的通用代码运行后一直找不到copy属性。坑1:ray的at方法参数变更:仔细排查发现,是ray的at方法修改了,现在必须要两个参数了,只需要增加一个临时变量来充当at方法的target 参数,只需要修改一点点就可以了。坑2:并非所有的起点和终点都可以绘制贝塞尔曲线:代码跑通后,我随便设置了如下图的一组起点和终点,结果绘制的是一条直线。v0和v3设置成下图,甚至还报NAN的错!直到我把v0和v3设置.原创 2022-05-27 09:57:18 · 1641 阅读 · 2 评论 -
threejs:流光效果封装
在网上看到的这种流光效果,在某宝买了源码后,决定把这个效果封装成js文件,以后用起来就很方便了。flyCurve.js文件代码如下:import * as THREE from 'three'var uniforms = { u_time: { value: 0.0 } };var clock = new THREE.Clock();export const timer = setInterval(()=>{ const elapsed = clock.getElaps原创 2022-05-26 09:23:45 · 4683 阅读 · 7 评论 -
threejs:如何获得几何体的boundingBox?
如果我们直接打印boundingBox(如下图),得到的结果将会是null,需要先计算,然后再打印。正确的做法:同理,Geometry的很多属性,也都是要先计算后取值。Three.js中文文档原创 2022-05-25 10:31:46 · 1386 阅读 · 0 评论 -
threejs:vue导入gltf模型报unexpected token < in json at position 0错误
1、在vue文件导入GLTFLoader.js2、初始化loader需要注意的点:文件必须放在public下面,否则会报unexpected token < in json at position 0错误。路径是'/static/gltf/Duck/glTF/Duck.gltf',前面不用再加public了。不要用function而要用=>,否则this指向会乱。用一个全局变量把导入的模型保存起来,以便其他地方调用。mounted里先导入模型,然.原创 2022-05-20 15:12:53 · 6505 阅读 · 14 评论 -
threejs:vue里dat GUI的简单用法
1、引入datGUIdatGUI并不是threejs自带的,需要自己另外下载。2、定义datGUI的控制器和添加到控制器里的对象3、对以上两个变量进行初始化CtrlObj是一个对象类型,那么要记得,对象类型的数据由key和value组成,如果key比较少,可以写成上图的形式,如果key比较多,建议用.keyname的形式,如下图,0.01就是key的默认值。4、添加控制器对象到控制器引号里的名字必须跟对象的key一致,后面的两个数据是设置最大值和最小值。...原创 2022-05-20 14:58:40 · 1741 阅读 · 0 评论 -
threejs:near和far设置错误导致阴影无法显示
关于阴影设置的文章:threeJS中,那些会让阴影失效的操作_weixin_34308389的博客-CSDN博客THREEJS阴影效果_溜得飞起的博客-CSDN博客_threejs 阴影明明自己的代码跟老师的一模一样,为什么阴影就是出不来?花了两小时一行一行代码查,最后发现竟然是near和far设置反了导致的,near一定要比far小才可以。一个完整的代码如下:<template> <div> <!-- 本案例演示添加阴影 --> &l原创 2022-05-19 13:45:41 · 1062 阅读 · 0 评论 -
threejs:相机位置太近导致几何体无法显示
今天是学习threejs的第一天,一切都进行得挺顺利的,唯一的问题是,设置物体尺寸的时候,必须是小于等于1的值,才能显示出来,大于1了,就看不到物体了,把代码截图给网友,网友指出,是相机的位置太近了,相机的位置是1,如果尺寸设置超过1,相当于相机放到物体里面去了,所以就看不到物体了,原来如此!想要尺寸设置为5,name相机的位置要超过5才好。...原创 2022-05-18 19:14:58 · 899 阅读 · 0 评论 -
echarts:把水球图放到地图上
B站看到这张图,很想学习一下,给up发了私信,可是截止到现在还没有回复,我打算自己先动手研究一下,也是一个学习知识的好机会。实现思路:刚开始的思路是,底图是3D地图,然后上面放水球图,但是水球图并不支持geo坐标,然后寻思着是地图上加散点,然后将散点的symbol设置为gif图,但是我没有美工帮我做这种图,只能作罢,而且就算有美工作图,清晰度不见得很好,symbol也不一定支持gif。继续思考,想用label的回调函数,返回html格式,结果发现label不支持返回html,又想着toolt原创 2022-05-17 20:22:49 · 775 阅读 · 0 评论 -
echarts:map3D上的散点点击失效
问题描述:网友求助说他用echarts做map3D图,想要点击散点,然后获取散点里的信息,但是点击失效,困扰好几天了。发了项目给我,仔细研究了一下结构,地图是geo3D,然后利用for循环,在上面加散点图,分别给每个散点设置不同的symbol和symbolsize等,散点数据以供12条,也就是说地图上放了12张散点图,每个散点图里只有一个散点,研究了半天,也没发现有什么异常。解决过程:百度了一圈,根据一个帖子的解决方法,把geo也加入到series里去,可以触发点击事件了,但是点击获取到的只是g原创 2022-05-16 10:03:01 · 3668 阅读 · 4 评论 -
ant design vue:自定义省市分离选择器
jeecgboot自带省市区组件,但是我们的需求是输入户籍,一般来说户籍只需要输入省和市即可,所以jeecgboot自带的省市区组件不适用。实现思路:放两个select,第一个是省,第二个是市,市的option要由选择的省来确定,两者由联动关系。实现步骤:1、数据库分三个字段,province(省),city(市)和register(户籍),省和市存code,户籍存文本,根据省市code对应的文本进行拼接即可得到户。在表单页只显示province和city字段,客户下拉输入,在查询页只显示r原创 2022-04-27 15:30:11 · 2545 阅读 · 0 评论 -
ant-design-vue:利用sortablejs实现tab 标签页的拖拽
使用yarn add sortablejs安装sortablejs插件,也在main.js里正确引入并且和vue绑定了,但是一直报这个错。实在不想解决这个报错了,于是直接下载了Sortable.min.js,从index.html引入。<template> <div> <a-card style="width: 1000px;"> <!-- 测试 ant tag 组件的拖拽 --> <a-tabs type="ca..原创 2022-04-23 21:35:50 · 2349 阅读 · 0 评论 -
JavaScript:使用xlsx-style插件导出多个sheet
参考:JavaScript:在vue里使用xlsx-style插件创建带样式的excel文件_粉末的沉淀的博客-CSDN博客<template> <div style="width: 400px; margin:100px auto;display: flex;justify-content: space-around;" > <button @click="exportExcel">导出单个sheet</button> <butto原创 2022-04-14 10:38:47 · 1566 阅读 · 1 评论 -
JavaScript:在vue里使用xlsx-style插件创建带样式的excel文件
前面有一篇博客写了利用a标签生成excel文件,虽然简单,但不算太完美。JavaScript:利用a标签生成excel文件_粉末的沉淀的博客-CSDN博客在看了N多文章尝试了N多次后,终于找到了合适我的方法。1、xlsx和xlsx-style的关系两者都可以实现创建excel,但是xlsx免费版仅仅只能做单元格合并,收费版才能设置单元格样式,xlsx-style是基于xlsx的插件,免费,可以设置单元格样式,但是缺少了xlsx插件里很多实用的功能,比如aoa_to_sheet,可以直接把二维原创 2022-04-13 14:00:04 · 3905 阅读 · 3 评论 -
ant design vue:tooltip组件color设置失效的解决方案
可能因为我的ant design vue版本太低不支持color属性,按照官网设置color无效,各种百度终于找到了合适自己的方法:1、修改浮层默认的渲染父节点,默认是body2、修改提示框和小三角的样式(背景色),记得一定要加/deep/.<template> <div style="width: 200px; margin:100px auto;"> <a-tooltip title="导出excel" :getPopupContai.原创 2022-04-12 15:52:46 · 2887 阅读 · 1 评论 -
JavaScript:利用a标签生成excel文件
<template> <a-button type="primary" @click="tableToExcel">导出excel</a-button></template><script> export default { data() { return { spcDatas:[ ['上公差:13.7','下公差:13.1','标准值:13.4'], ['sigma:0.11','Cp.原创 2022-04-12 14:49:30 · 1184 阅读 · 1 评论 -
jeecgboot:面包屑设置
1、设置面包屑:把一级菜单设置为layouts/PageView.面包屑效果如下图:角色列表后面还有一长串功能描述,在对应的vue文件里定义description即可,如果不需要描述,就不用定义了。2、如果不需要显示面包屑,一级菜单设置为layouts/RouteView即可。...原创 2022-04-05 11:15:37 · 1891 阅读 · 0 评论 -
jeecgboot:自定义首页
1、最简单的办法是先备份Analysis.vue,直接修改改文件的代码,菜单名称仍显示为首页。2、如果一定要修改菜单名称,比如把首页改成实时监控:1)在前端修改菜单名称2)全局搜索替换前端代码,把首页替换成实时监控。3)修改后端代码,SysPermissionController.java,把首页都替换成实时监控,不然登录成功后没法跳转到首页,就一直卡在登录那里。建议还是第一种方法,菜单名称保持为首页,避免产生异常。...原创 2022-04-05 10:17:30 · 4141 阅读 · 2 评论 -
ant design vue:tree select根据层级设置不可选
官网的案例,直接从数据生产tree,这种方法固然简单,但是我这个需求要根据tree的层级来设置是否可选,所以需要进一步设置每一个层次的node。<a-tree-select v-model="value" style="width: 100%" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="treeData" placeholder="Please select原创 2022-04-03 13:47:23 · 5487 阅读 · 0 评论 -
css:条件样式
<div :class="(loseControlRIndexes.indexOf(index2)>-1&&index==rows-1)||(loseControlXIndexes.indexOf(index2)>-1&&index==rows-2)?'red':'black'" style="width: 75px;" @click="downloadData(items.filePath)" @mouseenter="mouseEnter(items.原创 2022-03-30 14:03:34 · 1896 阅读 · 0 评论 -
JavaScript:hasOwnProperty判断一个对象是否包含某个属性
let has = record.hasOwnProperty('testItemCode');参考:JS hasOwnProperty()方法:检测一个属性是否是对象的自有属性原创 2022-03-17 13:50:14 · 810 阅读 · 0 评论 -
JavaScript:获取当前事件的元素
1、在监听事件里加入$event参数。<div ref="cell" style="width: 75px;" @click="downloadData(items.filePath)" @mouseenter="mouseEnter(items.filePath,$event)" @mouseleave="mouseLeave($event)"> {{items.value}} </div>原创 2022-03-04 12:13:22 · 4688 阅读 · 0 评论 -
ant design vue:添加字段交互校验规则
a-form-model自带的:rules="validatorRules"可以给form里每个字段设置校验规则,比如必填,必须为数字等等,但是如果添加字段交互校验规则,比如A字段必须大于B字段,就需要使用函数来校验了。1、函数校验规则要定义在data下边,return的上边。2、然后把刚才定义的校验规则加到validatorRules里面去。 // 加在lsl上的校验规则,value是指lsl的值 let handleValidatorLsl = (rule, value, c原创 2022-03-04 12:03:27 · 1361 阅读 · 0 评论 -
echarts:迁徙图
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>echarts迁徙图</title> <script src="js/echarts.js"></script> <script src="js/map/js/china.js"></script> </head> <body.原创 2022-01-24 23:04:11 · 1082 阅读 · 4 评论 -
JavaScript:阻止form提交按钮的默认行为
右边是一个form,可以修改图表的一些信息,但是发现提交后图表信息并未更新,原因是form的提交按钮默认为的type为submit,点击后页面会刷新,重新回到初始状态,那么图表的信息又变成了初始值,最简单的办法是把type改为button,使其成为一个普通的按钮。<form> 图表配置<br> 图表名称<br> <input type="text" id="title" value="图表名称"> <br>..原创 2022-01-17 20:27:32 · 604 阅读 · 0 评论 -
uniapp:去掉微信小程序顶部的导航栏
默认情况下是这样的,顶部会有一片空白区域。在pages.json里修改为自定义导航样式,就可以顶格显示了。{ "path" : "pages/index/index", "style" : { "enablePullDownRefresh" : true, // #ifdef MP-WEIXIN "navigationStyle": "custom" // #endif ...原创 2022-01-17 18:36:09 · 6121 阅读 · 0 评论 -
uniapp:使用字体图标
uniapp本身有icon组件,但是数量毕竟有限,如果想要自定义icon,也非常简单。1、在iconfont网站添加需要的图标2、将图标添加至项目3、在我的项目里生成代码4、将生成的文件下载至本地5、把iconfont.css和iconfont.ttf文件拷到static的fonts文件夹下。6、修改iconfont.css文件@font-face { font-family: "iconfont"; src: url('~@/static...原创 2022-01-17 16:17:32 · 1477 阅读 · 0 评论 -
uniapp:开发微信小程序
1、直接在里HBuilderX创建uniapp项目2、运行->运行到微信小程序模拟器3、如果没有安装微信开发者工具,就根据提示框里的链接下载并安装4、打开微信开发者工具的服务端口5、在HBuilderX这边都编译通过后,再到微信开发者工具里导入刚才创建的uniapp项目。这里要特别注意,并不是直接把整个项目导入,而是unpackage下的dist>dev>mp-weixin....原创 2022-01-17 11:51:57 · 2465 阅读 · 0 评论 -
echarts:为tooltip添加链接
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>ECharts</title> <script src="js/echarts.js"></script> <style> /* 去掉链接下划线 */ a { text-decoration:none } </style>.原创 2022-01-16 20:35:19 · 1763 阅读 · 0 评论 -
vue:使用settimeout获取接口数据
按照先从接口获取数据然后生成图表的思路,在data里给图表需要的数据一个初始值,然后在mounted里面按照先后顺序调用了获取数据和初始化图表的方法。但是执行后发现,initMap永远获取到的是data里stations的初始值,而不是getGasStationInfo()里从接口获取的值,接口调用没问题,也能打印出来数据,但initMap就是一直得不到接口返回的数据。问题排查:1、...原创 2022-01-04 15:39:46 · 1052 阅读 · 0 评论 -
css:overflow-x: overlay对火狐浏览器无效
前面我们使用了overflow-x: overlay设置了滚动天不占位置css:overlay使滚动条不占据位置_1111111111-CSDN博客_css滚动条不占位置但是后来发现这个设置对狐火浏览器无效,根本就不显示滚动条了。解决方案是再加一个overflow: auto设置,保证在火狐浏览器里也能显示滚动条,只是无法像谷歌浏览器里那样overlay而已,能显示总比不显示要好呀。<a-col flex="auto" style="border: 0;overflow: auto;原创 2021-12-24 13:43:09 · 2624 阅读 · 0 评论 -
echarts: legend自定义icon
1、引入图片。import iconUrl from '../assets/gas_station.png';2、在legend里面定义iconlegend: { data: ['审批完成', '待审批', '驳回'], icon: ('image://' + iconUrl + ''), itemWidth: 20, itemHeight: 20 },因为我这个图片是32*32像素的正方形,所以要设置itemWidth和i.原创 2021-12-16 13:25:25 · 2690 阅读 · 0 评论 -
jeecgboot:设置为缓存路由,切换页面,保留数据
在A页面输入数据后,切换到B页面,再回到A页面的时候,刚才输入的数据就丢失了,十分不方便。解决方案:在该页面对应的菜单管理里面,设置为缓存路由,切换页面后数据就不会丢失了。最终效果:...原创 2021-12-10 16:01:44 · 4632 阅读 · 13 评论