SCSS上传图片占位区域样式

_App.scss

// 上传图片占位区域样式----------------------------------------
[theme="uploadImage"] {
    transition: 0.2s;
    position: relative;
    cursor: pointer;
    border-radius: 4px;
    /*居中填满*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    &::before {
        content: "按要求上传图片";
        transition: 0.2s;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        box-sizing: border-box;
        border: 1px dashed transparent;
        border-radius: 4px;
        background-color: #fafafa;
        color: #c6d1de;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: normal;
        animation: sg-animate-px 1s linear forwards;

        @keyframes sg-animate-px {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }
    }

    &[style*="background"] {
        &::before {
            content: none!important;
        }
    }

    &:hover {
        &[style*="background"] {
            transform: scale(1.01);
        }

        &::before {
            color: #409eff;
            border-color: currentColor;
            background-color: #409eff11;
        }
    }

    &:active {

        &[style*="background"],
        &::before {
            transform: scale(0.99);
        }
    }
}

demo

<template>
  <div :class="$options.name">
    <div
      class="uploadImage"
      theme="uploadImage"
      :style="imgFile ? { backgroundImage: `url('${imgFile}')` } : ``"
      @click="imgFile = `http://www.baidu.com/img/flexible/logo/pc/result@2.png`"
    />
  </div>
</template>
<script>
export default {
  name: `demo-uploadImage`,
  data() {
    return {
      imgFile: ``,
    };
  },
};
</script>
<style lang="scss" scoped>
.demo-uploadImage {
  .uploadImage {
    $width: 400;
    $height: 130;
    width: #{$width}px;
    height: #{$height}px;
    &::before {
      content: "#{$width} × #{$height}像素";
    }
  }
}
</style>