![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
流浪码农~
你为什么想不开要当程序员?
展开
-
vue-admin-template项目将node-sass迁移至dart-sass踩坑记录
node-sass升级至dart-sass问题解决原创 2022-05-12 10:20:42 · 884 阅读 · 0 评论 -
chrome浏览器debug vue项目,跳过vue源码
在就发vue-cli的项目,也会用到webpack,npm等工具。在debug的时候,只是想看当前代码的执行情况。但是调试就会经常进入到vue.esm.js等一些源码文件。一进去就很跳出来了,十分麻烦。Chrome调试也是才知道,谷歌浏览器其实有一个黑盒功能,可以设置忽略的文件。设置后,debug就不会进入到这些文件。F12 点击设置按钮在 Ignor List 里添加要忽略的文件名称即可。Debugger for Chrome 调试1.安装插件2.添加launch.json配置文件.原创 2021-12-31 16:32:38 · 2398 阅读 · 3 评论 -
使用pointer-events改造树节点
修改树组件的禁用样式,使得父节点不能点击,但是可以展开,缩回子节点原创 2021-12-21 10:00:17 · 142 阅读 · 0 评论 -
vue-router使用query传对象、数组,刷新后参数丢失
在页面之间跳转,需要携带参数。正常传参的话就vue-router的params,query两种,或者使用localStorage本地持久化存储。为了刷新不丢失数据, 我使用query进行传参,但是我传的是一个对象。发现刷新后,即使url里还有object的相关信息,但是数据还是丢失了。原因:第一次跳转,是没有问题的。刷新页面后,url里的object就会变成字符串,数据就丢失了。解决方法:使用JSON.stringify将对象数据包裹,转换为字符串。在接收时使用JSON.parse解析回对象.原创 2021-12-14 14:15:08 · 5492 阅读 · 1 评论 -
关于localStorage的getItem方法获取到的是字符串的问题
今天遇到了一个bug。因为有个地区数据是要存在本地的。但要作判断,如果数据为空的话,要发起请求获取数据。首先我这里的localStorage.getItem(‘AreaList’)是个空数组。按我的if逻辑来说, [ ] === null 为false,然后就会去判断后面的[ ].length = 0 这里应该是true,那么就会去执行if下面的代码。问题就出现在这里,代码没用执行到。也就是说明 if 的整个判断是 false、我就把获取到的数据,看看它的typeof ,打印出来发现是stri.原创 2021-11-15 15:43:26 · 3853 阅读 · 0 评论 -
vue实现在线预览office文件
最近在做电子档案,后端提供了文件的华为云的oss链接。已经实现了点击下载文件的功能。但是呢,他们又希望常规的文件,可以直接点击预览,不需要下载。按道理说,做文件的在线预览,买个第三方服务什么的,后端部署一下服务,前端对接一下,就通通搞定。顶不住第三方基本上是要money的。那不想掏money,还有什么解决方法呢。方法一用微软的office online进行在线预览https://view.officeapps.live.com/op/view.aspx?src=文件地址例:https://v.原创 2021-10-20 17:03:19 · 11841 阅读 · 13 评论 -
前端生成uuid
有时候需要前端自己生成一个uuid作为唯一值传给后端。直接上代码/** * * * 获取请求的UUID,指定长度和进制,如 * getUUID(8, 2) //"01001010" 8 character (base=2) * getUUID(8, 10) // "47473046" 8 character ID (base=10) * getUUID(8, 16) // "098F4D35"。 8 character ID (base=16) * */export functi.原创 2021-10-19 16:57:22 · 8794 阅读 · 0 评论 -
VSCODE插件Comment Translate突然翻译不了的问题
因为项目用了vue-i18n,为了方便快速翻译,所以装了Comment Translate插件之前一直都可以使用,现在突然就不行了。试了卸载重装插件后也不行,最后在该插件的扩展设置里,将Google换成Baidu才解决,不确定是不是墙的原因。...原创 2021-10-18 09:35:11 · 7787 阅读 · 2 评论 -
vue中通过在线链接使用iconfont阿里图标库FontClass
看项目原来的都是将图标下载到本地,然后引入css文件。查了些文章也都是介绍的,先将图标下载到本地再导入。那么在项目开发中,时不时就会需要加入新的图标。这时候每次都要重新将图标下载到本地再导入。觉得十分麻烦。这里介绍用在线链接来引入。更新图标后只需要替换iconfont生成的链接。加图标加入导项目后,选择font class 。 生成链接,复制这个链接。2.在assets下新建一个icons文件夹,并新建一个css文件。3.在css文件里,通过@import 刚刚复制的链接在mai.原创 2021-10-15 10:40:16 · 2364 阅读 · 0 评论 -
proxyTable代理,使用onProxyReq函数查看真实的代理路径
vue项目用到了proxyTable代理,有时候请求不到。F12看network的url是没问题的,这时候想查看一下真实的代理路径。直接上代码proxyTable:{ "/arc": { target: targetUrl, changeOrigin: true, pathRewrite: { "^/arc": "/arc" }, onProxyReq:function(proxyReq,.原创 2021-10-13 10:24:50 · 3163 阅读 · 0 评论 -
xeutils的getDateDiff函数,算出的月份有差异
今天才发现,有个奇怪的问题我使用getDateDiff函数返回的月份数据不对劲2021-01-01 到 2021-09-30 相差的是九个月份起始时间改成2021-01-05。相差月份却变成了8个月。看了下源码,计算应该是拿的结束的总时间减去开始的总时间(这里总时间是指返回距 1970 年 1 月 1 日之间的毫秒数)。源码如下:总之这种差异,不是我想要的结果,我只想要单纯的9月份到1月份就是相差9-1=8所以最后选择,使用moment获取月份,再两者相减 // 根据差异的年,月数,原创 2021-09-30 11:41:21 · 485 阅读 · 0 评论 -
使用axios进行下载Excel文件
上一篇文章使用fetch方法来下载Excel。但因为现在有的下载文件的接口,需要传很多参数。而fetch的get方法,只能将参数一个一个进行拼接,十分麻烦,所以将他改造成axios方法来进行下载。使用fetch()获取响应头的content-disposition拿到文件名,下载Excel文件老规矩,先上代码 exportExcel() { const a = document.createElement('a') this.$axios.request({ .原创 2021-09-23 15:28:56 · 2844 阅读 · 2 评论 -
input的focus事件阻止冒泡
在写界面的时候,选中一个输入框,就会弹出一个弹窗。还需要做可清除。在加了clearable属性之后,就遇到问题了。点击 X 图标进行清楚之后,弹窗也会打开。注意:我这里使用的是vxe-input,一个vxe-table组件的输入框这里的问题就是点击清除图标,@focus也进行了冒泡,执行了打开弹窗的事件。先上代码这里原来就是使用的@focus事件来打开弹窗,在遇到冒泡的问题之后,就想着在函数里执行$event.stopPropagation() 来取消冒泡。但发现没有效果最后选择使用@c.原创 2021-09-22 12:07:19 · 3765 阅读 · 0 评论 -
modal模态框里的表单输入框,使用focus()方法无法自动获得焦点
在写界面的时候,要写增加功能。自然而然的写了一个弹框包含一个表单。因为嫌弃每次打开都需要点击输入框才能输入比较麻烦,所以想加一个自动聚焦的功能。结果就试了半天也不行。正常的想法就是,给el-input注册一个ref,然后使用focus方法来聚焦。这里遇到的问题就是,如下图,我在打开窗口的事件里,调用 this.$refs[‘nameInput’].focus()发现并没有自动聚焦,怀疑是不是dom更新的问题,就加上了 $nextTick。然后发现还是没有效果。查了一下,有可能是调用时机的问题.原创 2021-09-08 14:28:38 · 1306 阅读 · 0 评论 -
输入框限制输入20个中文字(40个字符)。eslint 报错\x00 no-control-regex解决
需求是要限制用户输入的名称,最多二十个中文字,也就是40个字符。但我们平时使用str.length来限制都是获取到字符串的长度而已,并不能获取到具体的字符。这里使用正则来解决。一个汉字=2字节=2字符一个字母、数字=1字节=1字符匹配单个字节/[\x00-\xff]/取反,即是匹配多字符的(中文汉字)/^[\x00-\xff]/// 函数这里可能因为eslint的原因,不让使用\x00正则,可以直接在该行代码后面添加 // eslint-disable-line// 控制字符串只能输.原创 2021-09-08 11:25:05 · 3237 阅读 · 0 评论 -
使用fetch()获取响应头的content-disposition拿到文件名,下载Excel文件
需求就是下载一个Excel文件,包括下载,导出,都是调用后端的接口。因为文件名返回再了响应头的content-disposition。前端需要进行一个处理,拿到文件名。先上代码 downloadDefaultExcelTemplate() { const url = process.env.BASE_API + '/sys/get_account_begin_temp/' const a = document.createElement('a') // 使用f.原创 2021-09-01 09:47:07 · 7267 阅读 · 2 评论 -
array.map循环,使用return或者break都不能退出循环
踩了个坑,记录一下在遍历数组的时候,使用到了array.map在循环里面需要进行判断,只要有一项满足条件就返回true,否则返回true敲完代码之后,发现效果不对,debug一下才发现,return没有真正退出循环。map里没法使用break,return来退出循环所以建议还是使用 for循环来代替// 使用map循环 canDelete(data) { if (data.length > 0) { data.map(item=>{ .原创 2021-08-24 17:11:47 · 4027 阅读 · 0 评论