美文网首页
【错误记录】一些错误记录

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

作者: 八宝君 | 来源:发表于2018-07-24 16:05 被阅读0次

    写在前面的话

    开这个主要是记录一些自己在工作中遇到的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的顺序。
    查了一些资料,可以用到<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

    image.png
    加个参数就行了,然后就会执行,接下来浏览器自动打开http://127.0.0.1:8888/这个地址。
    于是我就出来了

    相关文章

      网友评论

          本文标题:【错误记录】一些错误记录

          本文链接:https://www.haomeiwen.com/subject/hnxymftx.html