_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"><divclass="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>
)
