qq_37669585的博客

原创 js画布实现下雪效果

之前使用css实现了下雪效果，也对比了前端多种实现动画的方法（链接见文末）下面使用js和canvas的方法配合requestAnimationFrame实现一个简单的下雪效果，代码十分精简。

原创 前端并发请求数量控制

在前端会遇到需求：例如，有100个接口需要请求，但是同时发送会导致崩溃，所以需要控制同一时刻下的请求数量在3个值。

原创 requestAnimationFrame、前端动画实现方式总结与优化（大全）

requestAnimationFrame的原理与应用。前端动画实现方式大全总结、对比优缺点和性能优化的解决方案。

原创 js实现图片粘贴功能

实现思路：用一个div去监听paste事件，通过获取clipboardData的image对象，转化为file对象，base64格式，最后添加img上去。

原创 实现一个B站弹幕不挡人物的效果

如今各种视频网站，例如b站都有。再添加一些弹幕特效。通过在视频不同时的帧引入不同遮罩图，来实现。将svg的存入本地。弹幕动画可以自己设定，非常有趣！

原创 深入ES6数组解构

es6引入了数组解构，那么数组解构底层的原理是什么呢？数组都会有可迭代属性，并且可以通过迭代器访问元素。于是乎，该题等式左边数组方式解构需要满足。一道面试题的思考：让下面代码成立。于是可以在右边对象的原型上做操作。于是，想到了可迭代协议。直接控制台打印会报错。于是等式就不会报错了。

原创 Vue的组合式api和React hooks的对比

组合式 API 是以 Vue 中数据可变的、细粒度的响应性系统为基础的，而函数式编程通常强调数据不可变。总之，萝卜青菜各有所爱，Vue的组合式API也受到了React hooks的启发，两者都很好用！Vue3推出了组合式API，提供了更好的逻辑复用、更灵活的代码组织的书写js方式。不过：用React hooks也可以手动优化，更接近于原生js的写法。组合式API提供了和React hooks相同级别的。那么对比react的hooks有什么不同呢？首先，应该明确一点。

原创 React hook实现复选框checkbox勾选，状态不触发重新渲染问题

项目需要实现一个弹窗，不再提醒的功能。需要用到input的checkbox实现。但是切换的时候，onchange事件只能改变state，不能主动渲染更新勾选态。于是通过想了各种办法，想到了加一个key去主动触发react的渲染。每一次checked变化都会影响到key，从而触发主动渲染。通过在组件中使用useState控制checked属性。......

原创 git常用操作及原理

团队开发过程中，无论是Gerrit还是gitlab都离不开git，git的常用命令，常用的我总结了以下吗，基本满足了开发过程中的各种常见情况。1、克隆项目2、创建分支（从远程master到本地main）3、查看分支/远程分支4、拉取分支/云最新分支5、暂存提交（入栈）6、取出暂存提交（出栈）7、提交代码8、修改提交的commit描述9、撤销本地commit提交......

原创 解决el-table的操作栏点击和row-click冲突问题

解决办法使用：@click.stop阻止事件冒泡表头绑定了每一列的默认事件<el-table stripe :data="data" @row-click=" row => { reportUZX(row.name, row.degree, row.studentName, row.userId) } ">对操作栏按钮绑定监听@click.stop，阻止事件冒泡，发挥按钮功能<el-table-column label="操作

原创 js事件循环的理解

