写在前面的话
开这个主要是记录一些自己在工作中遇到的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
切换的两个当成两个不同组件来写,当watch
的select
值发生变化时,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的顺序。
查了一些资料,可以用到
<component>
和:is
,请看大屏幕。啊哈:就是这样这样
items
存放的是子组件的名称,也就是
items: ['introduce', 'about-us-img']
这个时候父组件内子组件就是introduce
在前,about-us-img
在后,但是!!!数组咋办啊,,直接写<component :is="item.name" v-for="(item, index) in items" :key="index" :introduceText="introduce">
--- 我是9月11日的更新分割线 ---
前端性能化webpack-bundle-analyzer
这个神器大家应该都听过,就算没听过,可能也见到过。
就是这个。
在这里可以看到各个模块打包的js占用大小。
本来我还噼里啪啦各种百度然后进行配置,当报错的时候,发现了这么一句话。
然后我就去
webpack.prod.conf.js
里面找,发现了这样一段代码。好像是vue-cli集成的
接下来就是见证奇迹的时刻,输入这样一串命令。
npm run build --report
加个参数就行了,然后就会执行,接下来浏览器自动打开
http://127.0.0.1:8888/
这个地址。于是我就出来了
网友评论