自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

grootbaby

冰冻三尺,非一日之寒

  • 博客(242)
  • 资源 (2)
  • 收藏
  • 关注

原创 vuex中 store.dispatch() 与 store.commit() 方法区别

vuex中 store.dispatch() 与 store.commit() 方法区别this.$store.dispatch() 与 this.$store.commit()方法的区别总的来说他们只是存取方式的不同,两个方法都是传值给 vuex 的 mutation 改变 statethis.$store.dispatch() :含有异步操作,例如向后台提交数据,写法:this.$store.dispatch(‘action方法名’,值)this.$store.commit():同步

2022-01-13 18:06:11 4926

原创 JS 用户信息脱敏显示星号

JS 用户信息脱敏显示星号姓名脱敏formatName(name) { // 姓名脱敏中间字符 let newStr; if (name.length === 2) { newStr = name.substr(0, 1) + '*'; } else if (name.length > 2) { var char = ''; for (var i = 0, len = name.length - 2; i &lt

2022-01-11 16:18:43 1124

原创 h5 版活体检测、视频活体检测

方法一:(兼容性好)h5 活体检测兼容性比较好的做法是通过input去打开手机系统原生的录像界面<input type="file" accept="video/*" capture="camcorder" ref="videoFile" @change="changeVideo($event)">方法二:(h5 新属性)还有一种做法就是使用h5的新属性getUserMedia、MediaRecordergetUserMediagetUserMedia兼容目前主流的手机

2022-01-10 09:33:47 1451

原创 JS 实现千分位分隔符 2 - 没有小数位

function formatter (number) { const numbers = number.toString().split('').reverse() const segs = [] while (numbers.length) segs.push(numbers.splice(0, 3).join('')) return segs.join(',').split('').reverse().join('')} valueFormatter ({ value .

2021-12-16 10:15:07 946

原创 CSS 设置背景色指定高度

CSS 设置背景色指定高度,我们通过 ::before 或者 ::after伪类来实现。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8" /> <title>css 设置指定高度背景色</title> <style type="text/css">p { display: inline-block; positio

2021-11-29 17:17:09 4057

原创 Vue mixins混入

Vue mixins 混入1、mixins 含义mixins 就是混入,就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改,mixins 是一种分发Vue组件中可复用功能的非常灵活的一种方式。一个混入对象可以包含任意组件选项。比如组件的生命周期,data() { return{} },methods 方法等,凡事能在组件上编写的都能在 mixins 中定义。2、什么时候使用Mixins页面的风格样式不同,但是执行的方法和需要的数据类似,这时候我们就可以把公共

2021-11-05 17:23:09 265

原创 Vue 项目中锚点定位实现

要实现一个锚点定位的效果,传统方法是用 a 标签的 href 属性和 id 属性来做。不过并不能达到想要的效果,在Vue项目中,使用传统的在a标签的href属性中写id的方法无效,会导致浏览器的地址改变从而跳转到其他页面。vue-router 用的是 hash 模式,不能使用传统 a 标签的方式来做锚点定位。经过各种百度,发现好多用的是以下方式,但是经过实测并没有用,没有实现定位。(希望有大佬指导下)document.body.scrollTop = this.$el.queryS

2021-10-20 10:30:00 4324 3

原创 JS 判断对象中的属性是否都有值

【代码】JS 判断对象中的属性是否都有值。

2021-10-13 14:27:09 2521

原创 html2canvas 前端截图工具 iOS15 中截图空白

这是因为 iOS15 系统字体bug ,在根节点上加上如下代码,问题解决.container { font-family: Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', STXihei, 'Microsoft YaHei', SimHei;}

2021-10-13 14:24:48 7756 5

原创 Vue 解决路由跳转页面不刷新的问题

Vue 解决路由跳转页面不刷新的问题问题:通过路由传参跳转界面,页面没有刷新(或者跳转同一个页面,页面不刷新)(或者 this.$router.replace || this.$router.push 路由跳转不刷新)解决方法:在 router-view 中加 :key="$route.fullPath"<router-view v-wechat-title="$route.meta.title" :key="$route.fullPath" v-if="$route.m

2021-08-19 14:52:11 4867 2

原创 video 视频在 ios 中不能自动播放的问题

video 视频在 ios 中不能自动播放原因:ios 中明确的指出等待用户的交互动作后才能播放 video,也就是说没有得到用户的 action 就播放的话会被 safri 拦截解决方法:只能解决微信浏览器自动播放问题,safri 浏览器依旧无法自动播放踩坑注意:( ios 中 video 不设置自动播放的话,封面会显示为空白,若controls 也设置为 false 的话,会让人误以为 video 视频有问题,我就踩了这个坑。设置了自动播放,用下面微信的内置 API 来触发自动播放.

2021-08-13 11:19:22 2050

原创 微信公众号跳转小程序 wx-open-launch-weapp (最全指南及坑)

微信公众号使用 wx-open-launch-weapp 开放标签跳转小程序注意事项微信开放标签有最低的微信版本要求,以及最低的系统版本要求。微信版本要求为:7.0.12及以上 系统版本要求为:iOS 10.3及以上、Android 5.0及以上使用步骤1. 绑定域名微信安全域名只能修改绑定3次/每月登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。2. 引入JS文件在需要调用JS接口的页面引入如下JS文件:http://res.wx.qq.co

2021-04-30 11:26:05 42119 39

原创 JS 实现千分位分隔符

formatMoney(num) { let reg=/\d{1,3}(?=(\d{3})+$)/g; return (num + '').replace(reg, '$&,'); }

2021-04-15 13:51:59 432

原创 腾讯地图获取定位

// 获取定位// 方法一getMyLocation() { var geolocation = new qq.maps.Geolocation("CQPBZ-QRWCU-2RGVJ-44CGR-5WCY6-WVB5Q", "myapp_ay"); geolocation.getIpLocation( (position) => { console.log(position); this.getAddress(position.lat, position..

2021-03-30 13:53:14 1840

原创 JS 截取数组的最后几个元素

arr.slice()slice() 方法可从已有的数组中返回选定的元素。语法arrayObject.slice(start,end)参数 描述 start 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。 end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那.

2021-03-26 15:15:48 18929

原创 JS 将对象拆开拼接成 URL

let url = "https://apis.map.qq.com/uri/v1/routeplan?"let data = { referer: 'CQPBZ-QRWCU-2RGVJ-44CGR-5WCY6-WVB5Q',};data.type = "drive"data.from = "我的位置"data.fromcoord = "我的位置经纬度"data.to = "目的地" data.tocoord = "目的地经纬度"Object.keys(data).map((key.

2021-03-25 17:52:00 860

原创 前端图片最优化压缩方案

/** * 压缩方法 * @param {string} file 文件 * @param {Number} quality 0~1之间*/function compressImg(file, quality) { if (file[0]) { return Promise.all(Array.from(file).map(e => compressImg(e, quality))) // 如果是 file 数组返回 Promise 数组 } else {.

2021-03-22 09:56:17 432

原创 JS && Vue 禁止输入框输入特殊符号或emoji表情

// 判断是否含有特殊符号let reg1 = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘’,。、]/im// 判断是否含有emoji表情let reg2 = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\.

2021-03-12 16:32:40 5358 3

原创 Vue 插件 html2canvas 将页面内容生成图片

官网:http://html2canvas.hertzen.com/1、安装:npm install --save html2canvas2、引入:import html2canvas from "html2canvas"3、将特定内容转成图片  特定内容包裹的 div 添加 ref 属性标记<div class="container" ref="imageDom"></div>/*** 将页面指定节点内容转为图片 */generat..

2021-03-11 15:55:54 3357 4

原创 Vue this.$router.go(0) 刷新当前页面在苹果手机无效

this.router.go(0) 和 window.location.reload() 都是刷新当前页面的方法Vue 写H5页面时,用 this.$router.go(0);方法刷新当前页面,在苹果手机失效,安卓、pc、开发工具等都可以改用window.location.reload()问题解决!...

2021-03-11 15:35:07 2526 2

原创 Vue beforeRouteEnter 获取不到组件实例

进入页面前获取上个页面的值,并赋值,但打印出来是 undefinde。明明在上个页面是有值的,但在内部获取不到外部的this,方法、变量等都获取不到后来发页面,beforeRouteEnter 是页面进入之前调用,所以取不到实例beforeRouteEnter和beforeRouteLeave 通过 vm 访问组件实例beforeRouteEnter(to, from, next) { next(vm => { // 通过 `vm` 访问组件实例 if(from...

2021-03-08 09:34:46 1038

原创 正则验证车牌号码,包含新能源车牌

车牌号码校验正则校验代码function checkLicensePlate(str) { return /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/.test(str);}车牌.

2021-03-08 09:27:05 2420

原创 Vue 实现倒计时按钮功能

data() { return { isAvailable: true, totalTime: 2, // 倒计时时间 btnContent: '下一步', btnDefault: '下一步', clock: null, };},countDown() { if (!this.isAvailable) return; this.isAvailable = true; this.btnContent = `${this.btnDef..

2021-03-08 09:08:34 720

原创 根据身份证号获取生日、年龄、性别

根据身份证号获取生日、年龄、性别获取生日// 获取生日 getBirth(card) { var len = card.length; //身份证15位时,次序为省(3位)市(3位)年(2位)月(2位)日(2位)校验位(3位),皆为数字 if (len == '15') { var re_fifteen = /^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/; var arr_data = card.match(re_f...

2021-03-08 08:57:06 982

原创 身份证号格式校验

// 身份证号格式校验testIdNO(value) { var vcity = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北", 43: "湖南", 44:.

2021-03-08 08:53:55 1333

原创 Vue infinite update loop 问题

最近在写一个数组渲染时,对拿到的源数据数组经过排序后,正常运行却出现爆红:代码如下:各种度娘后你的确导致了一个无限循环, 因为array.sort()改变了数组自身,导致了过滤器又一次被触发。确保在副本上对数组排序:return value.slice().sort(...)数组方法array.slice()用法:slice()方法会浅复制(shallow copy)数组的一部分到一个新的数组,并返回这个新数组。技巧:处理类数组对象slice...

2021-02-26 15:54:16 566

原创 ajax 请求在 ie浏览器报错 Access-Control-Allow-Headers 列表中不存在请求标头 authorization 或 token

原因:ajax 跨域请求,请求头不传 token 时,所有浏览器都能成功,在请求头中传 token,在谷歌浏览器正常,在ie浏览器报错,因此可以得出是请求头 token 的问题

2021-02-01 11:14:53 1501

原创 Vant van-progress 标签使用

<van-popup v-model="showProcess" round :close-on-popstate="true" :close-on-click-overlay="false"> <p>上传中...</p> <van-progress :percentage="progressValue" :show-pivot="false" color="#1E90FF" track-color=".

2020-11-03 13:53:33 3792

原创 Git 删除远程分支后,在本地依然能看到的解决办法

工作中经常遇到当远程分支被删除后,在自己电脑上git branch -a查看分支时,依然能看到删除过的远程分支这时候通过以下命令刷新本地仓库保持与远程仓库的改动同步,再执行git branch -a就找不到远程被删除的分支git remote prune origin...

2020-10-28 09:56:32 461

原创 HTML特殊字符编码对照表

在设计和开发网页时,需要用到一些特殊符号,比如:©,®,℃,¥,⅜ 等等,有些上网找半天不一定能找到。HTML特殊符号编码有很多种 unicode、十六进位码(hex code),html 实体编码(entity code),还有我们熟知的html 实体(html entity) ,为了在css content属性中使用,还有对应的 css code。你可以在HTML标签中直接插入十六进位码(hex code),html 实体编码(entity code)或者 html 实体(html entity)。

2020-10-16 15:12:15 761

原创 HTML特殊字符编码对照表 —— (二)

特殊字符集二数字相关符号描述 符号/显示 UNICODE HEX CODE HTML CODE HTML ENTITY CSS CODE Zero 0 U+00030 &#x30; &#48; \0030 One 1 U+00031 &#x31; &#49; \0031 Two 2 U+00032 &#x32; ..

2020-10-16 14:49:13 9865

原创 HTML特殊字符编码对照表 —— (一)

特殊符号列表常用特殊符号描述 符号/显示 UNICODE HEX CODE HTML CODE HTML ENTITY CSS CODE Left Arrow ← U+02190 &#x2190; &#8592; &larr; \2190 Up Arrow ↑ U+02191 &#x2191; &#8593; &uarr; \2191

2020-10-16 14:38:14 15518

原创 Vue filters过滤器的使用

Vue 过滤器 filter简单介绍一下过滤器,顾名思义,过滤就是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰,那么过滤器则是过滤的工具。例如,从['abc','abd','ade']数组中取得包含‘ab’的值,那么可通过过滤器筛选出来‘abc’和‘abd’;把‘Hello’变成‘Hello World’,那么可用过滤器给值‘Hello’后面添加上‘World’;或者把时间节点改为时间戳等等都可以使用过滤器。首先,过滤器可在 new Vue 实例前.

2020-10-16 13:47:57 287

原创 Element UI table 选择框禁止选中

Element UI table 过滤已处理数据为默认不选中Table-column Attributes参数 说明 类型 可选值 默认值 selectable 仅对 type=selection 的列有效,类型为 Function,Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 Function(row, index) — — Step1手动添加一个el-table-column,设type属性为sel...

2020-10-16 11:48:47 1300

原创 Element UI table 表格表头错位问题解决

Element UI table 表头错位方法一在app.vue中添加.el-table--border th.gutter:last-of-type { display: block!important; width: 17px!important;}方法二在el-table组件挂载一个ref="configurationTable",然后在每次请求数据成功后动一动表格的默认宽度this.$refs.configurationTable.$el.style..

2020-10-16 11:32:27 505

原创 Vue 实现页面跳转

toIndex: function(){ this.$router.push("/?linkParam="+ localStorage.getItem("id"));}this.$router.push()方法只有一个参数的时候,代表跳转地址,还可以增加参数传值。写法:this.$router.push({name: "toLink", params: {'id': data.id, 'title': data.title}});接收参数:this.$route.params.

2020-10-16 11:20:25 271

原创 Vue 将输入框的输入的小写自动转大写(使用 v-model 时采取另一种方式)

输入框中小写字母自动转换为大写网站地址:我的个人vue+element ui demo网站 github地址:yuleGH github 过滤器实现 <html><head> <title>测试</title></head><body><div id="app"> <input id="val1" v-model="value1"> <br/&g...

2020-10-16 11:11:17 6678 1

原创 JS 将输入框中输入的英文字母自动转换为大写的方法

输入框中小写字母自动转换为大写方法一用表单输入框的 onkeyup 属性和 JavaScript 的 toUpperCase() 方法来实现oninput="value=value.toUpperCase()"方法二网上搜索方法,以下方法会默认先显示输入的小写字母再置空,用户体验不是很好oninput="value=value.replace(/[^0-9A-Z]/g,'')"方法三Vant 组件有个formatter 属性可以用 toUpperCase() 方法默认将.

2020-10-16 10:51:32 2251

原创 ES6 新增 padStart() 方法和 padEnd() 方法

将一个字符串的长度规定,如果达不到这个长度,则向前/后补充一个值方法 参数 说明 padStart (num, val) 规定一个字符串长度为num,如果长度不够,往前补val(可选) padEnd (num, val) 规定一个字符串长度为num,如果长度不够,往后补val(可选) console.log('123'.padStart(5, '0')) // '00123'console.log('123'.padEnd(5,...

2020-09-25 16:26:13 283

原创 Vue 监听路由变化

Vue 监听路由Vue 通过 watch监听路由变化// 监听,当路由发生变化的时候执行watch:{ $route(to, from){ console.log(to.path); }},或// 监听,当路由发生变化的时候执行watch: { $route: { handler: function(newVal, oldVal){ console.log(newVal); }, // 深度观察监听 deep: tru

2020-09-14 14:55:28 266

RightMenuMgr1.2.1.7z

windows 右键菜单管理器就能轻松快速删除清理掉不用的菜单了,RightMenuMgr 不仅可以删除不要的项目,也能增加自定义右键菜单项目譬如这个「复制文件路径」

2020-10-10

vue-devtools.zip

在SPA逐渐成为构建优秀交互体验应用的主流方式后,使用Electron开发跨平台的软件是一个优秀的解决方案。而Electron本来是应该预装好了vue-devtool的,奈何 electron-devtools-installer 这个库不知道有什么问题,故本资源可以为Electron开发封装vue-devTools拓展

2019-11-07

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除