vue 封装 黑色遮罩层组件mask

//使用组件的时候,需要自己定义一个固定宽高的div
组件:

template
  div class="mask"
    div class="poster"
      div class="inner-mask"/div
      img :src="url" alt="" /
    /div
  /div
/template
script
export default {
  props: ["url"],
  data() {
    return {};
  }
};
/script
style lang="less"
.mask {
  width: 100%;
  height: 100%;
  position: relative;
  .poster {
    position: relative;
    width: 100%;
    // height: 100%;
    .inner-mask {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      background: rgba(0, 0, 0, 1);
      opacity: 0.4;
      height: 100%;
      width: 100%;
      filter: alpha(opacity=60);
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}
/style

//使用
在需要的地方
1.先引入
import mask from './mask
2.使用

//url为黑色遮罩层图片路径
最新回复(0)
/jishullpfwEwYLZyKcverTIjjU0I514T8zeJc1L_2FO3Q_3D_3D
8