【错误记录】一些错误记录

写在前面的话
开这个主要是记录一些自己在工作中遇到的bug,如果有小伙伴遇到类似的也可以当做一个参考。
【PS:】这个帖子会持续更新。
在这之前,先分享一个我在掘金上看到的比较有用的帖子,希望对大家有所帮助。我是地址:Vue 项目里戳中你痛点的问题及解决办法
本来想整一个toc目录,发现不能像有道云笔记那样,可能是我打开的方式不对,如果有会的小伙伴,教教我怎么弄这个(*/ω\*)
1.复制内容到剪贴板
ios8中,系统自带的复制命令和Clipboard插件复制都会失效 因为系统自带的document.extComand指令兼容在safari10以上,而插件支持也是在safari10以上 ios8的版本过低,所以会失效。

这种情况一般降级处理:
1.展现要复制的内容,让用户自行手动复制。
2.弹窗提示,通过其他渠道,例如扫描二维码之类的 PS:用Clipboard插件复制比原生的要好,原生的document.extComand有个Bug,第一次点复制之后,剪贴板里面的内容不是复制的内容,必须得第二次复制,剪贴板里的内容才是这个内容。 【附上Clipboard的地址】:Clipboard地址


【【错误记录】一些错误记录】2.过滤传递过来的值的显示形式
对于父组件传给子组件的值,如果想要修改属性的展现形式。推荐使用computed属性。
因为父组件传给子组件的值,只是一个引用的过程,可以参考引用属性之类。
例如:时间,如果后台传来了时间的字符串包含了具体时间,也就是小时、分钟等。 而前端展示又只想要年月日,这里不用filters。不是过滤。得用上computed属性才行。


3.关于scrollTop
vue项目,尤其是引用了第三方库做了加载更多操作的文件中,在配合navbar切换时,切换后的滚动条并不会自行滚动到顶部,而是会记录之前的滚动行为,停留在页面底部。
如果想要在切换的时候,同时页面滑动到顶部,像是刚进来的样子,这种功能其实就是“回到顶部”功能。
PS: 这个方法得放在watch中执行,监听navtab切换时的值,然后进行操作。
下面是一段网上说的设置回到顶部的常用代码:
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

然后设置scrollTop为0,但是尝试了还是不行。 也尝试过在滑动层的dom进行scrollTop操作,最终都会说scrollTop is undefined
尝试过每次切换的时候打印当前scrollTop的值,发现都是0,但是确实在切换的时候并不能回到顶部,好忧桑。。。
此时有两种办法:
方法一:
navtab切换的两个当成两个不同组件来写,当watchselect值发生变化时,this.$route.replace到那个组件上去。这样路由有个“滚动行为”,可以将页面直接回到顶部。看起来像是新渲染出来的。
【但是这种方法不好,属于下下策了,因为本身这两个页面也许是同一种功能、样式,只是因为请求参数不同,而导致看起来像是两个页面一样】
方法二:
这个方法是我在查看之前的代码时发现的,也就是在引用第三方组件的父层,绑定ref,对这个dom进行操作。具体操作如下
watch: { selected: function (val, oldVal) { this.$refs.friendPage.scrollTop()// 每次切换滚动到页面顶部 this.chooseLevel(val) // 切换navtab时重新请求列表 } },

重点是这一句this.$refs.friendPage.scrollTop()
之前有做过类似的操作,但是不是xxx.scrollTop()而是xxx.scrolltop = 0,这样写就会报scrollTop is undefined的错误。
4.动态组件+父子传值
最近接到这样一个需求,父组件内子组件的顺序不是固定的,也就是在父组件内,可能以下是1234子组件的排列,也可能变成了2413这种排列顺序。之前都是:

【错误记录】一些错误记录
文章图片
父组件内放子组件
这种在父组件内,将子组件排列好,然后传对应的数据过去。
但是,想要动态改变子组件顺序,而且是针对不同的场景。比如说A用户登录看到的是12的顺序,B用户登录看到的就是21的顺序。
查了一些资料,可以用到 :is,请看大屏幕。啊哈:
【错误记录】一些错误记录
文章图片
就是这样这样
items存放的是子组件的名称,也就是
items: ['introduce', 'about-us-img']

这个时候父组件内子组件就是introduce在前,about-us-img在后,但是!!!数组咋办啊,,直接写
--- 我是9月11日的更新分割线 ---
前端性能化webpack-bundle-analyzer
这个神器大家应该都听过,就算没听过,可能也见到过。
就是这个。

【错误记录】一些错误记录
文章图片
我就是这个神器
在这里可以看到各个模块打包的js占用大小。
本来我还噼里啪啦各种百度然后进行配置,当报错的时候,发现了这么一句话。
【错误记录】一些错误记录
文章图片

然后我就去 webpack.prod.conf.js里面找,发现了这样一段代码。
【错误记录】一些错误记录
文章图片
好像是vue-cli集成的
接下来就是见证奇迹的时刻,输入这样一串命令。
npm run build --report

【错误记录】一些错误记录
文章图片
image.png
加个参数就行了,然后就会执行,接下来浏览器自动打开 http://127.0.0.1:8888/这个地址。
【错误记录】一些错误记录
文章图片
于是我就出来了

    推荐阅读