qq_24790575的博客

原创 竖向时间轴组件，高度自适应

单侧竖向时间轴，高度自适应<template> <div class="eltimeline"> <div class="time-line-only"> <div v-for="(item,index) in data" :key="index" class="time-line-only-div"> <p class="p6"></p>

原创 VUE父组件监听子组件的生命周期

比如有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，可以通过以下写法实现：// Parent.vue<Child @mounted="doSomething"/> // Child.vuemounted() { this.$emit("mounted");}这属于手动通过$emit触发父组件的事件，实现监听生命周期的作用。简单的方式可以在父组件引用子组件时通过 @hook 来监听即可，如下所示// Par

原创 vue项目dev环境携带token访问接口报431 header too large解决办法

1.启动的本地服务访问接口总是报 431 Request Header Fields Too Large 错误，看 network 请求，连发送都没发送给服务端就报错了，查了查发现 nodejs 升级之后header默认大小改为了 8KB，这原来想怎么传就怎么传突然就给了一个大小限制，就会出现这种情况，我的token根据账号权限生成，这个header大小是不受限制的，有可能就超过了8k，那就一直请求不通。那这个版本是从那个版本开始的呢，原来从10.14版本开始头大小被限制不能超过8192字节，是node本身

原创 vue pc端发送语音聊天

第一步安装依赖npm install recorderx --sava这个包是用的recorder.js封装的基于h5的录音功能第二步页面引入import Recorderx, { ENCODE_TYPE } from "recorderx";const rc = new Recorderx();第三步pc端鼠标撒手没效果1.获取麦克风权限这时候要手动开始录音调用麦克风获取权限，同意后默认开始录音，这时候要手动暂停录音，然后清除这次录音。rc.start().then(() =>

原创 使用Promise对象判断图片是否加载完成

直接上代码 loadimage(url){ return new Promise((resolve, reject) =>{ let aimg = new Image() aimg.src = url aimg.onload = ()=>{ let are = aimg.naturalWidth*aimg.naturalHeight

原创 条件判断，存储

1.在条件判断时，除了 undefined， null， false， NaN， ‘’， 0， -0，其他所有值都转为 true，包括所有对象。2.cookie，localStorage，sessionStorage，indexDBcookie一般由服务器生成，可以设置过期时间,数据大小不超过4K，每次都会携带在 header 中，对于请求性能影响，主要用于存储用户识别标识，账户及后台生成的t...

原创 es7关键字async await，跨域，事件循环

关键字 async await 如果函数声明之前添加了关键字async那么这个函数返回值就是一个Promise.resolve()包裹，是一个promise对象。await只能在async函数中使用。 使用await会影响性能，代码无法并发。但是执行代码是参照事件循环执行机制执行的。所以一般使用这一对关键字时说明这个函数内执行的程序必须按照特定的顺序执行才能正确的完成任务。所以要是可并发无关联的...

原创 对象的拷贝（深拷贝和浅拷贝）

1.复制运算符 = 实现的是浅拷贝，是拷贝对象的引用值。2.javaScript 中数组和对象自带的拷贝方法都是“首层深拷贝”3.JSON.stringify 实现的是深拷贝，但对目标对象有要求（非 undefined ,function，symbol）;4.想真正意义上深拷贝，只能用递归方法实现深层次的拷贝。浅拷贝是只复制对象的引用(指针)，而未复制真正的值，所以拷贝对象发生变化，原对...

原创 js 数组快速排序（对象，数字）可正序可倒叙

quickSort(arr,parm,sortsc) { if(arr.length < 1) {//如果数组就是一项，那么可以直接返回 return arr; } let centerIndex = Math.floor(arr.length / 2);//获取数组中间的索引 ...

转载 vue自定义封装大文件分片上传组件，带上传进度条显示，断点续传，视频播放器组件，原生JS的AJAX封装，Promise异步变同步

说明：请求用了自定义封装的原生js的ajax请求和axios视频播放用了vue-video-player插件文件的md5编码用了sparkmd5.js读取二进制文件用的客户端自带的FileReader接口封装的分片上传和断点续传组件：<template> <div class="biguploadfile"> <div class=...

转载 CORS跨域发送两次请求原理及解决方法

CORS跨域时，为何会发送两次请求？跨域资源共享(CORS)是什么？跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。CORS需要浏览器和服务器同时支持。目...

原创 input 标签输入限制只能输入数字(pc，移动端)，金额验证

h5 input type=number 对于pc端及安卓手机可以限制住输入只能是数字，但是对与移动端ios手机来说不起作用。对于ios系统来说需要给input 添加属性pattern="[0-9]*"才能限制输入框只能输入数字。...

原创 JS知识点

JS事件11月10号1,onclick 点击事件2,onmouseover 鼠标移入事件3,onmouseout 鼠标移出事件4,Document.Get ElementById(‘’)获取元素5,任何标签都可以加ID，包括LINK6,任何标签里的任何属性都可以修改。7，HTML写的是什么属性，JS就是什么属性。8，class修改元素类名不能用class，应该用classNam...

原创 h5 canvas，animation动画，前台数据库，scoped锁区及一些常识

1． html5 rect()、fillrect()、strokeRect()的区别2． rect() 方法是单纯的画出一个矩形框，调用stroke() 或 fill()后才会真正作用于画布。3． .fillRect() 方法是画出一个有填充颜色的矩形框（默认是黑色的）4． strokeRect() 方法是用一个预定义的笔触画出一个矩形框，你就可以想成使用一直有颜色的画笔去画一个矩形。fi...

原创 nginx相关命令

原创 vue项目gitlab从fork库到打包上线流程

1.在git 上fork 主仓库的项目2.在本地下载自己fork的项目git clone git@github.com:wangyy/TestProject.git 下载master分支git clone git@github.com:wangyy/TestProject.git -b dev 下载dev分支3.查看远程仓库地址git remote -Vorigin git...

原创 git 常用命令及常用代码更新操作步骤

1，mkdir 文件名 创建一个文件2，cd 文件名 进入文件内部3，pwd 显示当前目录4，git init 创建git仓库5，git status 显示git仓库当前状态是否被修改6，git diff 查看修改项，与原来版本有什么不同7，git add 路径 选择代码提交路径8，git status9，git commit -m “代码修改说明” 版本描述提交到本地git...

原创 vue-cli webpack模板 Vue项目本地开发 nodejs反向代理 及与nginx反向代理的区别

1.vue本地项目node.js 反向代理配置config文件夹下的index.js文件配置见上图，target是后台电脑请求ip地址及端口，/weixinapi是标识符，当检测到请求路径里的/weixinapi的时候target将代替这个标识符之前的内容，访问地址：http://localhost:8080浏览器显示路径 http://localhost:8080/weixinapi/...