22

src/views/components/common/documentView.vue

 <template>
-  <div>
-    <a-tag :color="enums.fileColor[getFileExtension(fileName).toLowerCase()]">{{ fileName }}</a-tag>
-    <a-button v-show="isOpen" shape="circle" size="small" icon="search" @click="FileView()" />
+  <div class="file_view">
+    <a-tag :color="enums.fileColor[getFileExtension(fileName).toLowerCase()]" class="file_name" :title=" fileName">{{ fileName }}</a-tag>
+    <a-button v-show="isOpen" shape="circle" size="small" icon="search" @click="FileView()" class="btn" />
     <a-modal v-model="visibleFileView" :title="'[' + fileName + '] 文件查看'" width="1000px" :dialog-style="{ top: '10%' }" :footer="null" destroyOnClose>
       <preview-file v-model="fileUrl" :fileName="fileName"></preview-file>
     </a-modal>
-    <a class="ant-dropdown-link" style="margin-left:6px" :href="fileUrl" :download="fileName">
+    <a class="ant-dropdown-link dlw" style="margin-left:6px" :href="fileUrl" :download="fileName">
       <a-icon type="download" />
     </a>
   </div>
@@ -64,3 +64,24 @@ export default {
   }
 };
 </script>
+<style scoped lang="less">
+.file_view {
+  position: relative;
+  .file_name {
+    max-width: calc(100% - 55px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline-block;
+    vertical-align: bottom;
+  }
+  // .btn {
+  //   position: absolute;
+  //   left: 26px;
+  // }
+  .dlw {
+    position: absolute;
+    right: 10px;
+  }
+}
+</style>