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为黑色遮罩层图片路径