updaate: 弹窗计划调整

src/views/pop/form.vue

@@ -39,7 +39,12 @@
                         <div class="file-list-item">
                           <el-image style="width: 70px; height: 70px" :src="fileData.imageUrl" fit="cover"></el-image>
                           <p class="info">
-                            {{ fileData.name }} <span class="file-size">({{ fileData.size | fileSize }}kb)</span>
+                            <el-tooltip v-if="showFileNameTip(fileData.name)" placement="top">
+                              <div style="max-width: 260px" slot="content">{{ fileData.name }}</div>
+                              <span class="file-name">{{ fileData.name }}</span>
+                            </el-tooltip>
+                            <span v-else>{{ fileData.name }}</span>
+                            <span class="file-size">({{ fileData.size | fileSize }}kb)</span>
                           </p>
                         </div>
                       </template>
@@ -543,6 +548,14 @@ export default {
         return pop.id == popId;
       });
     },
+    showFileNameTip(text) {
+      const span = document.createElement('span');
+      span.innerHTML = text;
+      document.body.appendChild(span);
+      const width = span.offsetWidth;
+      document.body.removeChild(span);
+      return width > 278;
+    },
     // 投放内容-图片 删除
     handleRemove(index, elIndex) {
       this.group.popupList[elIndex].fileList = [];
@@ -751,6 +764,14 @@ export default {
         color: #606266;
         line-height: 1;
         cursor: default;
+        .file-name {
+          display: inline-block;
+          width: 278px;
+          max-width: 278px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
         .file-size {
           margin-left: 4px;
           color: #909399;