解决方案
因一些工作需求,实现过程中遇到的知识积累
我叫陈小皮。
前端菜鸟,请多指教
展开
-
Axios请求失败重刷接口
页面接口请求时偶尔会出现 Network Error 异常报错,重新请求就会请求成功。接口没办法捕获异常原因,前端来做一次重刷解决问题。原创 2023-05-31 10:54:37 · 926 阅读 · 0 评论 -
webpack将静态资源压缩语法转义后拷贝至目标文件夹
使用webpack相关插件以及babel 完成项目中单独某个文件或文件夹下 静态资源拷贝压缩以及语法转移原创 2022-10-12 14:57:48 · 648 阅读 · 1 评论 -
vue + Intro.js 新手指引
vue 中 新手指引introjs插件的使用原创 2022-09-19 17:08:46 · 618 阅读 · 0 评论 -
Axios 接收导出文件流
请求时,用blob格式去接收,设置responseType: ‘blob’标题在接口返回错误时,需要将接收到的 blob 转为 json 做错误提示接口请求export function exportFile(queryInfo) { return http({ url: 'xxx', method: 'get', params: queryInfo, headers: { 'Content-Type': 'application/octet-strea原创 2022-01-04 15:18:28 · 4390 阅读 · 0 评论 -
localforage前端本地存储
可以解决 localStorage/sessionStorage 大小限制的问题完美避开 indexDB 的语法,上手比较容易localForage.getItem 返回的是 promise不会因为关闭浏览器就消失,需要手动清理哦 removeItem(key), clear()具体使用 https://www.npmjs.com/package/localforage 、 https://juejin.cn/post/7024119821365149709记录使用,没有详细瞅,大家伙具体问题具.原创 2022-03-17 14:09:53 · 1035 阅读 · 0 评论 -
vant 必填项“*“放后面
<van-field v-model="formData.customerName" name="customerName" label="客户名称" placeholder="点击选择" right-icon="arrow" required readonly/>::v-deep .van-cell--required { &:before{ content: '' } .van-cell__title.van-field_.原创 2021-03-10 11:58:57 · 7103 阅读 · 3 评论 -
vue 进入页面之前跳转到外链地址
需要在vue进入某个路由前,做判断跳转到外链地址。原创 2021-11-26 09:41:14 · 820 阅读 · 0 评论 -
单张/多张图片压缩zip格式文件完成上传
利用jszip插件安装npm install jszip --save引用import jsZip from 'jszip';export default{ data(){ jsZip, return { } }}相关方法https://stuk.github.io/jszip/documentation/api_jszip.html使用let jszi...原创 2019-04-29 11:13:46 · 1370 阅读 · 0 评论 -
vue 引用字体库iconfont,使用svg,svg组件封装注册使用
引入public.html 引入在线链接下载到本地后main.js 引入 iconfont.js注意:如果项目开了eslint,可能引入iconfont.js会报错,要设置忽略使用<!-- xlink:href 去复制代码所复制出来的东东 --><svg class="icon" aria-hidden="true"> <use xlink:href="#icons-PromptInformation-solid"></use>&l原创 2021-04-19 11:04:34 · 440 阅读 · 0 评论 -
elementUI输入框只能输入数字解决方案
借鉴地址需求描述只能输入数字控制输入11位验证如果不是11位提示错误当输入时取消验证,没有错误提示问题1.el-input type=number e仍然可以输入,方案pass2.利用wach监听el-input的值,并没有实时变化3.el-form-item中的prop对于原生input是没有验证功能的解决方案1.将el-input改成input,加上class2.手...原创 2019-08-19 11:31:44 · 11175 阅读 · 0 评论 -
vue input控制输入框十位整数位两位小数位,其他字符不让输入
<input type="text" placeholder="请输入金额" v-model="orderMoney" @input="checkInput" />checkInput() { this.orderMoney = this.dealInputVal(this.orderMoney);},dealInputVal(value) { value = valu...原创 2019-10-22 17:54:32 · 1776 阅读 · 1 评论 -
vue input银行卡四位空一格
bankCardNo:function(newval){ // 四位空一格 this.$nextTick(() => { this.bankCardNo = newval.replace(/\s/g,'').replace(/....(?!$)/g,'$& '); });}原创 2019-10-22 17:52:10 · 1465 阅读 · 0 评论 -
正则 - 除后四位都显示* / 除第一位都显示*
最近做了个需求,身份信息,身份证银行卡需要只显示后四位,姓名只显示第一位,so,有了这个博客real_name.replace(/([\u4e00-\u9fa5a-zA-Z])/g, function (a, b, c, d) { return c >= 1 ? '*' : a });id_number = id_number.replace(/(\w)/g, function ...原创 2019-10-28 16:34:22 · 805 阅读 · 0 评论 -
正则匹配 - 大于1的整数和小数,小数保留三位小数点
let pattern = /^(([1-9]\d+)|[0-9])(\.\d{1,3})?$/;pattern.test(1); // truepattern.test(1.123) // truepattern.test(0) // falsepattern.test(1.2343) // false原创 2018-09-10 16:50:06 · 4170 阅读 · 0 评论 -
正则匹配 - 手机号 中间四位 显示 *
var phone = '13456789012';var pattern = /(\d{3})(\d{4})(\d{4})/;phone = phone.replace(pattern, "$1****$3");console.log(phone)原创 2018-09-10 16:48:03 · 3007 阅读 · 0 评论 -
原生video标签去掉右下方下载按钮
video::-internal-media-controls-download-button { display:none; }video::-webkit-media-controls-enclosure { overflow:hidden; }video::-webkit-media-controls-panel { width: calc(100% + 30原创 2017-09-19 11:54:13 · 3531 阅读 · 0 评论 -
video H5微信点击播放自动全屏
本身ios是支持自动全屏的,但是安卓不可以,所以引入了插件videojs,亲测没啥问题<video ref="video" class="video-js vjs-default-skin" preload="auto" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="landscape" style='object-fit: c原创 2021-07-16 10:19:15 · 887 阅读 · 0 评论 -
input file 实现拍照上传和选择相册等文件
直接写 <input type="file" accept="image/png,image/jpg"> 这样的格式只能通过文件管理器选择图片 当需要实现手机拍照上传的时候,需要多加一个属性capture=”camera”<input type="file" accept="image/png,image/jpg" capture="camera">当需要实现直接选择相册或者sd卡上的相片的时候需原创 2017-11-15 10:50:30 · 17142 阅读 · 0 评论 -
常用谷歌浏览器插件
FireShot 截全屏JSONView 格式化json数据VueDetools vueHosts Switch Plus 修改host地址Cookie Inspector 设置cookieSwitchyOmega 代理相关插件We原创 2017-12-15 20:28:49 · 514 阅读 · 0 评论 -
谷歌浏览器 跨域访问 设置
原文地址1.在电脑上新建一个目录,例如:C:\MyChromeDevUserData2.在属性页面中的目标输入框里加上 –disable-web-security –user-data-dir=C:\MyChromeDevUserData,–user-data-dir的值就是刚才新建的目录。3.点击应用和确定后关闭属性页面,并打开chrome浏览器。再次打开chrome,发现有...原创 2018-04-26 11:40:52 · 2722 阅读 · 0 评论 -
js 判断 iPhone X、iPhone XS、iPhone XS Max、iPhone XR
// iPhone X、iPhone XSvar isIPhoneX = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 &am...转载 2019-06-11 17:49:09 · 20966 阅读 · 0 评论 -
js检测移动端横竖屏,并进行相应操作
(function() { var supportOrientation = (typeof window.orientation === 'number' && typeof window.onorientationchange === 'object'); var init = function() { var htmlNode = documen转载 2017-10-28 15:07:01 · 488 阅读 · 0 评论 -
js实现页面的打印
利用浏览器中自带的 window.print() 方法(1) 实现整个页面的打印直接点击调用这个方法即可 (2)实现局部页面的打印时,首先要加开始打印位置以及打印结束位置的标注,我们只需截取两者中间的部分进行打印即可<div class="modal-body"> <div class="bootbox-body"> <div class="row">原创 2017-09-20 14:43:54 · 3372 阅读 · 4 评论 -
js获取域名
//获取域名 window.location.host; (带端口号) document.domain; (不带端口号)//获取页面完整地址 window.location.href;原创 2018-01-05 12:06:02 · 1234 阅读 · 0 评论 -
git常用命令
git status 查看文件修改等状态git add 常用git add . git commit -m ” ” 用于将暂存的修改提交入仓库,提交信息是引号中文字git pull 从远端拉取代码git push 往远端推送代码git push origin 分支名 推到远端某分支git checkout ...原创 2018-01-26 19:43:06 · 175 阅读 · 0 评论 -
利用ajax以及formData实现文件上传
type="file" id="file">利用jquery实现上传var el = $('#file')[0];var formData = new FormData();//如果没有el.files[0],则不执行后续操作if(!el.files[0]){ return; }formData.append('file', el.files[0]);$.ajax(原创 2018-01-08 19:40:30 · 1116 阅读 · 0 评论 -
原生js实现$.param() 函数
由于遇到相关序列化的问题,但是vue项目中由于减少队jquery引用的限制,导致不能用$.param来序列化参数,所以写了如下方法用来解决相关问题,但由于考虑不全,可能存在判断不全或者代码冗余等情况,希望多提意见,多多改善var personObj = { name:'cheny0815', age:24, other:{ a:1, b:...原创 2018-08-09 16:07:21 · 3728 阅读 · 0 评论 -
jquery 动态加载css,js文件
动态加载css文件:$('#btn').click(function(){ $('head').children(':last').attr({ rel: "stylesheet", type: 'text/css', href: './style.css', });})动态加载js文件: $.getScript(url,c原创 2017-11-07 11:07:42 · 14576 阅读 · 1 评论 -
移动端兼容性处理方案
1. IOS移动端click事件300ms的延迟响应在IOS safar浏览器中,触发click事件,网页往往无法立即执行,会有300ms的延迟时间。影响:IOS safar浏览器解决方法: 1.fastclick可以解决在手机上点击事件的300ms延迟 2.zepto的touch模块,tap事件也是为了解决在click的延迟问题 3.也可以绑定touchstart或touchend触屏事件,转载 2017-07-13 11:37:08 · 531 阅读 · 0 评论 -
rem布局js设置
;(function(win,doc){ function changeSize(){ doc.documentElement.style.fontSize=50*doc.documentElement.clientWidth/320+'px' } changeSize(); window.addEventListener('resize',changeSize原创 2017-10-11 15:21:03 · 1298 阅读 · 0 评论 -
[ css ]文本溢出显示省略号
单行文本溢出显示省略号1.方法一:p{ overflow: hidden; text-overflow: ellipsis; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}2.方法2:span{原创 2017-07-15 17:30:20 · 294 阅读 · 0 评论 -
省市县三级级联
主要思想1.省改变,市改变,并初始化县2.市改变,县改变html代码<select id="sheng"> <option value="">--请选择--</option> <option value="0">北京市</option> <option value="1">河北省</option> <option value="2">山西省</option>原创 2017-05-16 10:55:34 · 469 阅读 · 0 评论 -
广告框页面随意滚动特效
1.先给广告框一个绝对定位,设置left,top的值,给出广告在页面中的位置<div id="ad" style="position:absolute;left:10px;top:10px;"> <img src="guanggao.jpg" alt=""></div>2.获取元素var ad = document.getElementById('ad');3.定义所需要的全局原创 2017-05-16 11:14:17 · 720 阅读 · 0 评论 -
jquery边框特效
主要思想1.将四个div分别定位到大div的上下左右位置2.分别设置成宽度为0或者高度为03.让其执行给定动画,即多少毫秒让宽度或者高度变为指定的长度html代码<div class="box"> <div class="border_top"></div> <div class="border_bottom"></div> <div class="border_lef原创 2017-05-16 10:50:32 · 1737 阅读 · 0 评论 -
原生js实现放大镜特效
普及知识:放大镜特效涉及到的几个值offsetWidth 获取元素的宽度offsetHeight 获取元素的高度offsetLeft父元素没有定位时,获取元素距离页面的左边距,父元素有定位时,获取元素距离父元素的左边距offsetTop父元素没有定位时,获取元素距离页面的上边距,父元素有定位时,获取元素距离父元素的上边距scrollTop 内容滚动的上边距scrollLeft 内原创 2017-05-16 11:59:32 · 693 阅读 · 0 评论