添加按钮文字传参

src/components/Upload/index.vue

@@ -1,14 +1,14 @@
 <template>
-  <div>
+  <div class="upload">
     <el-upload v-if="hidden" :action="action" :headers="headers" :multiple="multiple" :data="data"
       :show-file-list="showFileList" :accept="accept" :list-type="listType" :on-progress="onProgress"
       :on-error="onError" :on-success="onSuccess" :before-upload="beforeUpload" :disabled="disabled">
-      <el-button v-if="listType === 'text'" :type="btnType">{{ title }}</el-button>
+      <el-button v-if="listType === 'text'" :type="btnType">{{ newTitle }}</el-button>
       <i v-else class="el-icon-plus" />
     </el-upload>
     <el-progress v-if="isShow()" type="circle" :percentage="percent" :status="isStatus" />
-    <div class="upload-image" v-if="img">
-      <el-image :src="img" />
+    <div class="upload-image" v-if="newUrl">
+      <el-image :src="newUrl" />
       <i v-if="disabled === false" class="el-icon-delete" @click="getDelete" />
     </div>
   </div>
@@ -39,11 +39,16 @@ export default {
     disabled: {
       type: Boolean,
       default: false
+    },
+    // 上传按钮文字
+    title: {
+      type: String,
+      default: '文件上传'
     }
   },
   watch: {
     url(val) {
-      this.img = val ? val : ''
+      this.newUrl = val ? val : ''
       this.hidden = val ? false : true
     }
   },
@@ -65,7 +70,7 @@ export default {
       // 是否显示上传按钮
       hidden: true,
       // 按钮文字
-      title: '上传文件',
+      newTitle: this.title,
       // 按钮颜色
       btnType: 'primary',
       // 进度条
@@ -73,13 +78,13 @@ export default {
       // 上传失败进度条
       isStatus: null,
       // 显示图片
-      img: '',
+      newUrl: this.url,
       // 传给父级的参数
       form: {}
     }
   },
   mounted() {
-    this.img = this.url ? this.url : ''
+    this.newUrl = this.url ? this.url : ''
     this.hidden = this.url ? false : true
   },
   methods: {
@@ -96,11 +101,11 @@ export default {
     // 上传过程中
     onProgress(e) {
       this.percent = parseInt(e.percent)
-      this.title = `已上传${parseInt(e.percent - 1)}%`
+      this.newTitle = `已上传${parseInt(e.percent - 1)}%`
     },
     // 上传失败
     onError() {
-      this.title = `上传失败`
+      this.newTitle = `上传失败`
       this.btnType = `danger`
       this.isStatus = 'exception'
     },
@@ -108,10 +113,10 @@ export default {
     onSuccess(res) {
       if (this.listType === 'picture-card') {
         // 显示图片
-        this.img = res.data
+        this.newUrl = res.data
       } else {
         // 按钮文字
-        this.title = '上传成功'
+        this.newTitle = '上传成功'
         this.btnType = 'success'
       }
 
@@ -125,7 +130,7 @@ export default {
       if (this.listType !== 'text') {
         this.hidden = true
         this.percent = 0
-        this.img = ''
+        this.newUrl = ''
       }
       this.$emit('upload', this.form = {})
     },
@@ -133,7 +138,7 @@ export default {
     // 是否显示图片进度条
     isShow() {
       if (this.listType !== 'text') {
-        return !this.hidden && this.img === '' ? true : false
+        return !this.hidden && this.newUrl === '' ? true : false
       } else {
         return false
       }
@@ -143,30 +148,38 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.upload-image {
-  position: relative;
-  width: 148px;
-  height: 148px;
+.upload {
+  display: inline-block;
 
-  .el-icon-delete {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 100%;
-    height: 100%;
-    transform: translate(-50%, -50%);
-    background: rgb(0 0 0 / 50%);
-    color: #fff;
-    transition: all 0.3s;
-    font-size: 24px;
-    text-align: center;
-    line-height: 148px;
-    opacity: 0;
+  .el-button{
+    margin: 0;
   }
 
-  i:hover {
-    opacity: 1;
-    cursor: pointer;
+  .upload-image {
+    position: relative;
+    width: 148px;
+    height: 148px;
+
+    .el-icon-delete {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 100%;
+      height: 100%;
+      transform: translate(-50%, -50%);
+      background: rgb(0 0 0 / 50%);
+      color: #fff;
+      transition: all 0.3s;
+      font-size: 24px;
+      text-align: center;
+      line-height: 148px;
+      opacity: 0;
+    }
+
+    i:hover {
+      opacity: 1;
+      cursor: pointer;
+    }
   }
 }
 </style>