蓝色之恋love-CSDN博客

/* 定义滚动条样式 */::-webkit-scrollbar { width: 5px; height: 5px;}/*定义滚动条轨道内阴影+圆角*/::-webkit-scrollbar-track { box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5); border-radius: 10px; background-color: rgba(50, 50, 50, .1);}/*定义滑块内阴影+圆角*/::.

2022-04-26 13:26:35 1108

原创 js的for循环和if语句谁执行的速度更快 - for更快

2021-11-29 13:13:58 1182

原创 js确定鼠标移入移出方向demo

效果图：<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>鼠标的移入和移出事件</title> <style> .box{ width: 200px; heig

2021-11-29 13:10:13 539

原创 vite2+eslint+prettier

vite2+eslint+prettiervite2热更新时启用eslint+prettier检查代码规范安装eslint和prettier相关依赖eslint: npm i eslint eslint-plugin-vue @vue/eslint-plugin-standard eslint-plugin-node eslint-plugin-promise @vue/cli-plugin-babel eslint-plugin-import -D然后在项目的根目录下添加.eslintrc

2021-06-23 15:43:46 2869 3

原创 javascript 实现复制图片到剪切板

<button class="copy">复制</button> <button class="paster">粘贴</button><br> <textarea name="" id="contentArea" cols="30" rows="10">hello world</textarea> <h4>获取粘贴板里的内容</h4> <textarea name="" ..

2021-04-12 09:48:38 834

原创 javascript根据经纬度计算两点之间的距离

function getDistance(lng1,lat1,lng2,lat2){ var radLat1 = lat1 * Math.PI / 180.0 var radLat2 = lat2 * Math.PI / 180.0 var a = (lat1 - lat2) * Math.PI / 180.0; var b = (lng1 - lng2) * Math.PI / 180.0; var s = 2 * Math.asin(Math.

2021-03-29 10:14:54 162

原创 antd of vue 自定义上传 customRequest的实现

针对antd design of vue 中的upload组件实现自定义上传使用这两个方法实现自定义上传showUploadList: 控制是否显示上传进度条beforeUpload：上传的前置钩子 – 这里我用来做文件校验若是文件校验失败 return false 即可uploadFunc：自定义实现文件上传，这里因为这个接口不仅仅做的是上传还有文件的解析，所以接口的速度很慢，因此这里采用了根据文件的大小去模拟进度若是接口仅仅只是为了上传可以采用下面的这种做法...

2021-03-06 16:38:20 7632 1

原创记录一下 node 解决内存溢出的问题

参考链接:https://lzw.me/a/angular-javascript-heap-out-of-memory.html

2021-02-17 20:17:35 270

原创 unicloud前端网页托管配置域名

拥有一个备案过的域名，然后在unicloud的网页托管添加域名，unicloud会返回给你一个CNAME，你需要到你的域名注册处配置DNS控制台：

2021-02-05 11:19:59 4045 4

原创前端登录使用jsencrypt对密码进行加密

前端：使用jsencrypt对登陆密码进行加密 <script src="./js/jsencrypt.min.js"></script><script> const encrypt = new JSEncrypt() encrypt.setPublicKey('MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAv+jfoAowyCu+jvJ9lipe8wU5D+DLyoO58z2j+ydnhUnRDm6oEAWoOD

2021-02-02 16:58:31 1799 1

原创 react+type使用props.match.props中提示为{}的解决方法

首先确保 react-router 处于v5.1的版本import { useParams, useLocation} from 'react-router-dom'// 通过useParams 拿到地址栏的params参数const { id } = useParams<{ id: string | undefined }>()// 通过useLocation 查看当前页面的路由...

2021-01-22 14:34:29 387 1

原创 keymaster的使用

安装：npm intall keymaster -S使用：import key from 'keymaster'key('a',function(){ console.log('您自定义了快捷键a) return false })key('ctrl+a', function(){ console.log('您定义了组件快捷键 ctrl + a') return false})key('ctrl+a,command+a', function(){ console.log('您定义

2020-12-25 13:18:51 1232

原创 nodejs实现发送邮件（nodemailer）

这里只测试了QQ邮箱// 引入nodemailerconst nodeMailer = require('nodemailer')// 详细用法请参照nodemailer官方网站： https://nodemailer.com/usage/// 创建SMTP客户端配置const config = { // 如果是163邮箱则为： smtp.163.com host: 'smtp.qq.com', // 这代表的是QQ邮箱 port: 465, // 端口详情请参照邮箱的设置中 PO

2020-12-09 15:51:24 751

原创 javascript unicode和base64的编码与解码

javascript定义了6个全局方法用于Unicode字符串编码和解码escape() : 使用转义序列替换某些字符来对字符串进行编码unescape() : 对使用escape()编码的字符串进行解码encodeURI() : 通过转义某些字符对URL进行编码decodeURI() : 对使用encodeURI() 方法编码的字符串进行解码encodeURIComponent() : 通过某些转移字符对URL的组件进行编码decodeURIComponent() : 对使用encodeURI

2020-12-09 13:43:42 1040

原创 vscode 配置 eslint 自动修复

vscode 配置 eslint 自动修复安装 vetur 、eslint 、prettier-code formatter设置中进入 setting.json 文件，配置以下内容{ "editor.tabSize": 2, // eslint 检测文件类型 "vetur.format.defaultFormatter.html": "prettyhtml", "vetur.format.defaultFormatterOptions": { "js-beautify-htm

2020-11-17 13:41:25 334

原创 canvas封装动态时钟

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas绘制动态时钟</title> <style> #clock { display: b

2020-09-29 11:35:40 106

原创解决移动端浏览器下拉显示“网页由xxx提供，QQ浏览器X5内核提供技术支持”

对于移动端的浏览器（这里以QQ浏览器为例）下拉的时候会出现“网页由xxx提供，QQ浏览器X5内核提供技术支持“这里的解决办法  <style> html,body{ height: 100%; overflow: hidden; -webkit-overflow-scrolling: touch; } </style>

2020-09-27 10:00:22 3465 3

原创基于canvas的手写板（vue组件）

基于canvas的手写板（vue组件）手写板组件（仅支持touch事件）此组件主要用于移动端的签字手写功能，可用于简单的绘画，可显示缩小版，全屏板两种类型，可自定义画笔颜色和画笔粗细，手写完成可以获取手写的结果。点击重写可以清空手写班的内容；点击完成后，会将手写板内容生成图片，此时不可再进行手写操作，点击重写可以进行书写；并且点击完成后可以在onComplete方法中获取生成图片的base64信息点击“横屏/返回”，可以进行手写板缩小版和全屏版的切换示例：项目链接按照正常的vue组件的使用方

2020-09-27 09:49:25 972 1

原创 Axios配置(vue)

基于Axios 的封装配置Axios在项目目录下的untils（工具文件夹）新建Request.js,这里主要存放 axios 的配置及拦截器，最后导出一个axios对象在此之前我们需要提前将一些工具安装好，下面我使用了axios lodash // 安装依赖 npm install axios lodash --save配置axios import axios from 'axios' // 引入axios import _ from 'lodash' // 我们需要lodas

2020-09-24 15:37:21 216

原创 Axios获取后端返回的二进制数据流并下载下来

Axios.post(url, {/*传入的参数*/}, { responseType: 'blob'} /*设置返回值的类型，这里设置文件流blob的形式*/).then(res => { let blob = new Blob([res.data], { type: 'application/xlsx;charset=utf-8'/*application/xlsx // 这里写要下载的文件格式;charset=utf-8*/ });

2020-08-27 16:55:16 2584

原创 Vuex概述

1.Vuex概述1.1组件之间共享数据的方式父向子传值： v-bind 属性绑定**子向父传值： ** v-on 事件绑定兄弟组件之间共享数据： EventBus$on 接收数据的那个组件**$emit ** 发送数据的那个组件1.2Vuex是什么？Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I2NpQevC-1593999371091)(D:\编程\

2020-07-06 09:41:02 118

蓝色之恋love的博客

原创 javascript计算一个坐标点到一个区域的最短距离

原创微信小程序map地图Marker过多优化

原创前端js获取系统更新刷新页面

原创通过canvas获取图片的平均饱和度

原创 vue3 extends的使用

原创解决ios在微信内置浏览器中video播放的全屏问题

原创前端登陆密码用crypto-js的AES做对称加密

原创 css滚动条样式设置成mac的样式