- 博客(49)
- 资源 (7)
- 收藏
- 关注
原创 vue3.2 响应式之 ref 、reactive 、toRef 、 toRefs
【代码】vue3.2 响应式之 ref 、reactive 、toRef 、 toRefs。
2022-11-23 16:28:38
1567
原创 element upload 覆盖上传
实现element upload 文件覆盖上传根据官方文档给出的属性和方法总结几种解决方案官方文档://on-progress abort 或 file-list//设置 upload 组件 ref='upload'onProgress(file,fileList){ //file-list fileList.length>1?fileList.splice(0,1):'' //判断条件 + abort if(xxx){ this.$refs.upload.abort(
2022-05-02 02:07:24
670
原创 执行 json 中的 “函数”
JSONMDN中关于JSON方法 stringify 和 parse 的转换解析类型有明确的说明 :undefined、任意的函数以及 symbol 值,在序列化过程中会被忽略(出现在非数组对象的属性值中时)或者被转换成 null(出现在数组中时)。函数、undefined 被单独转换时,会返回 undefined,如JSON.stringify(function(){}) or JSON.stringify(undefined).这条说明 一个内部存在 函数的 Object 通过 JSON.s
2022-02-10 10:14:58
1063
原创 实现简单 promise
实现简单 promise分析:premise 有三个状态:pending、fulfilled、rejected一个成功回调: resolve一个失败回调: reject函数:premise 是一个对象变量:定义三个变量分别用于保存 状态、成功结果、失败结果实现: function _promise(constructor){ let that = this //保存this //定义 变量 that.status = 'pending' //定义初始状态 为 pend
2022-02-07 15:32:51
532
原创 实现 call apply bind
// call apply bind 都是 function 原型上的方法// call 传入 this指向的对象 传入参数 列表Function.prototype.myCall = function (context,...args){ if (context===null||typeof context === undefined){ context = window //如果 context 传入 null 或 undefined 则 this 指向 window } //传
2022-02-07 12:02:59
818
原创 浏览器缓存
浏览器缓存浏览器缓存分为强缓存和协商缓存。当客户端请求某个资源时,获取缓存的流程如下先根据这个资源的一些 http header 判断它是否命中强缓存,先检查Cache-Control,如果命中,则直接从本地获取缓存资源,不会发请求到服务器; 当强缓存没有命中时,客户端会发送请求到服务器,服务器通过另一些request header验证这个资源是否命中协商缓存,称为http再验证,如果命中,服务器将请求返回,但不返回资源,而是返回304告诉客户端直接从缓存中获取,客户端收到返回后就会从缓存中获取资
2022-02-07 09:39:24
97
原创 f5和CTRL+f5刷新页面的区别
f5刷新网页时,跳过强缓存,但是会检查协商缓存ctrl+f5 强制刷新网页时,直接从服务器加载,跳过强缓存和协商缓存
2022-02-07 09:22:37
508
原创 获取URL params
通常获取url后面的参数使用分割或正则字符串分割//字符串分割let url = 'http://www.domain.com/?user=anonymous&id=456&city=%E5%8C%97%E4%BA%AC';const parseParam = (url)=>{ const params = url.split('?')[1].split('&') console.log(params) /**[ * 'user=anonymou
2022-01-27 11:34:56
2214
原创 简单深拷贝
let obj = {c:1,d:()=>{}} obj_ = {a:1,b:2} obj__ = {a:()=>{},b:()=>{},c:1} _obj = [1,2,3,1] _obj_= 1// 深拷贝// JSON.parse(JSON.stringify())// 局限性:// 他无法实现对函数 、RegExp等特殊对象的克隆// 会抛弃对象的constructor,所有的构造函数会指向Object// 对象有循环引用,会报错
2022-01-26 10:14:21
1101
原创 原生 ajax
Ajax原生写法// ajax// 步骤:创建 ajax 实例 let xhr = new XMLHttpRequest() console.dir(xhr) //打印 xhr 对象 let res = undefined // 保存响应 // 建立链接 // xhr.open(method,url,isasync)//方法 地址 是否异步 xhr.open('get','./1.json',true) //get 请求 //设置请求头 //xhr.setRequestHeader
2022-01-25 15:41:39
847
原创 关于防抖节流方法
防抖 :指的是 方法出发后一段时间内只执行一次 如果再次触发则清除上一次的计时器 重新计时// 防抖const d = (fn,wait)=>{ let timer = null //初始化定时器 return (...args)=>{ timer&&clearTimeout(timer)//有则清除 timer = setTimeout(()=>{ fn.apply(this,args) },wait) }}
2022-01-25 00:00:00
555
原创 关于ie使用new Set 去重数组的坑
关于ie使用new Set 去重数组的坑ie 11支持使用 Set 类型 ,但 new Set 的值不能是可迭代类型然后 。。。???? 数组踩坑了解决方案 : 使用其他方法遍历去重参考:Set
2021-12-30 16:45:45
681
原创 upload组件支持上传的文件类型
upload组件支持上传的文件类型// 音视频.3gpp audio/3gpp, video/3gpp .ac3 audio/ac3 .asf allpication/vnd.ms-asf .au audio/basic .ogg application/ogg, audio/ogg .mp2 audio/mpeg, video/mpeg .mp3 audio/mpeg .mp4 audio/mp4, video/mp4 //图片.jp
2021-12-20 15:46:45
2012
3
原创 nuxt项目ci部署 node-sass问题
node-sass 安装失败导致ci部署失败> node-sass@5.0.0 postinstall /node_modules/node-sass> node scripts/build.jsBuilding: /usr/local/bin/node /node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass
2021-12-08 10:36:24
960
原创 node监听器数量警告
node 监听器数量警告:MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 upgrade listeners added to [Server]. Use emitter.setMaxListeners() to increase limit解决://nuxt项目在 nuxt.config.js中加入(vue在vue.config.js中加入)require('events').EventEmi
2021-11-22 10:43:31
5340
原创 前端异常捕获
前端异常捕获方法:try…catch…try{ const a = 1; c = a+b}catch(error){ console.error(error)//打印异常 ReferenceError: b is not defined}//使用try catch能够很好的捕获异常并对应进行相应处理,不至于让页面挂掉,但是其存在一些弊端,比如需要在捕获异常的代码上进行包裹,会导致页面臃肿不堪,不适用于整个项目的异常捕获。window.onerror()相较于try…c
2021-11-16 09:57:33
2084
原创 实现 select 滚动 options 动态加载
实现 select 滚动 options 动态加载vue<el-select v-model="bankName" filterable remote v-loadmore='scroll' reserve-keyword placeholder="请输入" :remote-method="searchBank" @change="selectChange" :loading="loading"> <el-option v-for="item in bankNameOption
2021-11-01 17:46:52
770
原创 关于 el-table-column type属性
element el-table-column type :在开发过程中 有些时候前端id无意义而又需要前端展示id 此时可以使用 type = ‘index’ 实现 例: <el-table border :data="tableData" style="width: 100%"> <el-table-column width="80" align="center" label="序号" type='index'></el-table-column>
2021-10-12 17:18:36
16949
原创 支付密码组件
支付密码组件<!-- 支付密码设置 --><template> <div class='warp'> <head-tips headVal="结算管理" :value="headTips"></head-tips> <div class="container"> <div class="setpwd"> <div class="label-tit">请输入密码:&
2021-09-22 17:26:41
174
原创 Windows-nvm 换源
nvm 在国内下载 node 或 npm 镜像包 速度太慢 可通过更换 包下载地址加速操作 :在settings.txt中增加软件源node_mirror: https://npm.taobao.org/mirrors/node/npm_mirror: https://npm.taobao.org/mirrors/npm/
2021-09-15 14:34:40
935
原创 使用 oninput限制 input输入值 出现空值问题
例:<el-input v-model.number="scope.row.count " maxlength="9" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入" @change="showInfo(scope.row.count)"></el-input></el-form-item>使用 οninput=“value=value.replace(/[^0-9
2021-09-14 11:02:13
1058
原创 a++和 a+1
a++ & a+1 的区别example: 定义变量 a 测试 a++ 和 a+1 的区别 let a = 0 , b = a++, c = a+1; console.log(a,b,c)//1 0 2 说明: a++ 时 a 值发生变化 但 并未将值赋值给 b a+1 时 a 值未发生变化 但 将值赋值给了 c...
2021-09-10 11:11:08
1148
原创 nuxt 项目 内存溢出导致项目崩溃问题
nuxt 项目 内存溢出导致项目崩溃问题err:解决: 更改package.json 在 script 中配置 --max-old-space-size = 想配置的内存大小 example: "local": "node --max-old-space-size=4096 node_modules/nuxt/bin/nuxt.js", 配置完后重新 npm run local 如果使用 yarn 直接 yarn local 即可...
2021-09-09 16:07:43
1882
原创 nuxt 移动端适配
nuxt 移动端适配 (flexible + postcss-px2rem)flexible.js 根据需求自定义内容(function flexible (window, document) { let docEl = document.documentElement let dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFontSize () { if (documen
2021-08-09 15:27:29
2407
原创 NUXT head 配置 script 脚本
NUXT head 配置 script 脚本链接形式head:{ script:[{src='xxx.js'}]}javascript 脚本直接嵌入head:{ script:[{ innerHtml:"console.log(`js脚本`)" }]}总结外部文件引入使用 src 加文件路径即可直接引入脚本需使用其他方法将脚本嵌入 使用innerHtml时需注意转义...
2021-08-09 14:58:28
4328
3
原创 element select 随页面滚动位置变化解决
select 可使用 :popper-append-to-body=false时间选择器使用 :append-to-body=false可完美解决该问题
2021-07-20 15:24:10
1807
1
原创 element form inline属性bug
element form inline属性bugelement-ui 中 form 中 设置 inline 属性为 true 后会出现因设备分辨率改变,form 换行的bug原因分析图例总结出现 form 换行原因是由于:inline 属性给 form 设置了width:auto的样式,这会导致form按百分比缩放同时 form中 input 组件样式中存在 width:100%的设定这使得 input width 会自动与外层的div width 保持一致...
2021-06-30 14:39:48
4894
2
原创 element table报错‘tableId‘ of undefined“
Error in created hook: “TypeError: Cannot read property ‘tableId’ of undefined”出现该问题是 el-table 标签没有正确使用
2021-06-28 11:02:38
822
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人