- 博客(47)
- 收藏
- 关注
RSS订阅原创 js改变图片曝光度(高亮度)
通过使用svg滤镜feColorMatrix（基于转换矩阵对颜色进行变换，每—像素的颜色值都经过矩阵计算出新颜色），改变图片每个像素的颜色值来提高图片亮度。使用canvas进行滤镜操作，通过改变图片数据每个像素点的RGB值来提高图片亮度。调整出来的效果不是很好，图片不是高亮，而是有些发白。当前代码使用svg渲染图片，操作对象也是svg；当前项目使用的是svg，而不是canvas。准确的提高图片亮度，而不是给图片加白；
2024-03-27 11:36:46
1114
原创 实现Element Select选择器滚动加载
因为select组件在默认情况下是display:none的状态，所以不能把监听滚动事件放到mounted内，会获取不到元素class。
2023-10-13 16:39:53
900
原创 Jenkins构建vue项目找不到相关依赖
跟运维解释了一下问题，定位到了问题所在：依赖文件node_modules一直使用的是缓存文件，因为为了节省构建时间成本，在项目根目录下的Jenkinsfile文件下做了缓存依赖配置，只有在有新的依赖安装的时候改动一下相关配置，才能让线上的缓存文件node_modules做个更新，否则node_modules一直不会更新，所以才会出现项目中使用到的依赖找不到的情况。既然问题出在了Jenkins上，那就拉上运维一起看看原因吧（因为代码部署构建啥的，都是我们的运维小哥哥在管理）。
2023-06-21 16:13:27
1053
原创 element UI级联选择器---动态加载数据，动态控制二级面板的显示与隐藏
使用了el-cascader后发现如果第一次点击父级A获取到二级数据，并且二级面板显示，第二次点击父级B获取到二级数据为[ ]，此时二级面板不仅没有隐藏，同时展示的仍然是父级A的二级数据；二级数据列表需要在获取到一级数据id的时候调用接口得到数据进行列表渲染；获取到二级面板的元素，通过方法进行display的显示与隐藏；一级数据列表是在页面初始化的时候调用接口返回的数据；
2023-04-14 20:01:47
3472
原创 Element UI日期组件---选择月份具体到当月最后一天
Element已有的月份选择组件，选择月份范围的时候，只能展示开始月份的1号到结束月份的1号（例如：开始月份为3月，结束月份为3月，input框内只能展示2023-03-01至2023-03-01），但是我们的需求想要展示的是2023-03-01至2023-03-31这样的日期范围。
2023-03-27 19:46:10
1521
原创 windows10系统安装nvm切换电脑node版本
nvm 是 node version manager（node 版本管理工具）的缩写，是一个命令行工具，用于管理和切换到不同版本的 node.js。不同的项目可能需要不同版本的 node.js 和 npm（node 包管理器），例如，最近我需要开发的项目一个基于12.22.7版本的node，一个则基于16.X以上的版本，为了切换方便，我便学习安装了nvm。另外，如果我们自己有开发制作 npm 包的情况，也是需要在不同版本的 Node.js 环境下对其进行测试。
2022-11-29 19:23:39
1106
原创 vue项目nginx打包上线后.env.xxx配置文件不会根据不同环境进行区分访问
vue项目nginx打包上线后.env.xxx配置文件不会根据不同环境进行区分访问
2022-10-09 12:01:11
1197
原创 js判断 数组/对象数组 1 是否包含数组/对象数组 2
在开发中我们常用遇到的问题就是查找某个元素是否存在于该数组中，并且多数情况下使用的方法是indexOf()，若元素不存在数组中会返回-1，否则返回元素在数组中的下标。但是对于对象数组怎么办呢？直接使用indexOf并不能直观的表达出结果。.........
2022-07-18 16:39:35
1232
原创 elementUI级联选择框clearCheckedNodes失效的解决办法
当我只点击了父级选项，并没有选择二级选项，然后关闭弹框后再次打开弹框，此时仍然保留了上次选中的父级选项， 这个体验并不友好，因此我翻了element-UI的文档，看到了clearCheckedNodes方法；起初并不知道该方法的正确使用方式，以为跟@click那样定义方法的方式一致，发现并不是这样，百度后才发现应该这样使用：<el-cascader :options="tree" v-model="node" :props="{ checkStrictly: true }" ref="tr..
2022-04-09 16:50:30
3287
2
原创 AWS.S3上传显示进度条
业务需求需要在上传的时候添加进度条，由于使用的上传是亚马逊的AWS.S3中的upload上传方式，翻找了AWS的API文档后发现与upload对应的一个方法httpUploadProgress可以在上传过程中获取上传进度的百分比数据。我们的需求除了要百分比，还需要上传的剩余时间、上传的速度；httpUploadProgress是在文件上传过程中一直会进行回调的方法，这个方法返回的数据中有上传到百分比、上传文件的总大小、已上传文件的大小，但是没有直接给出上传的速度和剩余时间，因此，我只能在方法中进..
2022-03-19 16:25:23
3318
5
原创 解决Avue-crud行拖拽事件与鼠标选择复制冲突问题
表格行配置项 | Avue前端搬砖神器,让数据驱动视图,更加贴合企业开发https://avuejs.com/crud/crud-row.html#%E8%A1%8C%E6%8B%96%E6%8B%BD%E6%8E%92%E5%BA%8F使用了Avue组件行拖拽的同学们会发现一个问题，当你想要使用鼠标进行选择复制table表格某一行的数据的时候，就会触发avue-crud的行拖拽功能，导致我们无法进行该行文字的复制。当然这个拖拽功能是可以进行配置的，如果不需要拖拽的同学可以设置配置为false，但是，有
2022-03-18 16:41:36
1871
2
原创 前端面试题总结
JS基础篇：1、js中什么是基本数据类型？什么是引用数据类型？以及各个数据类型是如何存储的？2、基本数据类型和引用数据类型有什么不同？3、new关键字的原理？4、继承都有哪些方式？5、如何判断一个数据是一个数组呢？6、const a = [1,2,3,4]，typeof a 的结果？7、js事件轮询8、判断数据类型有几种方法？9、instanceof原理10、typeof可以判断出什么样的类型？11、typeof判断不出哪个基础数据类型？可以判断出哪个引用数据类型
2022-02-12 16:01:08
472
原创 间接触发el-upload上传功能
<el-upload :disabled="forbid" class="avatar-uploader" accept="image/*" :http-request="(param) => uploadImage(param, scope.row)" action="～～" :limit="1" ref="centerIcon" :show-file-list="false" :before-upload="beforeUpload"> ...
2022-02-10 11:19:34
2792
2
原创 饿了么el-upload自定义上传图片格式尺寸校验
<el-upload class="avatar-uploader" accept="image/*" :http-request="(param) => uploadImage(param)" action="～～" :limit="1" ref="coverPicUpload" :show-file-list="false" :before-upload="beforeUpload"> <el-image style="width:.
2022-01-29 14:30:44
2344
原创 vue实现模糊搜索高亮展示对应字符
项目中遇到一个模糊搜索高亮的需求，现在将此功能做一个总结，并分享给用得到人。此demo中使用到的接口是简单mock的数据，接口也是随意定义的，此处只进行了参数为 1 和不传参两种情况的查询举例，mock的接口也是对应的两个接口（本人前端不会写接口￣□￣｜｜），真正开发中使用的是一个接口，根据传参不同返回对应的数据。接下来步入正题：将封装好的核心代码highLight.js引入utils文件下，export function highLightTableMsg(msg, highLigh..
2021-11-13 22:06:53
1098
原创 vue组件复用出现的一些问题
在项目开发中根据需求封装了一个组件，并且把跟组件相关的所有接口调用全部放在了该组件中执行，然后把这个组件引入到了父组件中，每当父组件初始化的时候，子组件里的接口都会被调用一次，后面由于需求的变更，在这个父组件中插入两次子组件。好处是，提高了组件的复用性，减少了代码的编写；缺点是，父组件初始化的时候会导致子组件中的接口双倍调用，就会引发性能问题；解决方法是，将子组件用到的初始数据接口（初始数据接口也就是会在created或者mounte...
2021-11-03 22:51:05
1446
原创 vscode启动vue项目卡到40%的问题
今天在写项目的时候用到了setInterval定时器，然后<template>中莫名其妙插入一条import语句，由于当时并没有发现，当重新启动项目的时候就出现了以下的问题：加载进度一直停在了40%，开始以为定时器没有及时清除导致加载卡住，就把使用定时器的代码注释了，然后重启编辑器并没有什么卵用......重启了电脑、重启了路由器，然鹅都没有用......最后在stackoverflow上找到了问题所在，太感谢了！（大家在使用百度没有找到解决办法，不妨去stackoverfl
2021-02-26 23:28:33
5153
4
原创 vscode快速生成vue模板
1、打开编辑器，邮件点击编辑器左下角图标，点击“用户代码片段”，然后搜索vue.json2、在vue.json文件中写入自己想要的模板格式，如下（标签属性自己可以按需求添加）：{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div></div>", "</template>", "", "<script>"
2021-01-12 21:26:34
328
原创 小程序swiper组件实现纵向播放跑马灯
wxml代码：使用 vertical="true" 设置轮播方向为纵向，其他属性按需求设置即可<view class="welMessBox"> <swiper class="welMess" autoplay="true" circular="true" interval='3000' vertical="true"> <swipe...
2019-12-06 11:24:38
1580
原创 微信小程序实现表格展示
开发中遇到商品详情页需要展示参数列表，App中我们可以使用table轻松实现列表功能，但是小程序却不支持这个元素，该怎么办呢？我们就用样式来实现：思路：先给整个大表格设置border-top；给大表格的直接子元素设置border-left、border-right、border-bottom；每行的参数名和参数值之间的竖线，我们通过给大表格的直接子元素设置伪元素实现；代码： ...
2019-10-14 10:42:31
7015
原创 微信小程序scroll-view内使用bindscrolltolower实现上拉加载事件
刚开始的时候使用的是小程序自带的 onReachBottom 上拉触底事件内做的数据上拉加载请求，但是测试的时候触底事件内定义的方法并没有触发，忽然想到是不是 scroll-view 组件内实现页面上拉并不能触发 onReachBottom ，意思也就是， scroll-view 组件跟小程序自带的 onReachBottom 事件不能共同使用，看了官方文档注意到 scroll-view 组件...
2019-09-11 17:20:50
2325
原创 vue兄弟组件联动之app点击字母展示地区列表
图上这种地区搜索方式在很多app中都很常见，今天就使用vue框架中的 better-scroll 第三方包来实现页面滚动和点击侧边栏字母该字母开头的地区列表置顶功能。better-scroll链接：https://github.com/ustbhuangyi/better-scroll1、A子组件通过使用 this.$emit(事件名字，事件携带内容) 向外触发事件首先，在&...
2019-08-30 10:06:46
259
原创 微信小程序商品列表数据的获取尽量不要放到onShow函数中去
发现了一个不好的体验，当把首页中获取商品列表数据的接口放到了onShow函数中，测试的时候发现点击商品进入详情页之后再点击左上角的返回键返回到首页，首页会重新刷新，导致一个不好的结果就是刚刚浏览那个商品经过页面的刷新已经不在上次浏览的位置。为了更好的用户体验，尽量不要把获取数据的接口放到onShow中。...
2019-08-22 11:50:40
1104
原创 vue中父子组件传值
为了防止每个子组件都会有请求数据事件的发生，从而导致代码冗余，所以，我们可以把同一个模块下的所有子组件请求事件都放到父组件中去处理。1、父组件通过属性的方式给子组件传值//template中//注意：":city"和":swiperList"这里定义的什么名字，子组件中props接收的就是什么名字// "city"和"swiper"是你data中定义的名字<home-...
2019-08-18 22:35:59
195
原创 vue中的代理转换机制proxyTable配置项
在写vue项目的时候，后台没有及时提供数据，我们前台会在本地模拟一些数据进行开发测试，在axios请求这些假数据的时候，我们需要添加一个请求路径，按道理来说我们写上本地数据路径即可，但是在项目上线的时候就得修改这些本地路径，这样很容易出现漏改，所以，vue给出了一个代理转换机制。首先，在static文件夹下新建一个mock文件夹用于存放假数据index.json文件：其次，在 .git...
2019-08-15 10:19:43
483
原创 小程序识别带多个参数二维码进入商品详情
前提：因为在商品详情页面中有个一功能是点击分享生成海报，海报上面有商品信息以及商品小程序码，用户通过将海报分享给别人的时候，那个人可以通过识别那个商品小程序码进入该商品详情页。首先，要生成带参数的二维码，然后你把这个二维码放到海报上，canvas绘制海报的方法在我之前的博文里已经写过，不清楚的可以翻看一下： // 获取海报商品二维码 getQCoder: function...
2019-08-08 11:19:58
990
原创 小程序设置背景图片
项目开发过程中，往往会遇到小程序某个模块需要添加个背景图片，css中添加背景图片的方法是 background : url( ...)no-repeat 0px 0px;但是小程序添加背景图片的方法并不适用上述方式，你只能在 view 中加一个 image标签 ，然后让这个标签设置定位，并且 z-index:-1 即可。<view class="dis"> &l...
2019-08-08 10:35:01
594
原创 解决微信小程序scroll-view横向滚动scroll-x不成功，隐藏滚动条
多个商品想在一行横向滚动，于是想到小程序中的scroll-view，但是按照官网的教程代码粘贴使用了之后发现没有效果： <scroll-view class="scroll-view_H" scroll-x='true' style="width: 100%"> <view class="dis-pro"></view> ...
2019-08-06 09:45:53
3308
原创 微信小程序canvas绘制海报并保存本地相册
在做微信小程序电商项目中，想要分享一款商品，使用最多并且最简便的方法就是使用小程序自带的分享api进行分享，但是分享出去的页面比较难看； 另一种方法就是自己使用小程序canvas绘制分享的海报，这个海报可以保存在相册里，而且可以按照自己的需求效果进行页面绘制。 ...
2019-08-02 00:12:24
1045
1
原创 微信小程序获取数据接口动态渲染Echarts折线图
上篇文章介绍的是最简单的折线图配置方法，若是放到开发的项目中还需要进行一些改动，比如，如何调用接口获取数据动态渲染折线图：为了更好的体验项目开发中调取接口获得数据渲染折线图，我让朋友给我开发了接口模拟了一些假数据部署到服务器上，因为加了时间筛选功能，所以只模拟了2019-7-17到2019-7-23这7天内的数据，其余时间段数据为0，如果进行测试的话，就选这个时间段筛选就行。项目准备：...
2019-07-23 14:05:51
10409
13
原创 微信小程序插入Echarts折线图
应项目要求，需要在小程序插入折线图，并且折线图根据返回的数据动态渲染。Echarts文档：https://echarts.baidu.com/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts自己配置的简单折线图方法（假数据）：...
2019-07-23 09:46:43
4576
1
原创 超简单jq完成点击图片放大功能
后台小伙伴给的需求，本想找找类似的插件使用一下算了，想了想这个功能好像也不是很难实现，况且安装插件要先查找很多，然后筛选自己合适的，下载，导入，太麻烦了，不如自己手写。基本需求是引入 jquery.js 文件，去jquery官网下载最新版就行；<body> <img class="pic01" src="11.jpg" alt=""> <...
2019-07-17 17:35:45
6894
原创 在微信小程序wxml中保留数据两位小数
首先，创建 numberUtil.js ，并写入以下代码：var numberUtil = {numberFormat: function(value) {var v = parseInt(value) //强转Int，毕竟有可能返回是String类型的数字return v.toFixed(0)},numberFormat1: function(value) {var ...
2019-07-09 14:05:58
3636
原创 微信小程序根据页面滚动距离固定分类导航
根据要求，商品分类导航要做成图上效果，用了两种解决方案：一、使用onPageScroll onPageScroll(e) { console.log(e); var top = e.scrollTop; this.setData({ scrollTop:top }) },<view wx:if="{{ scrollTop ...
2019-06-21 10:44:11
3519
6
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人