项目问题
文章平均质量分 60
吃炸鸡的前端
用爱发电
展开
-
electron-builder打包报错,解决Electron安装包下载慢的问题
electron-builder打包报错,解决Electron安装包下载慢的问题原创 2023-03-14 16:53:14 · 1589 阅读 · 0 评论 -
使用宝塔面板部署前端网站
添加一个38760的入口(为什么是38760而不是其他的,你要看上面宝塔外网ip的端口号,我的是38760,但是你起的可能是其他的,所以你要注意),其他选择如图。这里的ip地址(公)就是待会你要连接的服务器的ip地址,也是别人访问你网站的地址,可以注意一下。然后你就能找到你的服务器了,其中最重要的就是实例(管理你的服务器状态)和安全组(控制可访问该服务器的端口号)在登录到首页的时候,宝塔会提示你安装环境,你就直接选择左边的一键安装就ok了。在浏览器中输入你阿里云对公ip,就能访问到你的网站啦!原创 2023-03-13 22:33:07 · 2286 阅读 · 0 评论 -
electron打包之后托盘不见了
使用electron-build打包导致了右下角的托盘不见了,可以看到有桌面运用在运行,但是里面显示的是一个空的图片。这段代码主要意思是:在开发环境去加载public/logo.ico 在生产环境的时候去加载与.exe(就是安装包)统计目录的resources/public/logo.ico。下面可以看到我们把我们的安装包发给其他人安装之后,图片能在resources文件夹下找到,生产环境下,我们的托盘就是去加载这里面的图片。这是我之前的代码,在开发环境没有任何的问题。原创 2023-03-13 15:37:24 · 1176 阅读 · 1 评论 -
前端项目部署,阿里云服务器部署前端项目,超详细
作为一个前端,特别身处于中小公司时,对于部署也需要有所了解。本次就介绍前端基础的项目部署。本次使用的是阿里云服务器进行的部署。原创 2023-03-10 01:08:21 · 11599 阅读 · 16 评论 -
使用openlayers加载离线地图
使用openlayers加载离线地图2.选择需要下载的离线地图的瓦片(注意啊,这里的地图只能选高德地图的瓦片,其他地图的瓦片要么没有,要么就对不上号,会导致加载图片失败。很坑,一开始我以为是我代码的问题,结果并不是。这里我是先尝试,所以先下一个高德地图的瓦片试试,后面再用其他工具下天地图的瓦片,把瓦片换成天地图的瓦片,一样的)另外https://blog.csdn.net/qq_32077521/article/details/123224974这篇文章也说了怎么样自定义离线地图颜色的原创 2023-02-27 18:32:01 · 5311 阅读 · 17 评论 -
vue将html内容转为图片并下载到本地
涉及到canvas的转换逻辑,canvas会优先去找div的颜色(这里是因为没找到某些组件的颜色导致的文字颜色对不上),没有的话找到就往上找,找到html的文字颜色。原因:你使用的ref只能用于正常的html原生标签,比如div,h1,span等。不能用于一些组件的标签,比如ui库的元素,这样是不行的。解决办法:a(第一种方法):在非原生标签上面加一个div包住,然后在该div上加ref。解决办法:哪里的颜色不对,你就在css里面设置哪里的文字颜色。项目地址: 可看我里面的导出。使用=>html部分。原创 2022-11-01 17:09:10 · 1531 阅读 · 0 评论 -
思维导图mindmap的使用
可以根据数据量的大小,动态的增加或者减小高度,而不是在一个固定的宽高里面缩放(固定宽高数据量大时导出无法使用,上面的字很模糊)。主要是因为看起来比较好看,跟平时电脑端的思维导图比较像。数据量大时,撑开盒子,保证清晰度。使用方法:上面的地址有。原创 2022-11-01 16:20:02 · 651 阅读 · 5 评论 -
vue中key值的作用
但是有时候我们需要忘记密码的时候,我们会去切换表单,但是由于这两个表单长的十分的像,导致浏览器也识别不出来,于是导致了我们的账号密码都明文显示在了输入框内。解析:这是之前碰到的,大概就是tab切换两颗树结构(人员树,组织树)时,因为自己写的dom结构基本都相同,只是发的请求不同,导致从人员树切换到组织树的时候,组织树显示的数据还是人员树的数据。在加上key值之后,就能成功的切换了。因为vue对于长的很像的一些结构无法识别,会导致一些错乱问题,因此用key来作为唯一标识,就不会导致程序的错乱。原创 2022-10-25 11:54:37 · 447 阅读 · 0 评论 -
Vue+less+cssVal实现在线换肤
上次写的换肤方案是比较适合于自己系统给定几套固定样式用于让用户切换。但是如果有需要让用户自定义颜色和图片的话,这套换肤方案会比较适合你。该文参考了该篇文章,并对其做了一些改进。做了持久化以及图片的切换。应对需求默认有几套主题色供用户选择用户也可以自定义主题色用户选定主题后需立即生效,无需重启项目或重新打包项目一、准备工作1.创建vue项目2.安装插件(使用less)二、新建style.lessstyle.less用于配置全局的默认样式,也可以是默认主题或字体颜色。原创 2022-09-16 11:24:49 · 631 阅读 · 0 评论 -
最成熟的前端换肤方案(主题切换)
在网上找了很多的换肤方案,其中我认为写的最好的也是有demo 的无疑是这篇,但是同时也发现了一些问题,就是太多方案不知道选哪个,而且没有做持久化处理,并且没有把图片切换的代码放在一起。我这边的需求是需要换背景,同时也是需要切换图片的,为了大家便于理解,于是我根据他的demo改写了一下,做了持久化和图片的切换。这篇文章写的换肤的方案有很多种,但是根据多方的调查以及搜索,最终我这边确定的是通过 CSS变量兼容性实现-2 这个方案来做的,最大的原因是便于维护,且不会对现有项目做很大的变更。原创 2022-09-16 09:49:23 · 2027 阅读 · 3 评论 -
require.context命令的使用 require.context基本使用
require.context命令的使用 require.context基本使用原创 2021-09-17 03:49:21 · 2636 阅读 · 0 评论 -
左边&中间盒子高度随右边高度变化
项目中有个需求,大概就是父盒子非固定高度,左边子盒子高度随右边子盒子的高度变化而变化,具体的效果如图。代码demo已经放到github了,需要可以直接下载就行了链接:https://github.com/rui-rui-an/leftautoheight<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib原创 2021-09-28 22:51:05 · 397 阅读 · 0 评论 -
教你用v-model二次封装dialog
教你用v-model二次封装dialog在项目中,弹框也是一个高度可复用的组件,特别是去基于element-ui来二次封装的dialog。原因大概有以下几点把:1.与UI给的样式不对 2.弹框的内容比较多但是该弹框用到的地方又多 3.便于维护,粘贴复制大家都会,但是,轮到产品经理或者UI调整的时候,就会傻眼了,怎么复制粘贴了这么多地方,改起来不得死啊。所以,如果在项目中多次用到又相似的弹框,我们也可以封装成一个全局组件,使得开发更好的进行下去。接下来就是我们的二次封装的过程。首先来看效果图,这里原创 2021-10-10 23:56:31 · 1208 阅读 · 2 评论 -
vue-virtual-scroller用法,长列表优化
vue-virtual-scroller的使用,长列表优化,虚拟列表,纵想丝滑对于长列表来说,我们大部分的操作都是:1.懒加载,分页,2.Object.freeze冻结数组取消响应式,因为大多时候都是展示 3.高清图替换成缩略图,因为很多时候长列表的图尺寸都比较小,所以可以用小图来代替以上能解决大部分的长列表问题,在可以分页的情况下但是,还有两个问题没有解决,那就是:1.不能分页的时候怎么办2.当用户向下滑动加载了很多很多的内容时,可能是1000个10000个的时候。这个时候浏览器就会变得卡顿,原创 2021-10-14 00:28:39 · 23047 阅读 · 6 评论 -
子组件emit有参数,父组件也有参数,子组件用emit传递参数的同时,父组件也传递参数
子组件emit有参数,父组件也有参数子组件emit有参数,父组件也有参数,子组件用emit传递参数的同时,父组件也传递参数原创 2021-10-19 23:51:49 · 1203 阅读 · 0 评论 -
base64格式的pdf预览
base64格式的pdf预览在项目中我们会遇到预览pdf的需求,一般的需求都是要求能直接打开,一般后端回传pdf的格式有两种,一种是直接传pdf的url地址,还有一种就是直接传回来base64格式的pdf。怎么知道是base64格式的pdf呢,一般的格式都是下面这样子的JVBERi0xLjQKJeLjz9MKMiAwIG9iaiA8PC9MZW5ndGggNzUzL0ZpbHRlci9GbGF0ZURlY29kZT4+c3RyZWFtCnicrZY/TxRBGIcXEy220d5mQgUF47zzf7E原创 2021-11-20 16:45:56 · 14917 阅读 · 1 评论 -
element table列数不一定怎么渲染
element table列数不定在项目里有时会遇到渲染的table列数是不定的,后端可能今天传10列给你,后天可能就传20列给你了。遇到这种情况,我们就不能用element table官网上写的那种方式了。而是,我们需要使用数组的方式来进行遍历。1.html结构 <el-table :data="tableData.list" style="width: 100%" :height="500" > <el-table-colu原创 2021-11-20 20:41:27 · 1759 阅读 · 0 评论 -
饿了么table鼠标移入改变背景颜色
饿了么鼠标移入单元格变色背景颜色实现效果:代码:::v-deep .el-table .el-table__body tr td:hover{ background-color: #d4b021 !important;}边框实现效果:代码:::v-deep .el-table .el-table__body tr td { border: 2px solid transparent !important;}::v-deep .el-table .el-table__body原创 2021-11-20 21:22:21 · 756 阅读 · 0 评论 -
高德地图轨迹及进阶交互
高德地图轨迹及进阶交互如图为基本的轨迹:基本轨迹点点击之后(1.该点高亮,2.左侧自动找到对应的点加上蒙版表示选中,3.右侧信息框浮现):关闭右侧信息框(高亮没有,左侧蒙版消失):点击左侧轨迹列表(1.找到轨迹图中的该点进行高亮,2.同时右侧信息框浮现):注:轨迹点和轨迹线可以根据不同的数组来绘制(出现情况:一个地方出现多个轨迹点的时候,如果直接按未去重的数组绘制,则会在同一个地方绘制多个图形。轨迹线,可以按未去重的数组来绘制,因为重叠了就相当于没走过。)轨迹线,轨迹点等都已组件化,直接原创 2022-02-16 16:01:25 · 778 阅读 · 0 评论 -
高德地图轨迹及基本交互
高德地图轨迹及基本交互如图为基本的轨迹:基本轨迹点点击之后:注:轨迹点和轨迹线可以根据不同的数组来绘制(出现情况:一个地方出现多个轨迹点的时候,如果直接按未去重的数组绘制,则会在同一个地方绘制多个图形(有问题)。轨迹线,可以按未去重的数组来绘制,因为重叠了就相当于没走过。)轨迹线,轨迹点等都已组件化,直接传参便可使用,如样式不同,则更改样式即可重点提示,高德地图点击事件不会携带该item的信息,需要自己额外添加extData,然后使用点击事件中的e.target.getExtData()来获取原创 2022-02-16 15:38:31 · 1096 阅读 · 0 评论 -
css-filter让png和svg图片变色
filter让png和svg图片变色原创 2022-01-21 16:40:41 · 1966 阅读 · 0 评论 -
echarts关系图谱交互实现
echarts关系图谱交互实现具体实现的效果如图(主要是使用了echarts的力引导图),主要是为了展现人与人还有人与物之间的关系。如果你的项目只是用于展示的话,那么使用这个demo应该就能帮助到你。demo地址:但是如果你的项目不只是用户展示这部分的信息,还要求点击事件,并且要求可以用户自己手动去添加关系的话,那么你就应该需要下面这个demo了实现效果:点击图标会显示具体该图标的信息(入人,则显示人的信息),点击关系线会显示关系线的信息,点击空白则是添加模板,默认是去添加微信的模板(这里的添原创 2022-02-23 18:21:36 · 993 阅读 · 0 评论 -
echarts关系图谱初级实现
echarts关系图谱初级实现具体实现的效果如图(主要是使用了echarts的力引导图),主要是为了展现人与人还有人与物之间的关系。如果你的项目只是用于展示的话,那么使用这个demo应该就能帮助到你。demo地址:.........原创 2022-02-23 17:43:20 · 596 阅读 · 2 评论 -
前端js列表查询策略
就是说你的v-model绑定的什么,你就用什么进行查询(此时为粤B888,则就按粤B888查询)。如果查询页数为1000页,但是在该页上没有内容,则应该将页码设置为1,再次进行查询。但是里面一个非常容易出bug的地方就是,当用户直接输入了一个内容,没有点击查询按钮,而是直接去点击了页码进行查询。或者说应该是怎么样的,我们都应该需要清楚的问清楚产品。这里也可以理解,毕竟你没有点击搜索按钮,所有你不点搜索按钮就点了页码跳转的话,就不会用你现在的条件查询(可以参考天猫,京东的搜索也是该策略)。...原创 2022-08-01 09:08:47 · 864 阅读 · 0 评论