Home Explore Help
Sign In
wangwei
/
ant-vue-admin
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

文件

wangwei 3 years ago
parent
f629812bbe
commit
952eac0f01
5 changed files with 35 additions and 8 deletions
Split View Show Diff Stats
  1. 1 0
      index.html
  2. 2 2
      src/App.vue
  3. 25 1
      src/views/general/attachment/customComponents/Image.vue
  4. 5 2
      src/views/general/config/customComponents/UploadFile.vue
  5. 2 3
      src/views/general/config/customComponents/UploadImage.vue

+ 1 - 0
index.html
View File 

@@ -10,6 +10,7 @@
 
     />
 
 
     <title><%= title %></title>
 
+    <link href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.css" rel="stylesheet">
 
     <link rel="icon" href="/src/assets/images/logo.png" />
 
   </head>
 
   <body>

+ 2 - 2
src/App.vue
View File 

@@ -30,8 +30,8 @@
 
   });
 
 </script>
 
 <style>
 
-/* base */
 
-  .dele-file .anticon {
 
+  /* base */
 
+  .ant-form-item-children .dele-file .anticon {
 
     position: relative;
 
     bottom: 8px;
 
   }

+ 25 - 1
src/views/general/attachment/customComponents/Image.vue
View File 

@@ -1,6 +1,14 @@
 
 <template>
 
   <div class="wrap">
 
-    <a-image class="image" :src="imgUrlPrefix + src" style="width: auto; height: 70px" />
 
+    <a-image
 
+      v-if="isAssetTypeAnImage(src)"
 
+      class="image"
 
+      :src="imgUrlPrefix + src"
 
+      style="width: auto; height: 70px"
 
+    />
 
+    <a v-if="!isAssetTypeAnImage(src)" :href="imgUrlPrefix + src"
 
+      ><i class="fa fa-file file-font" aria-hidden="true"></i
 
+    ></a>
 
   </div>
 
 </template>
 
 <script lang="ts">
 
@@ -17,7 +25,20 @@
 
     props,
 
     setup(props) {
 
       const { imgUrlPrefix } = useGlobSetting();
 
+
 
+      function isAssetTypeAnImage(filePath) {
 
+        //获取最后一个.的位置
 
+        const index = filePath.lastIndexOf('.');
 
+        //获取后缀
 
+        const ext = filePath.substr(index + 1);
 
+        return (
 
+          ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(
 
+            ext.toLowerCase()
 
+          ) !== -1
 
+        );
 
+      }
 
       return {
 
+        isAssetTypeAnImage,
 
         imgUrlPrefix,
 
         ...toRefs(props),
 
       };
 
@@ -34,4 +55,7 @@
 
     border: 1px solid #ddd;
 
     border-radius: 2px;
 
   }
 
+  .file-font {
 
+    font-size: 60px;
 
+  }
 
 </style>

+ 5 - 2
src/views/general/config/customComponents/UploadFile.vue
View File 

@@ -30,8 +30,8 @@
 
               v-if="!isAssetTypeAnImage(item)"
 
               :href="imgUrlPrefix + item"
 
               :download="getFilename(item)"
 
-              >{{ getFilename(item) }}</a
 
-            >
 
+              ><i class="fa fa-file file-font" aria-hidden="true"></i
 
+            ></a>
 
           </div>
 
           <div class="dele-file" @click="deleteFile(item, index)">
 
             <Icon icon="ri:delete-bin-5-fill" />
 
@@ -180,6 +180,9 @@
 
     border: 1px solid #ddd;
 
     border-radius: 2px;
 
   }
 
+  .file-font {
 
+    font-size: 60px;
 
+  }
 
 
   .dele-file {
 
     height: 20px;

+ 2 - 3
src/views/general/config/customComponents/UploadImage.vue
View File 

@@ -26,7 +26,7 @@
 
       <div v-for="(item, index) in file_list" :key="index">
 
         <div class="image-item" v-if="item !== ''">
 
           <div class="image-wrap"> <a-image width="70px" :src="imgUrlPrefix + item" /></div>
 
-          <div class="dele-image" @click="deleteImage(item, index)">
 
+          <div class="dele-image" @click="deleteImage(index)">
 
             <Icon icon="ri:delete-bin-5-fill" />
 
           </div>
 
         </div>
 
@@ -77,13 +77,12 @@
 
         tipShow: false,
 
       });
 
       state.file_list = props.value.split(',');
 
-      function deleteImage(url, index) {
 
+      function deleteImage(index) {
 
         const arr = state.imageUrls.split(',');
 
         // arr.splice(
 
         //   arr.findIndex((item) => item === url),
 
         //   1
 
         // );
 
-        console.log(`url`, url);
 
         arr.splice(index, 1);
 
         state.imageUrls = arr.toString();
 
         emit('change', state.imageUrls);