css

• 滤镜效果

  // 1 父级 filter 属性会影响子元素的 position 效果
  https://www.jb51.net/css/719731.html
  
  

• 背景不跟随滚动

  设置 css 属性
  {
      background-attachment: fixed
  }
  // 1 background-attachment: fixed; 会影响 background-size: cover 的效果
  // 2 background-attachment: fixed; 因为比较耗性能在iOS下不生效
  

• 使用 overflow: hidden 页面放大缩小时元素内文字出现滚动条

js

vue

• for循环如果不加key，切换分页list为数组时diff会对比不准确，会导致渲染组件时，子组件watch偶尔监听不到
• EventBus，监听后会常驻不会自动销毁。有多个on时，会导致on事件多次触发
  • 使用后需要手动销毁

    beforeDestory(){
        EventBus.$off('msg');
    }
    

• v-for在组件呈现函数中可能有无限更新循环

  # You may have an infinite update loop in a component render function
  https://blog.csdn.net/u011584949/article/details/83821278
  

组件

• vue-awesome-swiper 循环模式下，第一个元素绑定的点击事件无效

  # 原因： Swiper 的 loop 模式需要首尾复制一定量的 DOM 实现循环，但复制的 DOM 并没有绑定和源元素一致的事件
  
  # 解决方法一：vue-awesome-swiper 在内部针对 Swiper 实现了 event listen，此 feature 将会发布在 v4.0.0 版本
  # @click-slide 会返回元素（包含复制的 DOM 节点）的下标，与实际下标有出入，使用中用处不大
  <swiper @click-slide="doSomething" />
  
  # 解决方法二：不要将click事件绑定在dom上，而是在放在 on 对象的回调函数中调用
  <swiper :options="swiperOption">
      <swiper-slide
          v-for='(item, key) in dataList'
          :key="item.id">
          <img :src="item.imgUrl" :data-index="key" />
      </swiper-slide>
  </swiper>
  
  swiperOption: {
      loop:true,
      on:{
          click(e) {
              // 使用e.target事件代理获取点击的元素，通过data语法获取元素的属性值
              let index = e.target.dataset.index;
              // 这里的this指向轮播,所以需要在外边声明了_this用来代表vue实例
              _this.goto(index); // 业务处理
          }
      }
  }
  

• 移动端适配

  • lib-flexible 当设备宽度大于 540px 时，rem 的值不随设备宽度改变，1rem 始终等于 54px，会导致 10rem 小于设备实际宽度，从而影响页面元素缩放比例，造成页面布局错乱。可以下载 lib-flexible，删掉里面相关的代码，再手动导入到项目中。

    // lib-flexible/flexible.js原文件
    ...
    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }
    ...
    
    // lib-flexible/flexible.js修改后
    ...
    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        // if (width / dpr > 540) {
        //    width = 540 * dpr;
        // }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }
    ...
    

  • amfe-flexible 是 lib-flexible 升级版，不会有 rem 问题，但是会给 body 设置字体大小，会影响继承 body 字体大小的元素样式。也可以通过修改源代码再手动导入解决。

• html2canvas

  # 暂不支持的css属性
  background-blend-mode
  background-clip: text
  box-decoration-break
  repeating-linear-gradient()
  font-variant-ligatures
  mix-blend-mode
  writing-mode
  border-image
  box-shadow
  filter
  zoom
  transform
  
  # 写svg要根据dpr提高图片尺寸，不然会模糊