fairy啊的博客

原创 对象数组根据某个属性去重，所去重的根据另一个属性相加求和，最后将数组根据时间排序

我做的项目中有这样一个需求，其中有一个折线图，一个table表格，折线图的横坐标是时间，纵坐标是功率，列表中有很多条数据，其中有一些时间是相同的，但是功率值不一样，需求是表格默认全选，用户可以切换某些值的选中状态，折线图的展示要根据列表选中值的变化而变化。列表所选中的值就是一个对象数组，需要将这个数组根据时间去重，再将相同的时间所对应的功率相加，最后将时间排序，将去重排序后的对象数组中的时间，功率拿出来作为两个数组，这两个数组分别作为折线图的横坐标和纵坐标。根据上述需求做了一个代码小demo。

原创 JS金额格式化

1.千分位格式化。如将10000转为10,000.002.将小写的合计金额转换为大写3.将会计金额转为普通数字比如96,566.57=>96566.57

原创 Vue一键复制功能

点击复制按钮，复制想要复制的内容

原创 get和post请求方式总结

get请求只能传params参数，params参数都是拼在请求地址上的。前端发送请求最常⽤的是get请求还有post请求。post可以传body和params两种形式。2、POST请求 params传参。3、 POST请求 body传参。

原创 Vue中的filter过滤和this.$set（）方法应用举例

Vue中的filter过滤和this.$set（）方法应用举例

原创 Vue利用Object.assign()清空搜索条件

查询条件一开始为空（有查询条件对应的字段，但字段对应的值为空）点击重置按钮，清空查询条件。

原创 Vue使用keep-alive后，el-tooltip悬浮内容在切换页面时不自动消失

比如在列表页面有个编号，编号过长时鼠标放上去会显示el-tooltip提示内容，当点击这个编号进入详情页面时，此提示内容不消失。本文介绍三种方法。

原创 JS减法精度问题处理

JS减法精度问题处理

原创 新增、编辑、详情用同一个页面实现

有一些业务的页面大同小异，尤其是新增、编辑、详情，如果在router.js里面配置时不同的路由用不同的组件，会导致代码冗余，重复的代码复制来复制去，而且维护起来很不方便。我后来想到一个方法，就是配置不同的路由，但是它们所引用的组件都一样，进入页面时通过路由来判断是哪个页面，从而控制页面元素的显隐，调不同的接口。3、定义一个getPageType()方法，页面初始化的时候调用，通过路由来判断当前页面是属于哪个（是新增，编辑，还是详情？2、组件data()中定义一个标志，用于判断是该页面是属于哪个路由。...

原创 Vue关闭当前页面

Vue关闭当前页面。

原创 用sourcetree拉取、提交、合并代码总结

之前我做项目时用的代码管理工具是SVN，俗称小乌龟。那时候我每天做的操作一般就只有俩：update和commit,即更新和提交，那时候感觉比较简单。来到这个新项目组后，甲方要求我们开发时先建立一个dev分支，然后每个开发人员再建立一个自己的分支，平常就把dev上的代码拉取到自己的分支上，在自己的分支上开发，然后再合并到dev分支上。刚开始我不太适应，加上自己本来有一种抵触感，感觉这样很麻烦，后来发现这种操作用sourcetree这个工具还挺方便的。sourcetree可以自己从官网安装，具体ssh的配置可以

原创 分别阐述 join(),split(),slice(),splice()？

主要对字符串相关的常见方法做了简单的介绍

原创 JS中和字符串操作相关的方法或属性

主要对字符串一些常用的方法做了简单的介绍

原创 和数组操作相关的方法

主要对数组的一些常用方法做了简单的介绍

原创 VSCode安装依赖老是报一堆错误怎么办？

运行一个新项目前，要安装所需的依赖，结果报了一堆错在网上查了各种各样的方法，按照推荐运行了各种指令，结果报错越来越多，就像套娃一样。后来我就不在VSCode里面安装依赖了直接在项目文件夹里面，Shift+鼠标右键，点击“在此处打开PowerShell窗口”，在这里运行安装依赖的指令如果还是报错 可以在指令后面加上 --force或者 --legacy-peer-deps 这是为了解决各种版本冲突问题安装成功之后，项目文件夹里面就会多出一个node_modules文件夹然后在VSCode里面打开项目，就可以直

原创 富文本内容超出宽度解决办法

