2021-01-27

vue.js 项目开发过程中踩过的坑:

1:   position: sticky;

   这个sticky 属性是做吸顶效果是很好的.    但是这个属性是新出来的.  所以很多浏览器并不是支持.   而且这个属性在使用的时候:   有很多限制.

   所以大家在使用 stick:  在使用position: sticky 的时候,   一定要特别注意一下五点:

   1.1:    sticky:  不会触发BFC;

   1.2:    z-index: 无效;

   1.3:    当父元素的 height: 100%,  页面滑动到一定高度之后sticky 属性会失效.

   1.4:    父元素不能有: overflow: hidden;  或者overflow: auto;  属性;

   1.5:    父元素高度不能低于sticky 高度,   必须指定top, (高度);  bottom (底部高度);  left (左部);  right (右侧); 

      特别是第三点:    父元素的高度一定不能设置为 100%,   否则就会出现各种问题.

2:    关于props  传入的东西必须使用v-bind 来动态绑定:

       比如获取传入图片的地址: 

      

props: {
  imgSrc: {
    type: String,
    default: {
       return ''
    }
  }
}

要用这个图片地址，要记得用v-bind动态绑定

<img v-bind:src="imgSrc">

简写：

<img :src="imgSrc">