Vue
关注
分享
扫一扫
文章平均质量分 63
司徒小北
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
JS 生成唯一UUID的几种方法
在开发中偶尔会遇到需要生成唯一id的时候，比如对数组的任意一项进行多次增删改，这时就需要给每一项添加唯一标识符来加以区分。以下总结了几种生成唯一标识的方法，仅供参考。原创 2023-02-11 11:12:12 · 6585 阅读 · 0 评论 -
indexedDB存储
随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。原创 2023-02-02 15:28:18 · 1095 阅读 · 0 评论 -
一个关于image访问图片跨域的问题
通过 'img' 加载的图片，浏览器默认情况下会将其缓存起来。当我们从 JS 的代码中创建的 'img' 再去访问同一个图片时，浏览器就不会再发起新的请求，而是直接访问缓存的图片。但是由于 JS 中的 'img' 设置了 crossorigin，也就意味着它将要以 CORS 的方式请求，但缓存中的图片显然不是的，所以浏览器直接就拒绝了。连网络请求都没有发起。原创 2023-01-16 17:34:52 · 9147 阅读 · 1 评论 -
JS 点击某元素以外的地方触发事件
本来就只是使用e.target就行了，但是点击事件的target的机制问题，单纯地使用e.target并不能根本解决这个问题，因为目标区域内可能有很多的元素，这个点击事件会选择其内部的元素，就举当前的html代码为例子，现在我的目标区域demo内有一个p标签，如果我点到这个p标签，e.target会指向这个p标签，而不会去指向这个demo元素。点击颜色画板之外的区域，隐藏颜色画板。这个功能多用于关闭自己设置的弹窗，设置好最外层的判断元素，点击弹窗之外，弹窗就会关闭，这个在用户体验方面是非常有利的一个功能。原创 2023-01-16 17:23:53 · 2614 阅读 · 1 评论 -
JavaScript判断设备类型
判断设备类型，兼容了部分ipad上有开启电脑模式的操作，导致设备被识别为ipad而不是windows或者其他。原创 2023-01-13 17:15:07 · 820 阅读 · 0 评论 -
JS获取音频的总时长，解决Audio元素duration为NaN || Infinity 问题
当我们在加载一个线上mp3地址或者获取audio的duration的时候，会发现有拿到duration是Infinity的情况，这时如果我们动态的展示录音时间时候就会有问题。首先明确一下这是chrome浏览器自己的存在的一个bug，因为我们拿到的录音数据流没有定义长度，所以浏览器无法解析出当前音频的时长。原创 2022-12-08 22:14:04 · 7309 阅读 · 1 评论 -
React使用西瓜播放器
西瓜播放器是一个Web视频播放器类库，它本着一切都是组件化的原则设计了独立可拆卸的 UI 组件。更重要的是它不只是在 UI 层有灵活的表现，在功能上也做了大胆的尝试：摆脱视频加载、缓冲、格式支持对 video 的依赖。尤其是在 mp4 点播上做了较大的努力，让本不支持流式播放的 mp4 能做到分段加载，这就意味着可以做到清晰度无缝切换、加载控制、节省视频流量。同时，它也集成了对 flv、hls、dash 的点播和直播支持。if (!cid ||!原创 2022-09-14 17:52:31 · 2082 阅读 · 0 评论 -
Echarts 折线图超出上下限部分变色 结合visualMap处理
第一：查看series中是否设置了线条的颜色，比如lineStyle的color，设置了之后就会以这个为准，visualMap里面的颜色就不会生效了。我会经常分享自己所学所看的干货，在进阶的路上，共勉！注意点：在series 里面不能设置线的颜色，要不然会以series里面设置的颜色为准，设置的范围变色将不起作用。第二：如果上面方法还不行，试试按需引入visualMap的js文件。前言：介绍单个折线图的处理方法和多个折线图不同颜色的处理方法。一：单折线图代码逻辑。二：多折线图代码逻辑。...........原创 2022-09-01 11:32:30 · 5569 阅读 · 1 评论 -
nginx部署多个前端项目
nginx部署多个前端项目原创 2022-07-28 13:58:28 · 16772 阅读 · 0 评论 -
input修改自动填充背景色
input 修改自动填充背景色原创 2022-06-28 16:40:28 · 2054 阅读 · 0 评论 -
JS检测客户端是否安装
JS检测客户端是否安装原创 2022-06-02 18:00:12 · 1533 阅读 · 2 评论 -
用html2canvas遇到因为有滚动条截图不完整问题的解决方法
本文章向大家介绍在vue项目中用html2canvas遇到因为有滚动条截图不完整问题的解决方法(设置height和windowHeight)，需要的朋友可以参考一下。1、安装npm install html2canvas --save2、使用import html2canvas from 'html2canvas';基本逻辑html2canvas(document.getElementById('demo'), { backgroundColor: '...原创 2022-05-27 15:47:38 · 10573 阅读 · 9 评论 -
React 模拟实现全局Toast提示
用react模拟一个toast提示框，提示的位置可挂载到指定的dom，不指定dom的话默认会挂载到body上,具体逻辑自行调整即可效果如下：实现逻辑，index.tsximport React, { useState, useEffect, useRef, forwardRef, useImperativeHandle, Ref } from 'react';import styles from './index.less';import ReactDOM from 're...原创 2022-05-09 11:21:35 · 1305 阅读 · 3 评论 -
Table表格、列表 滚动加载实现
方案一：给table起一个className，监听当前table下的.ant-table-body元素的滚动(推荐)主要实现逻辑：1、在table外包一个div，添加滚动事件onScrollCapture2、给table起一个类名，目的是为了获取table下ant-table-body的元素：let element = document.querySelectorAll(`.tableRect .ant-table-body`)[0]3、判断依据 element.scr原创 2022-05-09 11:06:17 · 3760 阅读 · 0 评论 -
【视频测试地址】各类视频（mp4、flv、mkv、3gp、hls-m3u8、rtsp、rtmp）测试地址摘录
由于我们在做流媒体项目的时候，经常需要用到视频链接做测试用，所以这里为大家找了一些可以使用的链公大家参考测试，链接收集于网络。如有失效请更换下一个链接。FLV视频链接如下：https://sample-videos.com/video123/flv/720/big_buck_bunny_720p_1mb.flvhttps://sample-videos.com/video123/flv/720/big_buck_bunny_720p_2mb.flvhttps://sample-video原创 2022-05-07 18:25:27 · 105790 阅读 · 2 评论 -
js删除对象/数组中null、undefined、空对象及空数组方法示例
如下，对于一个多层嵌套的数据结构：例如要做的就是删除所有value为空，数组为空，对象为空的字段const querys = { name: '测试', httpMethod: '', httpHeaders: [ { key: 'Accept', value: 'test', }, ], restParams: [ { key: '', value: '', }, ], body: {原创 2022-04-27 13:45:40 · 20069 阅读 · 1 评论 -
点击其他区域，隐藏弹窗或各种元素的原理
点击其他区域，隐藏弹窗或各种元素的原理原创 2022-04-26 14:30:51 · 2126 阅读 · 0 评论 -
Loading chunk {n} failed 的解决方法
背景:前端代码更改后,每次发布到测试环境,用户的页面如果不刷新,会读取缓存,导致页面白掉! 本地没有过，都是打包到服务器上才有error infoUncaught SyntaxError: Unexpected token '<'Uncaught ChunkLoadError: Loading chunk 8 failed.(missing: https://mispaceuat.mihoyo.com/static/js/8.98f2a71fc60af3a81dd1.js)原创 2022-04-19 14:10:10 · 12967 阅读 · 0 评论 -
html页面添加水印，纯js设置
原理：根据页面大小，动态添加若干个div元素，将传递过来的文字写到div里，设置div旋转的角度、位置、宽度、高度、间距、字体、字体颜色等等调用的逻辑：index.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1原创 2022-03-02 11:10:15 · 2317 阅读 · 2 评论 -
正则删除字符串左、右或两端的空格经验总结
1、消除字符串左边的空格function leftTrim(str){ return str.replace(/^\s*/,"");//^符号表示从开头即左边进行匹配 } 2、消除字符串右边的空格function rightTrim(str){ return str.replace(/\s*$/,""); } 3、消除字符串两边的空格function trim(str){ return str.replace(/(^\s*)|(\s*$)/g,"");}原创 2022-01-07 18:40:38 · 1335 阅读 · 0 评论 -
input输入框只能输入数字且保留两位小数场景演练（金额）
以下方法看自己用的ui需求的需求增加不同的方法1、给文本框增加一个onChange方法，// 针对输入的金额做特殊处理const onCustomMoneyValidate = (e) => { e.target.value = e.target.value.replace(/[^\d.]/g, ''); // 只能输入"数字"和"." e.target.value = e.target.value.replace(/^\./g, ''); // 第一位字符不能为"."原创 2021-11-20 18:16:01 · 1086 阅读 · 0 评论 -
Iframe父页面子页面通信
iframe子页面与父页面通信方案一：父页面（调用iframe的页面）第一步：页面中引入iframe<iframe id="PanIframe" ref={iframeRef} frameBorder={0} width={960} height={600} marginHeight={0} scrolling="no" sr原创 2021-09-30 13:50:12 · 3290 阅读 · 0 评论 -
pdf预览pdfh5
<template> <div class="container"> <div id="pdfWrap"></div> </div></template><script>import Pdfh5 from "pdfh5";import "pdfh5/css/pdfh5.css";export default { components: {}, data() { re...原创 2021-04-20 15:32:52 · 7284 阅读 · 2 评论 -
vue 中使用vue-introjs做引导动画
先看页面效果：1、不做任何样式修改，vue-introjs默认的样式效果如下：可以配置title，跳过，上一步，下一步等2、修改修改样式，根据自己需求去做效果如下：web端和h5都可以使用，具体用法如下：一、npm安装vue-introjs是在Vue中绑定intro.js所使用的。vue-introjs中没有内置intro.js，所以在使用前请确保已安装intro.js。npm i intro.jsnpm i vue-introjs二、webpack配...原创 2021-03-24 14:33:02 · 2536 阅读 · 0 评论 -
vue中页面分页引导
一：使用driver.js做页面分页引导npm 安装： npm install driver.js如果项目中只有单个页面引导，只需要在单个页面中做配置就行如果有多个页面需要做引导，直接在mian.js 里面配置即可import Driver from "driver.js"import "driver.js/dist/driver.min.css"//直接封装一下：Vue.prototype.$Driver = new Driver({ classname:"sco..原创 2021-03-23 19:04:16 · 2167 阅读 · 0 评论 -
区分浏览器关闭和刷新
其实本身浏览器关闭和刷新没有区别的太开，下面介绍两种场景，逻辑一是关闭页面时需要区分出是刷新还是关闭，逻辑二是进入页面时需要区分刷新还是重新进入页面，下面结合实例看一下先介绍几个会用到的事件onload：页面载入时触发 onbeforeunload: 在即将离开页面(刷新或关闭)时触发 onunload： 退出页面时触发，已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用页面加载时只执行onload页面关闭时先执行onbeforeunload，最后onun...原创 2021-02-04 18:50:20 · 3755 阅读 · 1 评论 -
注册快捷键（单快捷键、组合快捷键）
一、注册快捷键方法window.addEventListener('keydown', onWindowKeyDown, false);window.addEventListener('keyup', onWindowKeyUp, false);注意：addEventListener在组建销毁的时候也需要销毁eg：react+hooks useEffect(() => { window.addEventListener('keydown', onWindowKeyDow原创 2020-12-04 14:27:02 · 1502 阅读 · 1 评论 -
git项目中加入版本号git-revision-webpack-plugin
webpack 插件生成VERSION和COMMITHASH基于本地生成过程中的文件的Git仓库。便于我们在项目中可直观看到提交的gitcommithash用法：给定一个webpack 4项目，将其安装为本地开发依赖项：npm install --save-dev git-revision-webpack-plugin然后，将其配置为webpack配置中的插件：const GitRevisionPlugin = require('git-revision-webpack...原创 2020-10-20 14:23:52 · 5039 阅读 · 0 评论 -
使用JSZip实现压缩文件与图片
JSZip简介JSZip是一个用于创建、读取和编辑.zip文件的javascript库，有一个可爱而简单的API。JSZip支持Nodejs和浏览器端的安装使用。具体方法如下：npm install jszipnpm install file-saver浏览器端解压zip文件后端Nodejs将zip文件以二进制形式存储到数据库中。当前端需要该zip文件时，后端将zip文件以二进制形式传输到前端，前端再解压还原。使用JSZip压缩文件import JSZip from 'j原创 2020-08-21 18:34:12 · 7535 阅读 · 0 评论 -
vue 移动端图片预览的方法使用总结
方法一：import VueImageSwipe from 'vue-image-swipe'import 'vue-image-swipe/dist/vue-image-swipe.css'Vue.use (VueImageSwipe);<div v-for="(item,index) in environmentalList" :key="index+'item'" ...原创 2020-05-28 09:55:29 · 4086 阅读 · 2 评论 -
Unhandled rejection Error: EACCES: permission denied
执行npm i的时候，npm i 突然罢工了。出现类似下面报错原因就是权限不够解决方案如下：sudo chown -R $(whoami) ~/.npm这行代码可以轻松解决这个问题！！！原创 2020-05-28 09:42:29 · 1876 阅读 · 0 评论 -
js更改对象中属性名的方法
数据格式如下：let arr = [ { "id": 275, "name": "测试公司", "userList": [ { "id": 697, "userName": "11111" } ] }, { "id": 327, "name": "有限公司"原创 2020-05-27 15:52:02 · 16319 阅读 · 3 评论 -
Vue使用MathJax动态识别数学公式渲染
1、前言 最近公司的一个项目需求是在前端显示Latex转化的数学公式，经过不断的百度和测试已基本实现。现在此做一个记录。2、MathJax介绍 MathJax是一款运行在浏览器中的开源的数学符号渲染引擎，使用MathJax可以方便的在浏览器中显示数学公式，不需要使用图片。目前，MathJax可以解析Latex、MathML和ASCIIMathML的标记语言。(Wiki)3、步骤...原创 2020-03-20 15:30:07 · 4963 阅读 · 6 评论 -
vue监听滚动事件滚动加载
监听元素内部滚动条事件，滚动到底部加载数据，也可以使用插件进行滚动加载处理方法一、监听滚动条事件滚动加载1、dom结构：最外层dom<div class="scrollWrap"> </div>2、mounted:初始化监听//mounted监听处理this.$nextTick (() => { if (document.qu...原创 2020-03-14 20:41:25 · 11194 阅读 · 0 评论 -
VUE拖拽文件碰撞检测draggable
简介：vue拖拽移动操作，比如A文件拖拽移动至B文件夹中，如何检测拖拽到的是B文件夹，draggable插件就可以解决，用法如下：一：安装npm install vuedraggable二：引入import draggable from "vuedraggable";三：注册components: { draggable}四：使用...原创 2020-03-12 11:23:32 · 2159 阅读 · 0 评论 -
解决 vue 路由报错 Cannot read property ‘beforeRouteEnter‘ of undefined
一、具体路由报错信息二、为什么会出现这种情况beforeRouterEnter是页面进入之前调用，所以取不到实例，默认调用 BeforeRouteEntry 钩子导致。三、解决办法方法1: 降低vue-router版本npm i [email protected] 将现在的版本降到2.4.0版本以下方法2: 修改router路由引入方法{path: ...原创 2020-03-06 17:42:16 · 4262 阅读 · 0 评论 -
90%的前端都会踩的坑
移动开发时代，前端同学刚刚送别了让人头秃的IE浏览器，却发现憧憬已久的移动互联网时代并不是想象中那般美好。各种棘手的系统兼容问题和浏览器兼容问题怎么也让人高兴不起来。作为一名工作不足3年的前端程序媛，始终相信好记性不如烂笔头。每次在项目开发过程中踩到的坑，都习惯性地记录了下来。昨日一瞥竟积少成多，稍感诧异。因此分享出来，希望对大家能有所帮助。兼容问题：1、iconfont 字...原创 2020-01-06 09:14:22 · 974 阅读 · 0 评论 -
字蛛的用法以及遇到的问题
字蛛是一个中文字体压缩器，可以压缩字体文件，从而解决加载缓慢的问题。字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。字蛛官网网址为:http://font-spider.org/接下来说一下具体的使用方法：一、首先安装font-spidernpm install font-sp...原创 2019-12-20 15:02:03 · 2406 阅读 · 3 评论 -
vue+webpack项目动态设置页面title的方法
一、首先看一下webpack中如何设置页面的title1、webapck主要是利用HtmlWebpackPlugin 替换 html页面 的 title，在vue项目中，安装HtmlWebpackPlugin插件npm install html-webpack-plugin --save-dev安装成功后，package.json这个文件会多出一行"html-webpack-pl...原创 2019-12-20 15:00:16 · 8509 阅读 · 0 评论 -
css上下浮动动画效果
比如有一个非gif的导向箭头，需要微微浮动提示用户具体操作导向，用css去写，实现方法如下：1、首先创建一个dom元素，controller是包裹导向箭头的容器，img是导向箭头图片<div class="controller"> <img src="xxxx" alt=""></div>2、css中创建动画，动画的快慢速度可以通过元素...原创 2019-12-17 14:53:47 · 17119 阅读 · 1 评论