- 博客(58)
- 收藏
- 关注
RSS订阅
原创 H5，vue，react通用，富文本框组件，图片上传以及渲染页面
H5，vue，react富文本框组件，图片上传以及渲染页面，下面代码是大概逻辑是把富文本框里面的所有文字以及图片处理成字符串形式提交到业务接口，然后在对应页面可以做渲染。如果要做视频处理成字符跟下面图片处理方式是一致的。Quill官方中文文档<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link href="https
2020-05-14 16:14:37
610
原创 vue webpack构建vue项目（环境配置篇）
新建一个文件夹demo:vue init webpack demo最近公司要求用vue重构项目，还涉及到模块化开发，于是乎，我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具，发现上手并不是很容易，现将总结的一些有关配置的心得分享出来，欢迎大神来拍砖。。。一、新建一个项目目录，cd /d 定位进去，然后输入npm init，会提示你填写一些项目的信息，一直回车...
2020-03-31 10:13:19
236
原创 Node.js安装及环境配置之npm更换镜像
一.安装环境1、下载对应你系统的Node.js版本:https://nodejs.org/en/download/2、选安装目录进行安装3、环境配置4、测试二.环境配置说明：这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全...
2020-03-30 21:47:29
1956
原创 超大数字四舍五入保留N位小数【没bug】
该方法可以传入：1.134、99.99、9999999999999999999.99999、.001、12.、0.、00.、类似的奇葩字符都会自动处理补全。大部分npm常用的插件四舍五入都是用数值直接去计算四舍五入的存在精度问题，本方法是用用字符串拆分比较整数大小，这样就避开了精度的问题；
2024-07-22 17:04:40
312
原创 谷歌浏览器导入密码入口
新版谷歌浏览器需要 先访问chrome://flags/#password-import-export， 然后设置Password import 为enable状态， 之后重启浏览器即可在设置->自动填充->密码 进行导入操作。
2024-03-21 14:36:16
675
原创 git本地commit merge错乱的终极绝招
git pull之后然后重新解决冲突，再push，（记得需要稍微跟自己push的要有一点区别，要不然又会造成这样的情况）git fetch：只是从远程获取最新版本到本地，不会merge(合并)3、本地删除无效的远程分支：清理远程分支，把本地不存在的远程分支删除。Git pull：从远程获取最新版本并merge(合并)到本地。解决方案一：保留本地的更改，中止合并->重新合并->重新拉取。解决方案二：舍弃本地代码，远端版本覆盖本地版本（慎重）都可以从远程获取最新版本到本地。
2024-01-02 19:04:59
491
原创 el-tree手动触发懒加载load
主要代码 // el-tree 懒加载load 手动触发load更新 handleNodeExpand (data) { let _node = this.$refs.tree.getNode(data); // 设置未进行懒加载状态 _node.loaded = false; // 重新展开节点就会间接重新触发load达到刷新效果 _node.expand(); }节点点击展开 // 节点单击事件
2022-05-05 18:39:22
4728
原创 移动端开发调试工具
1、抓包工具Charles、Fiddler平时只用抓取各种网络，需要设置手机的wifi代理推荐指数2颗星2、vConsole、eruda等调试库这个方法需要在页面中插入一段 JS 脚本，这里以vConsole为例，导入vconsole.min.js，并实例化，注实例化代码最好放在头部，以便能一开始就能劫持内容：<script src="./vconsole.min.js"></script> <script> // 初始化 new
2022-01-27 13:25:44
5416
3
原创 2021年12月vue+postcss+vant移动端自适应方案
1、安装插件yarn add postcss-px-to-viewport -D2、在项目根目录下添加.postcssrc.js文件配置如下module.exports = { plugins: { autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等 "postcss-px-to-viewport": { unitToConvert: "px", // 要转化的单位 viewportWi
2021-12-07 14:28:01
1474
原创 shell脚本实现取当前时间
shell 实现获取当前时间，并进行格式转换的方法：1）原格式输出2018年 09月 30日 星期日 15:55:15 CSTtime1=$(date)echo $time12）时间串输出20180930155515#!bin/bashtime2=$(date "+%Y%m%d%H%M%S")echo $time23）2018-09-30 15:55:15#!bin/bashtime3=$(date "+%Y-%m-%d %H:%M:%S")echo $ti.
2021-10-08 15:17:12
285
原创 vue 框架代码目录说明
框架代码目录说明：├──build //构建环境下相关配置（对webpack开发和打包的相关配置，包括入口文件、输出文件、使用的模块等）├──mock //属于第三方工具，需要下载 (npm install)├──node_modules //安装node后用来存放包管理工具下载安装包的文件夹├── public // 公共文件│ ├── favicon.png│ ├── i
2021-06-16 10:28:50
467
原创 2021 vue 2.0 cli3配置vantUI
1、安装# 安装 Vue Clinpm install -g @vue/cli# 创建一个项目vue create hello-world# 安装vant npm i vant -S# 完整写法：npm install vant --save# 安装插件 npm i babel-plugin-import -D# 完整写法： npm install babel-plugin-import --save-dev# 更换安装源：# npm install vant --save
2021-04-02 23:05:09
147
原创 js精准判断数据类型的方法
getTypeOf(data) { let dataType = Object.prototype.toString.call(data) /* dataType => [object Object] [object Array] [object Function] [object String] [object Number] 数值和NaN都是Number [object Boolean] [object Null] [object Undefined] */ le
2021-03-31 10:06:04
236
原创 修改滚动条样式
/* --- 改变滚动条样式 --- */.scroll-area::-webkit-scrollbar { width: 10px;}/* --- 滚动条里面的滚动块 --- */.scroll-area::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 5px #eee; background: #eee;}/* --- 滚动条里面轨道 --- */.scroll-area
2021-03-18 15:53:40
170
原创 2021年JavaScript最新手机号码、电话号码正则表达式
各大运营商手机号码段（新）表单字段验证常用正则表达式1、姓名/^[u4e00-u9fa5]{2,4}$/ //2-4个中文字符正则2、手机号码/^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])d{8}$/3、座机号码/^(0d{2,3})-?(d{7,8})$/4、电子邮箱/^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/5、身份证号码/(^d{1
2021-03-05 17:58:47
5639
6
原创 JavaScript监听手机移动端的touch滑动事件
实现原理：获取触摸首尾2点的坐标，Math.atan2获得2点连成的直线与x轴正方向的夹角，从而得到滑动的方向！原理图<!doctype html><html><head><meta charset="utf-8"><title>javascript判断手指在移动端上滑动的方向</title><script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js
2021-03-03 10:12:20
485
原创 2分钟让你明白，浏览器输入url后的事
浏览器输入url后一，DNS解析二，建立TCP连接（三次握手）三，发送http请求四，服务器处理请求五，返回响应结果六，关闭TCP连接（四次挥手）七，浏览器渲染页面一，DNS解析例如我们输入了www.baidu.com，一共有六个过程。但是说白了就是把它变成类似于172.12.342.222这样的IP地址，浏览器就能去找他了。不过我们还是讲一讲这六个过程是什么吧！就这样一个圈回来就拿到ip地址去访问了。easy二，建立TCP连接（三次握手）简单的讲就是，一个人（用户浏览器）走到银
2021-02-20 10:57:32
97
原创 正则表达式笔记大全
(一)限定符1、?:它前面的字符需要出现0次或1次例如：used?可以匹配到use和used2、*:它会匹配0个或多个字符例如：ab*c可以匹配到ac,abc,abbbbbbc3、+:它会匹配一次及以上的字符例如：ab+c可以匹配abc,abbbc,而不会匹配ac4、{}:可以限定匹配的数量例如：ab{6}c,则匹配到abbbbbbc,而要限定b的数量在2到6之间，则是ab{2,6}c，如果只是两次以上，则省略括号里的6，写成ab{2,}c(二)"或"运算符例如：a (cat|d
2021-02-20 09:32:32
115
原创 js数组reduce()方法的使用和一些应用场景
reduce()的使用reduce()方法为归并类方法，最常见的应用场景就是，计算数组中每一项的总和。reduce()方法会遍历数组的每一项，它接收两个参数：第一个参数是： 每次遍历都会调用的函数，而这个函数又接收四个参数，分别为：前一个值、当前项、项目的索引和数组对象，而这个函数的返回值，会传给下一次遍历时，执行的这个方法的第一个参数。第二个参数是： 归并基础的初始值。上面哪些参数具体怎么用呢？我们继续往下看： let arr = [1,2,3,4,5] arr.reduce((prev,
2021-02-07 16:03:26
639
原创 vue-react-swiper6-组件封装-解决坑点loop点击和滑动失效等问题-完整代码
话不多说直接上代码组件代码：<template> <div class="swiper-box"> <div class="swiper-container"> <div class="swiper-wrapper"> <slot name="img"></slot> </div> <di
2021-01-28 17:52:36
426
原创 background-clip让padding不显示背景border和content隔开
<div></div>div{ height: 500px; width: 500px; border: 3px dashed #000; padding: 40px; background: red; background-clip: content-box;}
2021-01-07 15:46:19
539
原创 HTML识别js插值赋值 string 变量里的 ‘\n‘ 并成功换行显
例如vue中需要换行的变量<div style="white-space: pre-line;">{{title}}</div>this.title = '这是一个/n长字符串'在结果所在的 div 的 css 设置：white-space: pre-line;然后页面就能成功识别 ‘\n’ ，并换行显示这是一个长字符串...
2020-12-30 14:38:43
616
原创 JS深度监听判断两个数组或者对象或者基础数据类型字段相同
/** * 判断此对象是否是Object类型 * @param {Object} obj */ function isObject(obj) { return Object.prototype.toString.call(obj) === '[object Object]'; }; /** * 判断此类型是否是Array类型 * @param {Array} arr */ function isArray(arr) {.
2020-12-04 17:11:36
434
原创 vue-cli解决上线服务器时缓存问题
碰上前端缓存的问题，首先想到的是head里面加meta<meta http-equiv="pragram" content="no-cache"><meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">vue-cli脚手架工具生成的项目，默认配置里，css和js等静态文件的名字里都加里哈希值，每一次build之后的静态文件和之前版本的名字不一样，按理不会有缓存问题。但有时仍然
2020-07-22 13:42:48
878
原创 gitlab配置ssh密钥
1.打开本地git bash,使用如下命令生成ssh公钥和私钥对ssh-keygen -t rsa -C 'xxx@xxx.com' 然后一路回车(-C 参数是你的邮箱地址)2.然后会出现：Enter file in which to save the key (/Users/yzq/.ssh/id_rsa):回车3.如果你的.ssh/id_rsa已经，则会出现：/Users/yzq/.ssh/id_rsa already exists.Overwrite (y/n)? y输入：y （重新
2020-07-20 20:58:29
4888
1
原创 vue反向代理（解决跨域）
1，vue中有提供反向代理的接口，就是config/index.js中的proxyTable，我的脚手架版本是2.9.6，proxyTable配置初始为空，如下图。2,将proxyTable配置如下：proxyTable: { '/api': { //需要代理的接口 target:'http://39.97.33.178', //目标服务器 changeOrigin: true, //是否跨域
2020-07-18 00:45:05
3104
1
原创 整体修改数组中对象的所有key
data1: [ { appName: '应用1', capacity: 233456 }, { title: '应用2', key: 124535 }] data2: [ { name: '应用1', value: 233456 }, { name: '应用2', value: 124535 } ]convertKey (arr, key) { let newArr = []; arr.forEach((item, index) => { let newObj = {};
2020-07-16 11:02:44
702
1
原创 前端项目中碰到的难题bug
1.this.parent或者是this.parent或者是 this.parent或者是this.children这种方式获取与传递数据十分不妥, 因为没有明确数据来源与使用者, 这样就会导致除了问题很难排查, 这种"父与子"的关系很脆弱,很容易突然’父组件’变成爷爷组件了, bug也就随之而来, 所以不是不得已的情况下或是高度封装的环境下, 不推荐使用.2: antv: 折线图倒叙bug现象:之前使用公司二次封装的echarts开发, 这个版本使用了antv来开发图表, 但是怪异的事情出现了,
2020-06-24 14:52:59
4583
原创 前端常用60余种工具方法
1.邮箱export const isEmail = (s) => { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)}2.手机号码export const isMobile = (s) => { return /^1[0-9]{10}$/.test(s)}3.电话号码export const isPhone = (s) => { re
2020-06-24 14:06:01
180
原创 JavaScript常用API合集汇总
本章有DOM操作、CSS操作、对象（Object对象、Array对象、Number对象、String对象、Math对象、JSON对象和Console对象）操作，值得收藏。一、节点1.1 节点属性Node.nodeName //返回节点名称，只读Node.nodeType //返回节点类型的常数值，只读Node.nodeValue //返回Text或Comment节点的文本值，只读Node.textContent //返回当前节点和它的所有后代节点的文本内容，可读写Node.base
2020-06-24 13:39:36
120
原创 web SPA 移动端手机H5项目适配（vw+postcss）
在以前的时候，适配移动端我们一般使用rem，通过动态改变根fontsize来使页面缩放。其中很著名的就是淘宝开源的Flexible。当初为了能让页面更好的适配各种不同的终端，通过Hack手段来根据设备的dpr值相应改变标签中viewport的值：从而让页面达么缩放的效果，也变相的实现页面的适配功能。而其主要的思想有三点：根据dpr的值来修改viewport实现1px的线根据dpr的值来修改html的font-size，从而使用rem实现等比缩放使用Hack手段用rem模拟vw特性如果你想深入了解
2020-06-17 14:23:00
497
原创 常用正则表达式
大于0或者大于0保留2位小数的正数：/^(([1-9][0-9])|(([0].\d{1,2}|[1-9][0-9].\d{1,2})))KaTeX parse error: Undefined control sequence: \d at position 19: …于0的正整数：/(^[1-9]\̲d̲*)/1-9.99折扣：/^(?=1.[1-9]|[1-9].\d).{3}∣([2−9])|^([2-9])∣([2−9])/...
2020-06-15 11:08:52
594
原创 js原生ajax最简封装
function myAjax (url, callback) { var xhr = new XMLHttpRequest(); xhr.open('get', url); xhr.send(); xhr.onreadystatechange = function () { if (request.readyState === 4) { if (request.status === 200) { return c
2020-06-12 11:31:32
232
原创 彻底弄懂强缓存与协商缓存
在工作中，前端代码打包之后的生成的静态资源就要发布到静态服务器上，这时候就要做对这些静态资源做一些运维配置，其中，gzip和设置缓存是必不可少的。这两项是最直接影响到网站性能和用户体验的。缓存的优点：减少了不必要的数据传输，节省带宽减少服务器的负担，提升网站性能加快了客户端加载网页的速度用户体验友好缺点：资源如果有更改但是客户端不及时更新会造成用户获取信息滞后，如果老版本有bug的话，情况会更加糟糕。所以，为了避免设置缓存错误，掌握缓存的原理对于我们工作中去更加合理的配置缓存是非常重要的。
2020-06-11 12:59:36
871
原创 javascript用户密码加密,js密码加密base64加密md5加密sha1加密
1、base64加密在页面中引入base64.js文件，调用方法为：<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>base64加密</title><script type="text/javascript" src="base64.js"></script><script type="text/javascript">
2020-06-10 11:40:12
165
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人