上传图片添加tip

magic-boot-ui/src/components/magic/form/mb-upload-image.vue

@@ -57,6 +57,7 @@
         </el-upload>
       </template>
     </vuedraggable>
+    <div v-if="tip" class="el-upload__tip" :style="{ color: tipColor }">{{ tip }}</div>
     <mb-dialog ref="cropperDialog" @confirm-click="cropper">
       <template #content>
         <div class="cropper-content">
@@ -123,6 +124,14 @@ export default {
     height: {
       type: String,
       default: '100'
+    },
+    tip: {
+      type: String,
+      default: ''
+    },
+    tipColor: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -259,6 +268,7 @@ export default {
 .vue-draggable >>> .el-upload {
   width: 100%;
   height: 100%;
+  display: block;
 }
 </style>
 

magic-boot-ui/src/views/examples/upload-file.vue

@@ -5,7 +5,7 @@
     <h2>上传图片（id）</h2>
     <mb-upload-image :external-id="externalId" multiple :external-type="externalType" />
     <h2>上传图片（url、单图）</h2>
-    <mb-upload-image v-model="imgUrl" @change="imgChange" />
+    <mb-upload-image v-model="imgUrl" @change="imgChange" tip="建议上传尺寸：710*345" />
     <h2>上传图片（url、多图）</h2>
     <mb-upload-image v-model="multipleImgUrl" width="120" height="120" multiple :limit="3" @change="multipleImgChange" />
   </div>