粥粥_-CSDN博客

原创 JavaScript 字节流转图片显示

需要在前端接受后端传过来的字节流然后显示// 字节流转图片export function formatByte2Img(data) { let blobUrl = '' const bytes = new Uint8Array(data) const blob = new Blob([bytes], { type: 'image/png' }) blobUrl = (window.URL || window.webkitURL).createObjectURL(blob) return blo

2022-03-03 10:38:19 3908

原创 H5解决移动端rem加载瞬间页面错乱的方法（放大或者缩小）

页面在加载未完成前会出现瞬间错乱的现象，虽然时间不算长，但是肉眼可见，必须解决我们知道页面加载顺序通常是”从上往下”加载的，所以在内容区域，也就是body以及body包含的DOM还未被浏览器遍历之前，我们就应该将html的font-size计算好。所以我们应当把计算字体的js放在body之前<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport"

2021-06-10 09:48:44 794

原创 websocket心跳监测和重连机制

data(){ return { timeout: 28*1000,//30秒一次心跳 timeoutObj: null,//心跳心跳倒计时 serverTimeoutObj: null,//心跳倒计时 timeoutnum: null,//断开重连倒计时 surpriseNums: null, surpriseReconnect: false,//是否真正建立连接 }},mounted(){ this.surpriseNum()

2021-06-09 17:05:07 251 1

原创 EasyExcel快速实现前端导出(前端)

export1(){ axios.get(`/api/medical-live/logininfor/export`, { params: {}, contentType: 'application/json', cache: true, responseType: "blob" }).then((res) => { const link = document.createElement("a");

2021-06-07 15:08:52 2562

原创 viewerjs图片查看器使用

安装npm install viewerjs --save在main.js中引入（也可只在使用的组件中引入）import ‘viewerjs/dist/viewer.css’import Viewer from ‘viewerjs’<div class="left" id="mycontent"> <div v-if="textContent" v-html="textContent"></div> <div class=".

2021-06-07 14:01:51 284

原创 echart 世界地图、中国地图

世界地图，封装组件第一步，下载echartscnpm install echarts --save-dev第二步，在main.js中全局引入//引入echartsimport echarts from ‘echarts’Vue.prototype.$echarts = echarts<template> <div> <div :class="className" :id="id" :style="{height:height,widt

2021-06-04 12:02:40 748

翻译 vue 封装axios方法

npm install axios --saveimport axios from 'axios'import { MessageBox, Message } from 'element-ui'import store from '@/store'import { getToken } from '@/utils/auth'// create an axios instanceconst service = axios.create({ baseURL: process.env.VUE_A

2021-06-03 15:37:02 170

原创 JS前端获取用户的ip地址、所在地的方法

我的项目需求是登录的时候通过header传输登录所在地<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>document.write(returnCitySN["cip"]+','+returnCitySN["cname"])// 登录export function login(data) { return request({ // returnCitySN["cip"] hea

2021-06-03 14:09:04 590

原创使用西瓜视频xgplayer播放MP4、m3u8、flv（直播、点播）；videojs

vue中使用xgplayer安装npm install --save xgplayer 使用<script type="text/ecmascript-6">import Player from "xgplayer";export default { data(){ return{ videoPlayer: null } }, mounted() { this.getVideo() }, methods: { getVideo(){ t

2021-05-10 11:39:05 12151 7

原创 $nextTick使用场景和原理

为什么使用nextTick由于Vue DOM更新是异步执行的，即修改数据时，视图不会立即更新，而是会监听数据变化，并缓存在同一事件循环中，等同一数据循环中的所有数据变化完成之后，再统一进行视图更新。为了确保得到更新后的DOM，所以设置了nextTick()方法。使用场景1.获取数据更新之后的DOM2.created()中进行DOM操作3.获取元素宽度<template> <section> <div ref="hello"> <h

2021-04-09 14:01:14 2286

转载 base64加密解密

加密解密//1.加密var str = '124中文内容';var base = new Base64();var result = base.encode(str);//document.write(result); //2.解密var result2 = base.decode(result);document.write(result2);加密解密算法封装export function Base64() { // private property let _keyStr

2021-03-16 13:21:09 367

原创 flex，应用场景

flex 核心概念 “容器”，“轴”，容器包含外层父容器和内层子容器，轴包含主轴(x轴)和交叉轴（y轴），一共有12css属性父容器、子容器各6个；设置flex后，子元素的float、clear、vertical-align属性无效；父容器属性：justify-content:如何沿着主轴方向排列子容器。flex-start:起始端对齐flex-end: 末尾端对齐center: 居中对齐space-around: 子容器沿主轴均匀分布space-between:flex-w

2021-01-29 14:13:30 154

原创输入手机号格式344展示形式（只允许数字）

我的项目中有多出需要输入手机号，我封装mixins里telphone.js，控制手机号344展示格式，代码如下：export const telphone = { data(){ return { threephone: '', userInfo:{ phone } } }, watch: { threephone (newValue,

2020-11-17 09:35:43 1487 1

原创 vue 中自定义视频video

自定义视频进度条、音量、选集、全屏功能利用HTML5 Audio/Video 事件给出的事件<video :src= videoingurl ref="myvideo" @canplay="getTotal" @timeupdate="timeupdate"></video>timeupdate：监控视频当前播放的时间控制进度条timeupdate() { if(this.myvideo.currentTime == this.myvideo.duration){

2020-10-27 15:22:04 2341 2

原创 javascript 中 this指向问题

this 永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。单独的this、全局中的this 指向的是windowseg：console.log(this); // this -> windowfunction test() { console.log(this); // this -> window}test();严格模式下。this指向undefined；eg：function test() { 'use strict'; console.log(thi

2020-10-26 13:44:46 132

原创参数序列化

// 参数序列化 Vue.prototype.seParams = (obj) => { // 该方法会把值为0 的项过滤掉 // 如果所有项都会空则不会返回 ‘?’ var str = '' for (var key in obj) { var item = obj[key] if (item !== null &&

2020-09-28 14:18:58 840

原创 vue 混合机制 mixins(混入)

一.定义混入 (mixins)：是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。二.用法eg:1.定义一个混入对象 mixins.jsexport const tabStatechange = { data(){ return{ } }, created(){ this.stateClick(); }, methods: { // tab切换

2020-09-25 11:27:00 212

翻译原生js实现图片懒加载

最近在做项目，加载图片量太大，导致整个网站加载很慢，找到这个这种方案<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

2020-09-23 17:10:24 78

原创 2020.07.08前端

1.var、let、const;Js作用域：全局作用域、函数作用域。没有块作用域概念；es6新增块作用域，块作用域用{ }包括;var：定义变量，没有块的概念，可以跨块访问，不能跨函数访问，不初始化undefined,不会报错 letlet：定义变量，只能在块作用域里访问，不能跨函数访问，对函数外无影响 constconst：定义常量，只能在块作用域里访问，不能跨函数访问，使用时必须初始化（赋值），并且不可以修改2.js数据类型基本数据类型（5）：String 、Number、Und

2020-08-07 18:01:51 141

转载回流（reflow）和重绘（repaint）

回流：当我们对 DOM 的修改，引发了 DOM几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）；重绘：当我们对 DOM 的修改，导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。这个过程叫做重绘；会导致回流的操作：1.页面首次渲染2.浏览器窗口

2020-06-09 16:17:15 417

转载前端性能优化-节流（throttle）和防抖(debounce)

1.函数防抖和节流是优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能“节流”与“防抖”的本质：这两个东西都以闭包的形式存在。它们通过对事件对应的回调函数进行包裹、以自由变量的形式缓存时间信息，最后用 setTimeout来控制事件的触发频率。2.什么是节流？节流就是在让函数在特定的时间内只执行一次

2020-06-09 16:01:44 313

转载 computed和 watch 的区别

一、computer当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性。<p id="app"> {{fullName}} </p><script> var vm = new Vue({ el: '#app', data: { firstName: 'Foo', lastName: 'Bar', }, co

2020-06-08 17:14:09 3396

原创 quill-editor的使用和自定义

我的项目中有很多地方要用到，所以我封装了一个组件1.安装vue-quill-editornpm install vue-quill-editor -S2.安装vue-quill-editornpm install quill -S安装后在main.js中引入import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'import Vue

2020-06-02 18:29:10 2018 1

原创对element-ui的分页进行二次封装成组件

因为我的项目风格要统一，所以对el-pagination中的样式做修改<template> <div class="pagea"> <el-pagination layout="prev, pager, next" background :total="pager[props.total]" :current-page.sync="pager[props.p

2020-06-02 18:07:25 537

原创微信小程序发送websocket连接

注意：发送websocket连接，url中不允许有中文字符，中文字符要进行转码encodeURIComponent()var url = 'ws://100.100.10.10/';//服务器地址let sock = null;let socketOpen = false;function connect(user, func) { wx.connectSocket ({ url: url + user.orderid +'/senderId/'+user.id + '/senderNa

2020-05-12 11:48:51 669

转载微信小程序 CSS border-radius元素、overflow:hidden选择性失效问题 iPhone ios 苹果兼容问题

问题原因：父级设置圆角属性失效父元素使用border-radius和overflow:hidden做成圆形，子元素如果使用了transform属性，则父元素的border-radius、overflow:hidden会失效。方法一：（父元素使用 -weibkit-mask-image 覆盖掉圆角部分。-webkit-mask-image 可以使用图片、Gradient 渐变或者 SVG mask 作为元素的 mask 遮罩。在 WebKit 的兼容性还算可以。-webkit-mask-image:

2020-05-12 10:52:11 1087

weixin_44735916的博客