直接上代码console.log(1)process.nextTick(() => { console.log(8) setTimeout(() => { console.log(9) })})setTimeout(() => { console.log(2) new Promise(() => { console.log(11) })})requestIdleCallback(() => { console.log(7)

原创 JS实现数组去重常用方法总结

一、遍历（双层循环）1、跳过if (arr[i] === arr[j]) { j = ++i}2、spliceif (arr[i] === arr[j]) { arr.splice(j, 1); j--;}二、内置函数arr.forEach((item, index, arr) => { const repeat = arr.indexOf(item, index + 1); // 从下一个位置找与item重复的元素对应索引 if (repeat === -1) {

原创 纯CSS实现下雪、下雨、落叶效果

采用css的keyframe完成多种天气特效

原创 Vue3里setup函数里的坑：记录

开发遇到的问题

原创 可选链操作符”?.“

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。在探索一个对象的内容时，如果不能确定哪些属性必定存在，可选链操作符也是很有

原创 POST请求参数格式修改为“multipart/form-data“，去掉大括号

在用"application/json"传POST的请求data时，会有一个大括号包着但是如果是上传文件时，需要将字段分开，不要大括号，采用"multipart/form-data"方式那么需要对接口进行一些参数格式转换：import request from '@/request/request'function toFormData(o) { const formData = new FormData(); for (let [key, value] of Object.ent

原创 修改el-button颜色

css自定义el-button颜色定义按钮<div class="handle"> <el-button type="info" size="medium" class="edit" >编辑</el-button > <el-button type="danger" size="medium">删除</el-button> </div>修改样式：.edit { color: #fff; b

原创 Element 在el-dialog里使用upload组件上传本地图片回显，限制数量，后台返回展示

新增服务，需要服务顶上传顶部宣传图，需求：采用element 组件，限制上传数量1，支持预览，删除，数量为1时，隐藏入口<el-form-item label="顶部宣传图" style="height: 170px"> <div class="img"> <el-upload action="https://testopenapi.nbdeli.com/crm/customer/saveChannelLogoFile" :limit=

转载 JS数组转字符串（3种方法）

JavaScript允许数组与字符串之间相互转换。其中 Array 方法对象定义了 3 个方法，可以把数组转换为字符串，如表所示。数组方法说明toString()将数组转换成一个字符串toLocalString()把数组转换成本地约定的字符串join()将数组元素连接起来以构建一个字符串示例1：toString()数组中 toString() 方法能够把每个元素转换为字符串，然后以逗号连接输出显示。var a = [1,2,3,4,5,6,7,8,9,0];

原创 对象数组中选取几个特定对象的属性，返回新数组

一个数组，里面每一项都是对象，每一个对象有很多个属性。在前后端对接中，后台会多传一些参数，在请求的时候，往往用不到所有的参数，所以需要重构集合，返回新的对象数组。例如：这里通过请求接口，原本返回的list数组里对象有很多属性通过map()遍历数组，返回新数组listSerItem(this.postItemForm).then((response) => { this.serviceItemOptions = response.data.list.map((item) =&

原创 Vue中select多选绑定对象数组

实现需求，el-select多选框绑定由对象组成的数组items格式要求[{obj},{obj}…]<el-form-item label="服务项目" prop="items"> <el-select v-model="form.items" @change="selectChangeChild" placeholder="请选择" multiple value-key="serviceItemId" &

原创 get请求url拼接多个参数写法

get请求的参数一般会自动解析到url后，但是在很多时候需要自己按照后端的规定拼接，比如遇到字符串数组属性的时候，需要把数组元素拆开。于是有如下办法：export function deleteContents(contentIds, contentType, value) { return request({ url: `/system/ops/content/setoff?contentIds=${contentIds}&removeReason=${value}&cont

原创 el-select绑定多个值id、value

el-select通常v-model绑定一个form的表单属性，但是在给后台传值的时候，往往在选择了以后，不仅要传name也要传id，所以需要考虑其他办法。原v-model绑定方法：选中的值绑定form.serviceTypeName，但无法获取id<el-form-item label="项目分类" prop="serviceTypeName"> <el-select v-model="form.serviceTypeName" placeholder="请选择"> &l

原创 vue组件通信实例：el-dialog作为子组件

原因：一个.vue文件有点大，里面有很多el-dialog，接口，参数。所以我分离了一下，把el-dialog作为子组件。从父组件传prop到子组件，完成组件通信。子组件pushDialog.vue文件：其中open由父组件传过来开启子组件，close方法由子组件触发父组件关闭。<template> <div> <el-dialog width="60%" title="移入栏目列表" :visible.sync="open

原创 js方法reduce()，map()处理后台返回数据数据结构多层嵌套问题

后台传的数据格式为嵌套数组，但是前端需要展示栏目数据条，需要平级处理res的数据解决办法：采用reduce函数记录每一次迭代，每一次迭代里，都在数组里push平铺的全部数组元素，最后删除掉多余的元素，返回由新数组组成的新的对象/** 查询栏目列表 */ getList() { this.loading = true; listRecommendColumn( this.addDateRange(this.queryParams, this.dateRan

原创 Vue router嵌套路由

vue路由，父子路由配置router运营管理系统记录一下{ path: '/doctor', component: Layout, hidden: true, //redirect: 'noredirect', meta: { title:'医生社区管理' }, children: [ { path: 'community', component: (resolve) => require(['@/vie

转载 css文字大小自适应

总结了一下一些单位的不同px：像素（pixel）相对长度单位，，是相对于屏幕显示器分辨率而言的；em：em的值并不是固定的，会集成父级元素的字体大小；注意：1.body选择其中声明Font-size=62.5%；2.将原来的px数值除以10，然后换上em作为单位；3.重新计算那些被放大的字体的em数值。避免字体大小的重复声明。任何浏览器默认字体大小都是16px，所有未经调整的浏览器都符合1em=16px，南无0.75em=12px，10px=0.625em。为了简化Font-size的换算，需

原创 解决对象和对象属性混淆导致的route和query传递参数问题

解决对象和对象属性混淆导致的route和query传递参数问题

转载 JavaScript回调函数callback

原创 disabled和title属性

<el-button class="button" :disabled="scope.row.finishedNum == 0" :title="scope.row.finishedNum == 0 ? '报告暂未生成' : ''" @click=" ...

原创 empty组件修改

empty组件 <div class="empty"> <img src="@/assets/components/empty.png" /> <span>{{ content }}</span> </div><script lang="ts">import { Vue, Component, Prop } from 'vue-property-decorator'@Componentexport de

原创 b端密码规则设置

class=“input-img studentNo” //并列class::v-deep .studentNo + .el-form-item__error {margin-left: 34px;}//设置对应class的属性选择器样式newpassword: [{message: ‘密码不能为空’,trigger: ‘blur’},{validator: this.test,trigger: ‘change’}],//设置rule校验规则test(rule: any, val

原创 span不换行问题

span {display: block;float: left;white-space: nowrap;}解决span内部填充问题，不换行

原创 解决div独占一行问题

::v-deep.tests > div:not(:last-of-type) { display: inline-block; width: 50%;}css选择题设置div为块元素，同时不影响正常翻页功能（最后一个元素）

转载 this.$router.push跳转到当前页 页面没有刷新

App.vue在router-view 中加入 key 就好了，因为在路由页面存在页面缓存。<router-view :key="this.$route.path"></router-view>