@liuzengwei/element-ui 2.15.5-xn.50 → 2.15.5-xn.51

package/packages/theme-chalk/src/file-preview.scss

@@ -0,0 +1,138 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(file-preview) {
+  @include e(list) {
+    display: flex;
+    flex-wrap: wrap;
+    margin: -4px;
+  }
+
+  @include e(item) {
+    width: 80px;
+    height: 80px;
+    margin: 4px;
+    border-radius: $--border-radius-base;
+    cursor: pointer;
+    flex-shrink: 0;
+    position: relative;
+    overflow: hidden;
+
+    @include m(image) {
+      .el-image {
+        width: 100%;
+        height: 100%;
+        border-radius: $--border-radius-base;
+      }
+    }
+
+    @include m(video) {
+      .el-image {
+        width: 100%;
+        height: 100%;
+        border-radius: $--border-radius-base;
+      }
+    }
+
+    @include m(file) {
+      border: 1px solid $--border-color-base;
+      box-sizing: border-box;
+      padding: 8px 6px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: $--color-text-secondary;
+      transition: all 0.3s;
+
+      &:hover {
+        border-color: $--color-primary;
+        box-shadow: 0 2px 8px rgba($--color-primary, 0.2);
+      }
+    }
+  }
+
+  @include e(image) {
+    width: 100%;
+    height: 100%;
+  }
+
+  @include e(error) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background-color: $--background-color-base;
+    color: $--color-text-placeholder;
+    font-size: 24px;
+  }
+
+  @include e(play-icon) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 40px;
+    height: 40px;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 20px;
+    pointer-events: none;
+    transition: all 0.3s;
+
+    .el-file-preview__item:hover & {
+      background-color: rgba(0, 0, 0, 0.7);
+      transform: translate(-50%, -50%) scale(1.1);
+    }
+  }
+
+  @include e(icon) {
+    width: 40px;
+    height: 40px;
+    object-fit: contain;
+    flex-shrink: 0;
+  }
+
+  @include e(name) {
+    width: 100%;
+    margin: 6px 0 0;
+    padding: 0;
+    font-size: $--font-size-extra-small;
+    line-height: 1.4;
+    word-break: break-all;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    text-align: center;
+    color: inherit;
+}
+
+@include e(name-main) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+  }
+
+  @include e(name-ext) {
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+
+  @include e(video-wrapper) {
+    width: 100%;
+  }
+
+  @include e(video) {
+    width: 100%;
+    max-height: 480px;
+    background-color: #000;
+  }
+}
+

package/packages/theme-chalk/src/icon.scss

@@ -1193,3 +1193,39 @@
 .el-icon-point:before {
   content: "\e654";
 }
+
+.el-icon-xianniu:before {
+  content: "\e630";
+}
+
+.el-icon-zip:before {
+  content: "\e62f";
+}
+
+.el-icon-image:before {
+  content: "\e62e";
+}
+
+.el-icon-pdf:before {
+  content: "\e628";
+}
+
+.el-icon-audio:before {
+  content: "\e62d";
+}
+
+.el-icon-ppt:before {
+  content: "\e62c";
+}
+
+.el-icon-video:before {
+  content: "\e62b";
+}
+
+.el-icon-word:before {
+  content: "\e62a";
+}
+
+.el-icon-excel:before {
+  content: "\e629";
+}

package/packages/theme-chalk/src/index.scss

@@ -94,3 +94,4 @@
 @import "./trigger.scss";
 @import "./lazy-load.scss";
 @import "./segmented.scss";
+@import "./file-preview.scss";

package/src/index.js

@@ -98,6 +98,7 @@ import AreaPicker from '../packages/area-picker/index.js';
 import Trigger from '../packages/trigger/index.js';
 import LazyLoad from '../packages/lazy-load/index.js';
 import Segmented from '../packages/segmented/index.js';
+import FilePreview from '../packages/file-preview/index.js';
 import locale from 'element-ui/src/locale';
 import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
 
@@ -195,6 +196,7 @@ const components = [
   Trigger,
   LazyLoad,
   Segmented,
+  FilePreview,
   CollapseTransition
 ];
 
@@ -230,7 +232,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '2.15.5-xn.50',
+  version: '2.15.5-xn.51',
   locale: locale.use,
   i18n: locale.i18n,
   install,
@@ -332,5 +334,6 @@ export default {
   AreaPicker,
   Trigger,
   LazyLoad,
-  Segmented
+  Segmented,
+  FilePreview
 };

package/types/element-ui.d.ts

@@ -4,6 +4,7 @@
 import { ElTrigger } from './trigger'
 import { ElLazyLoad } from './lazy-load'
 import { ElSegmented } from './segmented'
+import { ElFilePreview } from './file-preview'
 
 export class SelectableTag extends ElSelectableTag {}
 
@@ -18,3 +19,6 @@ export class LazyLoad extends ElLazyLoad {}
 
 /** Segmented Component */
 export class Segmented extends ElSegmented {}
+
+/** FilePreview Component */
+export class FilePreview extends ElFilePreview {}

package/types/file-preview.d.ts

@@ -0,0 +1,32 @@
+import { ElementUIComponent } from './component'
+
+/** 文件对象类型 */
+export interface FileItem {
+  /** 文件 URL */
+  url?: string
+  /** 文件名称 */
+  name?: string
+  [key: string]: any
+}
+
+/** FilePreview Component */
+export declare class ElFilePreview extends ElementUIComponent {
+  /** 文件列表 */
+  fileList: FileItem[] | string[]
+
+  /** URL 字段名 */
+  urlKey: string
+
+  /** 文件名字段名 */
+  nameKey: string
+
+  /** 是否启用图片预览 */
+  previewEnabled: boolean
+
+  /** 视频快照处理函数 */
+  videoSnapshotHandler: ((url: string) => string) | null
+
+  /** 视频对话框标题 */
+  videoDialogTitle: string
+}
+