SCSS上传图片占位区域样式

_App.scss

css 复制代码
// 上传图片占位区域样式----------------------------------------
[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

html 复制代码
<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>
相关推荐
百花~25 分钟前
前端三剑客之一 HTML~
前端·html
lang201509281 小时前
Spring远程调用与Web服务全解析
java·前端·spring
listhi5203 小时前
利用React Hooks简化状态管理
前端·javascript·react.js
一点一木3 小时前
🚀 2025 年 10 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
华仔啊3 小时前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
非凡ghost4 小时前
Adobe Lightroom安卓版(手机调色软件)绿色版
前端·windows·adobe·智能手机·软件需求
BestAns4 小时前
Postman 平替?这款轻量接口测试工具,本地运行 + 批量回归超实用!
前端
专注前端30年5 小时前
Webpack进阶玩法全解析(性能优化+高级配置)
前端·webpack·性能优化
烛阴5 小时前
Lua世界的基石:变量、作用域与七大数据类型
前端·lua
张拭心5 小时前
“不卷 AI、不碰币、下班不收消息”——Android 知名技术大牛 Jake Wharton 的求职价值观
android·前端·aigc