- 博客(79)
- 收藏
- 关注
RSS订阅原创 jenkins发布失败
根本原因是：在配置中给yarn指定的淘宝仓库地址过期了，换成`从控制台可以看出，项目依赖没有下载下来，所以打包失败了。今天用jenkins发布项目时失败了，而前几天还好好的。云控制台看了下，发现根本就没打包。
2024-01-26 15:13:46
987
原创 el-upload实现复制粘贴图片
项目上线后，经使用人员反馈，上传图片、视频每次要先保存到本地然后再上传，很是浪费时间，公司客服人员时间又很紧迫（因为要响应下一位客户的咨询），所以想直接复制图片到表单中，实现自动上传。border-bottom: 1px solid #ccc"`隐藏富文本工具栏，我们只是复制图片，用不到工具栏。3、上面代码中虽然配置了上传图片API，但是没有用到，因为图片默认使用了`base64格式`而不上传。5、使用`base64`格式插入图片后，会触发`onInsertedImage`事件。1、初始化富文本编辑器。
2023-09-26 10:05:37
377
原创 uni-app使用vue3，在元素或组件实例上添加ref，用this.$refs显示undefined
项目中引用了一个UI组件库，在表单上添加了`ref`属性，方便提交时验证。触发提交方法时显示不存在这个方法或this.$refs为undefined。然后用`ctx.$refs`代替`this.$refs`。这里的`ctx`相当于全局this。
2023-09-23 00:55:07
2871
原创 详解window.print()，实现长列表打印分页
其实我们只要控制打印的行数就可以了。我们需要知道打印元素的高度和表格行的高度，算出一页纸可以打印多少行，超出的部分放到下一页打印。4、-webkit-print-color-adjust：是一个在浏览器中强制打印背景颜色和字体颜色的css属性，当打印出来的某些元素的背景颜色没有被显示时，可以使用。我们页面的样式和打印页面时的样式是两个不同的样式，打印时会默认携带页面的样式，同时呢我们也可以修改页面打印时的样式。1、先获取指定容器中的内容，将body的内容替换掉，调用了打印方法后，再把原来的body恢复。
2023-09-22 00:15:06
2933
1
转载 electron通过删除未使用的语言文件缩减打包后大小
我用的vue-cli-plugin-electron-builder, electron-builder配置在vue.config.js中，如下。electron打包或安装完应用后，有个locales目录，里面包含了大量的语言文件，加起来有6.5M的大小。这样打包后体积大约可以减少1.5M左右，还是比较可观的。1.主进程中（background.js）添加命令。2.配置electron-builder的。3.打包后移除不用的语言文件。
2023-08-16 19:28:28
936
原创 vue自定义指令--动态参数绑定
在企业微信侧边栏应用中，给`dialog`添加了拖拽功能，但是因为`dialog`高度超过了页面高度，所以高度100%时拖拽有个bug--自动贴到窗口顶部而且企业侧边栏宽高都有限制，拖拽效果并不理想，所以就想缩小`dialog`再进行拖拽。拖拽的指令是自定义的，原本想像绑定`class`一样根据一个参数来动态绑定指令，发现没有这种功能。后来看了文档，可以给指令动态传递参数，根据传递的参数来判断之后的行为。：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。封装的指令在组件中引用。
2023-08-14 20:08:27
570
原创 el-upload上传图片和视频，支持预览和删除
上传附件没有使用单独的上传接口，是调用添加记录接口时，统一传参保存。添加接口请求成功后再回显。
2023-07-27 18:10:50
3218
原创 Bootstrap+echarts实现轮播效果 第二屏echarts图不显示
最近写了个大屏需求，有轮播效果，原代码用的jQuery+bootstrap，所以轮播就用了bootstrap的轮播组件。写好后发现有个问题，首屏的echarts图渲染成功，第二屏及后面的都没渲染出来。故该层的长宽没有被初始化，而echart在页面加载完时就开始创建图表，此时轮播的第一屏被激活（active）,故正常显示，第二屏没有active，div的长宽没有被初始化，故显示不了。究其原因是，轮播图中的active样式中的display属性问题，当没有active样式时 display为none，
2023-06-13 11:19:32
348
原创 map循环调用接口并发问题
项目中有个需求是从本地数据库查询数据，数据可能有多条且是重复的，然后再循环调用后端接口，理想的状态是第一次请求成功之后 再进行第二次请求。forEach、map这样的高级循环遍历函数，在循环的同时，是不能更改内部item对象的（await是异步转同步的写法，但并不会阻塞主线程的同步进行的代码，只会阻塞异步代码。代码中使用了`async/await`关键字，但是并没有起作用。map更改后，返回的是新数组，forEach是原数组被更改。），所以在map使用await不起作用。
2022-12-14 11:47:45
664
1
原创 ElementUI的switch组件文字显示在按钮上
我们想让switch开关打开的时候只显示未过期。只要修改它的样式就可以达到我们要的效果。其实
2022-11-15 09:18:15
1319
原创 Element级联选择器自定义value label
实际项目中后端返回的数据属性可能不是以`label/value`等命名的，这时候数据就渲染不上去。我们需要利用`props`指定选项的值为选项对象的某个属性值。
2022-08-25 14:20:52
1644
原创 elementUI级联选择器触发方式为hover时出现黑色背景
最近做项目时用到了级联选择器，就出现了这个bug。以前用没有出现过这个情况，不知道和框架有没有关系。框架自带的element版本上2.8.0，我以为是版本问题，升级到最新版本项目直接报错。后来退了一个版本项目可以运行了，但hover时黑色背景依然存在。仔细查看元素后，发现是列表ul中的svg的path出了问题，将其隐藏就好了。
2022-08-25 09:13:23
678
原创 echarts漏斗图的label右对齐解决方案
创建一个容器，将漏斗图和一个新div放到里面，然后将容器定位设置成`relative`,div的定位设为`absolute`。连接线用`hr`,重写样式。连接线宽度是一样的，所以标签能对齐。方法一：创建一个div，利用绝对定位定位到需要的位置。方法二：利用两个漏斗图，让其中一个不显示label。两个漏斗图的data值是一样的。这个方法的缺点是间距不太准确。
2022-08-23 17:40:28
1575
原创 echarts横向柱状图标签靠右对齐显示
上图中其实每条柱子只有一条数据，我们现在把它当作两条数据来看，左边一条，右边一条，然后把两条数据重叠在一起，就可以渲染出一条数据的视觉。两条柱条的数据是一样的，只不过左边的柱条不显示label，只让右边的显示。柱状图有背景色并且标签右对齐。本来以为echarts自带这些属性，查看了之后并没有找到直接能右对齐的属性，只有添加背景色的属性：`showBackground`，且这个属性是大于等于4.7版本的可以。比较重要的步骤是第一条数据的`zlevel`设为2，第二条数据的`barGap`设为`-100`
2022-08-23 11:55:46
8571
3
原创 Echarts双Y轴，右侧Y轴标签不显示
echarts中有个控制y轴的属性叫yAxis，这个属性可以是对象也可以是数组。当我们只设置一个Y轴时，它为对象；当我们要设置多个Y轴时，它是个数组。双Y轴时，右侧的Y轴标签不显示。
2022-08-17 17:13:07
9172
1
原创 Echarts中rich属性的使用和调整label显示位置
在echarts中rich主要是用于设置用户自定样式，我们可以在title，legend，tooltip等中使用rich，比如下面这个需求就可以用rich属性来实现。
2022-06-30 10:55:22
11581
原创 Element表格高度根据浏览器窗口大小动态改变
`el-table`默认展示20条数据时，表格高度可能会超出当前页面的高度，此时页面会出现滚动条，我们往下拖动的时候表格下方的数据是可以呈现出来，但表头可能就被页面遮挡住了。那往下拖动时怎么固定住表头呢？Element文档里说了，可以加`height`属性。比如：<el-table :data="tbData" stripe border height="500"></el-table>给`height`一个高度，这样是可以解决表头固定的问题。但是又会出现一.
2022-03-10 18:54:22
3272
1
原创 给Element表格添加滚动条并修改滚动条样式
需求如题，添加CSS样式：::v-deep .el-table__body-wrapper { height: 500px !important; /*给一个固定高度*/ overflow-y: auto; /*y轴溢出显示滚动条*/ &::-webkit-scrollbar { width: 4px; /* y轴滚动条宽度 */ height:4px; /* x轴滚动条宽度 */ background-color: #f5f5f5; /*滚动条背景*
2022-02-23 14:42:54
2459
原创 同一行的图片和文字垂直居中对齐
项目中经常会有图片和文字同行的情况，而且默认文字和图片底部对齐，影响美观，怎么垂直居中对齐呢，其实很简单：给当前图片和文字分别加上以下CSS样式就可以了。vertical-align:middle
2022-02-23 09:12:32
1111
原创 vue项目打包布署
我们使用Vue做项目时，通常前端是单独部署。用户访问的也是前端项目地址，因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了。Vue项目打包部署本身不复杂，不过一些前端同学可能对服务器接触不多，部署过程中还是会遇到这样那样的问题。本文介绍一下使用nginx服务器代理前端项目的方法以及项目部署的相关问题，内容概览：...
2021-12-25 13:54:03
19604
原创 CSS3动画实现左右滚动效果
CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。项目中一些比较酷炫的页面效果就是CSS3做出来的。今天我们做一个简单的左右滚动的动画效果。效果如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=devi.
2021-09-17 17:40:14
4706
原创 根据文件后缀名利用正则表达式区分文件格式
上传功能在项目中经常用到，一般上传时要验证一下文件的格式是不是我们需要的。验证方法很多，而正则表达式经常会被用到。比如我要上传的文件必须是图片格式，而且后缀名不区分大小写，可以这样写：// 根据名称获取文件后缀名const index = fileName.lastIndexOf('.') // 根据文件名找到最后一个‘.’的索引const suffixName = fileName.substr(index) // 根据索引截取，得到后缀名/** 正则表达式 $：表示以前面的字母
2021-09-06 14:13:49
3226
原创 layui表格使用总结（表头表内容主体不对齐、多级表头等）
近期项目使用的jQuery+JSP，前端组件使用了layui。涉及到了排序、合计、多级表头等问题。layui表格有三种渲染方式，此文使用的是方法渲染。以下功能均是基于方法渲染。一、排序为某列排序，在table渲染时，首先要开启排序，然后添加initSort参数，并添加要排序的字段名：<table id="layTable" lay-filter="layTable"></table>table.render({ elem: '#layTable', d...
2021-08-23 16:17:58
9720
3
原创 怎么将前端项目打成war包
前言我们前端开发人员打包一般指在前台打包，比如一个vue项目，运行打包命令npm run build。这个是基于Node.js来打包运行的。项目线上环境是没有node的，所以为了配合后端有时要将项目打成后台需要的war包。步骤1、还是先运行npm run build,生成dist文件夹2、新建一个tomcat项目，并安装maven,创建过程可网上搜索3、项目创建好后，找到src/main/webapp文件夹，将之前前台打包后生产的dist文件夹内的文件复制到这里。4、用idea软件打开新建的t
2021-07-28 15:19:16
5926
1
原创 vant表单checkbox验证问题
项目中使用了vant的表单，提交时有非空验证。单选、输入框都验证成功了，唯独复选框验证失败，选择选项之后还是显示未选择。官网和搜索引擎都找了下并没有找到答案。因为之前布局问题使用了<van-row>和<van-col>，我试着把<van-field>外的<van-col>去掉，然后就验证通过了。很奇怪，现在不知道什么原因。有遇到过的大佬吗？...
2021-07-22 16:20:58
2260
原创 element动态树表结构
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>D...
2021-07-14 14:17:53
231
原创 常用HTTP状态码
200 请求成功，表示从客户端发来的请求在服务器端被正常处理了。 204 该状态码代表服务器接收的请求已成功处理，但在返回的响应报文中不含实体的主体部分。另外，也不允许返回任何实体的主体。比如，当从浏览器发出请求处理后，返回204响应，那么浏览器显示的页面不发生更新。 206 该状态码表示客户端进行了范围请求，而服务器成功执行了这部分的GET请求。响应报文中包含由Content-Range指定范围的实体内容。 301 永久重定向，该状态码表示请求的资源已被分配了新的URI，..
2021-07-14 13:47:00
123
原创 前后台IP地址不同，跨域请求解决方法
跨域在开发中经常会碰到，解决方法也很多。今天来记录一下实际项目中遇到的跨域问题及解决方法。项目初始功能开发完毕后，准备线上布署。后台布署好后，访问出错。登录成功好再去请求别的接口，直接返回登录页面。（此时页面并没有报跨域的错，不知道为啥）但是在本地环境正常。经过排查，发现线上环境有两个ip地址和端口。比如前端项目地址是192.168.10.01:8080，后端接口地址是192.168.10.02:8081。随即在本地测了一下，前端地址是localhost:8080，后台地址改为本机ip地址：192.16
2021-07-13 16:32:51
6152
原创 vue-cli2配置多环境打包
目前vue-cli2上原配置是只有开发环境dev和线上环境prod的配置，但是我们实际场景上还有很多需要一个测试环境test,下面就是对测试环境的配置，将测试环境和线上环境的打包代码分开就不需要切来切去了。1.找到项目根目录下的build文件夹里的build.js文件，然后复制一份出来将文件名修改为build-test.js。内容修改为如下图（修改三个地方）：2.复制一份build/webpack.prod.conf.js文件命名为build/webpack.test.conf.js 主要修改这一处地
2021-05-21 14:49:28
1124
原创 echarts多个不同系列的图例分开显示
如图：图中有两个饼图，对应不同的图例。现在图例混到了一起，显然不方便观察。现在想让两类图例分开显示，以给客户更好的体验。当只有一个系列的图例时，legend是一个对象：legend: { type:'plain',// 图例的类型，plain：普通图例，scroll：可翻页。图例较多时使用。缺省就是'plain' orient:'horizontal', // 图例列表的布局朝向， horizontal：水平 vertical：垂直。缺省就是'horizontal' data:['省公司'.
2021-04-28 14:17:35
6208
2
原创 用calc()函数使页面高度在不同分辨率下自适应
市面上电脑种类很多，每个人的电脑屏幕分辨率又不一样，这就造成了同一个页面在不同的电脑上显示的不一样。这对前端来说是比较头疼的。那怎么让页面根据屏幕分辨率自适应呢？首先我们不能给要处理的容器设置固定高度，其次借助视口（viewport）和calc()函数来设置高度。视口通常与浏览器窗口相同，但不包括浏览器的UI， 菜单栏等——即指你正在浏览的文档的那一部分。整个视口的高和宽是 100vh、100vw1vh = 1% * 视口高度，1vw = 1% * 视口宽度vh、vw就是相对视口的长度单位，它是相对
2021-04-15 20:17:15
2013
原创 在echaerts饼图（环形图）内部自定义文字
需求是利用echarts的饼图之环形图在内部自定义文字。如下图： const option = { title: [ { // 第一个圆环标题 text: '省市公司', // 主标题 textStyle: { // 主标题样式 color: '#333', fontWeight: 'bold', fontSize: 14
2021-04-13 23:14:40
12386
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人