效果图
在components中创建一个组件UploadOpinionImg.vue
@charset "UTF-8"; .iconfont { font-family: 'iconfont' !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .center-con{ font-size: $font-mini; display: flex; flex-direction: column; } .icon-mn_shangchuantupian { &:before { content: url('@/static/images/gallery.png'); } } .sunui-uploader-img { display: block; } .sunui-uploader-input { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .sunui-uploader-inputbox { position: relative; // margin-bottom: 16rpx; box-sizing: border-box; background-color: #EEFBF9; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; border: 1px dashed #CDDFDB; } .sunui-img-removeicon { position: absolute; border-radius: 10rpx; color: #fff; width: 40upx; height: 40upx; line-height: 40upx; z-index: 2; text-align: center; background-color: #e54d42; &.right { top: 0; right: 0; } } .sunui-uploader-file { position: relative; margin-right: 32rpx !important; margin-bottom: 16rpx; } .sunui-uploader-file-status:before { content: ' '; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); } .sunui-loader-filecontent { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; z-index: 9; } .sunui-uploader-bd { padding: 26rpx; margin: 0; } .sunui-uploader-files { display: flex; flex-wrap: wrap; } .sunui-uploader-file:nth-child(4n + 0) { margin-right: 0; } .sunui-uploader-inputbox > view { text-align: center; } .sunui-uploader-file-status:after { content: ' '; position: absolute; top: 0; right: 0; bottom: 0; left: 0; // background-color: rgba(0, 0, 0, 0.5); } .sunui-uploader-hover { box-shadow: 0 0 0 #e5e5e5; background: #e5e5e5; }在main.js中引入 import UploadOpinionImg from '@/components/UploadOpinionImg.vue' Vue.component('upload-img', UploadOpinionImg) 在需要用的地方使用该组件