:deep(pre) { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ overflow: auto;.

原创 JS关于时间

let time1 = new Date();time1就是当前的时间，比如：Wed May 18 2022 13:03:36 GMT+0800 (中国标准时间)let time2 = new Date().getTime();time2就是当前的时间戳，也就是从1970-01-01 00:00:00(UTC)起到当前的毫秒数，比如1287027230时间与日期的转换参考以下别的博主的文章：js中 new Date().getTime()得到的是毫秒数_易天海的博客-CSDN博客_getti

原创 Vue表单校验图片，校验提示不消失的问题

表单中上传图片为必填项但是上传图片之后这个红色提示文字仍然存在解决办法是上传图片之后再去校验一次表单上述问题解决

原创 flex-wrap: wrap；布局注意事项

比如这些项之间有空隙，用margin-left解决，但是左右都有空隙，如果按照flex-wrap: wrap设置的话，就会导致一行摆不开，而右侧多余空白的地方解决方案是：设置一下这一整块的宽度为：width: calc(100% + 24px);这样就不会出现上处的情况了...

原创 transform属性实现内容移动

比如希望鼠标放上去时图片向上移动8px总结：向上移动10px：transform: translateY(-10px);向下移动10px：transform: translateY(10px);向左移动10px：transform: translateY(-10px);向右移动10px：transform: translateY(10px);...

原创 Vue3 父组件向子组件传值

原创 Vue中v-if和v-show的区别

共同点：都是用来控制元素的显示与隐藏不同点：v-show通过css样式中的dispaly：none；控制元素显示、隐藏;v-if直接控制的是vue生成的虚拟dom树，当虚拟dom树上的节点被删除时，vue的响应系统会实时的删除对应的真实dom树上的节点；从而控制元素的显隐。使用场景：v-show:此元素进入页面后，会频繁的改变显示状态，比如页面中有几个按钮，来控制某块区域的显示与隐藏。当用v-show来隐藏元素时，只会在初次加载时渲染此dom节点，之后都是通用display来控制显隐，如

原创 Vue3 自动生成二维码

比如有一篇新闻，需要将新闻分享给其他人，每篇新闻有对应的二维码，那么如何自动生成呢？// 初始化生成二维码 const initQrcode = () => { (qrcodeRef.value as HTMLElement).innerHTML = ''; new QRCode(proxy.$refs.qrcodeRef, { text: ` http://10.0.0.13:8888/#/news/newsInfo?blogId=${.

原创 :class使用简介

用于动态设置class是否生效比如希望点击哪个标签时，哪个标签的背景颜色就变成蓝色：

原创 条件判断中 两个等号（==）和三个等号（===）的区别

1、两个等号==是抽象相等运算符；三个等号===是 严格相等运算符2、两个等号==运算符是在进行必要的类型转换后，再比较；如果比较的值，一个是字符串，一个是数值，则会将字符串转换为数值再比较，会将空字符串转为数值0；如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的toString或者valueOf方法。 js核心内置类，会尝试valueO...

原创 background和opacity属性联合使用出现的问题

前端写页面时，有时候设计图中给的CSS样式不能照搬，不然会有问题比如：opacity: 0.1; 和 background: #000000; 这两个样式一起使用时，会影响到里面的字体样式。说一下rgba(0,0,0,0.1)：括号里面的四个值分别对应：r(red),g(green),b(blue)，a(透明度，类似opacity属性，取值为0.1-1之间，不可为负数)。...

原创 随机取数组中的某几项数据

常用于刷新页面时，banner图随机展示的这种需求其中：math.floor(x)返回小于参数x的最大整数,即对浮点数向下取整其中：Math．random()语句是一个随机函数。利用该函数可以取得0到1之间的随机小数，如果想得到一个大于1的随机值，则需要再乘以一定的数值来实现其中：temp_array.splice(arrIndex, 1)代表在temp_array数组中从索引为arrIndex的位置开始删除元素，删除元素个数为1;splice(index,howmany) ——>

原创 字符串分割（比如按逗号，分号）

前端开发过程中，有时候从接口获取的某个字段值是一个字符串，这个字符串里的每一项值是以逗号分割的，我希望将这个字符串按照逗号分割开，并存到一个数组里面当然，按照分号分割也同理。...

原创 Vue3子组件向父组件传值

需要用到emit举个栗子比如希望子组件（newHeader.vue）向父组件(news.vue)传labelId子组件中先定义一个函数，用于传值以下是写在子组件（newHeader.vue）中的代码：其中，getLabelId是在子组件中定义，在父组件中需要用到的函数，用于接收子组件所传的值。labelId是子组件向父组件传的值。emit别忘了在setup（）中定义一下以下是父组件(news.vue)中写的代码：传值成功之后，就可以直接在父组件中使用该值.

原创 background-image使用注意事项

如果想在某张图片上写文字或其它东西，那这张图片可以作为背景图，这时候就用到了background-image属性，但为什么设置完之后不显示呢？原因是没有给该背景图片所在的盒子设置宽高，即便这张背景图片本来有宽高也不管用！比如我想把这个绿色图片设为背景图片，就得这样写。...

原创 Vue根据条件判断点击事件是否执行

先添加布尔值的状态，标识点击事件是否执行在调用点击事件的时候用条件来判断

原创 如何使表单的label标签右对齐

给lable加一个固定的宽度如果用的是框架，那么就需要改变框架所封装的组件原本的属性，比如下图：

原创 :style动态设置背景图片

先定义状态，根据状态来判断应该展示哪张背景图片claimed代表优惠券已领取的状态unclaimed代表优惠券未领取的状态设置背景图片的时候一定要注意引号的位置，不要多写、写错、少写；...

原创 flex布局的justify-content属性写法注意事项

做项目时候写了个表格，发现在谷歌浏览器看着正常，在别的浏览器（比如360浏览器）看着不正常。正常效果应该是第一列挨着那条垂直分界线。谷歌浏览器的效果：360浏览器的效果后来检查了发现我把justify-content:flex-end中的flex-end写成了end，这样写是不规范的，虽然在谷歌浏览器生效了，但是在别的浏览器就不一定了。当时没注意这个问题，我写完页面后都是用谷歌浏览器看的效果，没试别的浏览器，所以我以为我写的没问题。然后导致开会的时候挨批评了，说我为什么没把这个问