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

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

@@ -136,6 +136,16 @@ $directions: rtl, ltr, ttb, btt;
     margin: 0;
   }
 
+  &__wrapper-reference {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    margin: 0;
+  }
+
   &__header {
     align-items: center;
     color: rgb(114, 118, 123);
@@ -198,6 +208,18 @@ $directions: rtl, ltr, ttb, btt;
   &.btt {
     bottom: 0;
   }
+
+  &.is-reference {
+    position: absolute;
+    &.ltr, &.rtl, &.ttb, &.btt {
+      height: auto;
+      width: auto;
+      top: auto;
+      bottom: auto;
+      left: auto;
+      right: auto;
+    }
+  }
 }
 
 .el-drawer__container {
@@ -208,6 +230,15 @@ $directions: rtl, ltr, ttb, btt;
   bottom: 0;
   height: 100%;
   width: 100%;
+
+  &.el-drawer__reference-mode {
+    position: absolute;
+    background-color: transparent;
+    pointer-events: none;
+    .el-drawer {
+      pointer-events: auto;
+    }
+  }
 }
 
 .el-drawer-fade-enter-active {

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.52',
   locale: locale.use,
   i18n: locale.i18n,
   install,
@@ -332,5 +334,6 @@ export default {
   AreaPicker,
   Trigger,
   LazyLoad,
-  Segmented
+  Segmented,
+  FilePreview
 };

package/types/drawer.d.ts

@@ -9,6 +9,13 @@ declare enum Direction {
     BTT = 'btt' // bottom to top
 }
 
+declare enum Placement {
+    TOP = 'top',
+    BOTTOM = 'bottom',
+    LEFT = 'left',
+    RIGHT = 'right'
+}
+
 interface DrawerSlots {
     /* Main Content Slots */
     default: VNode[];
@@ -59,5 +66,14 @@ export declare class ElDrawer extends ElementUIComponent {
     /* Flag attribute whi */
     wrapperClosable: boolean
 
+    /* Reference element for positioning, can be a CSS selector string or an HTMLElement or Vue component instance */
+    reference: string | HTMLElement | ElementUIComponent
+
+    /* Placement of the drawer relative to the reference element */
+    placement: Placement
+
+    /* Offset distance from the reference element in pixels */
+    offset: number
+
     $slots: DrawerSlots
 }

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
+}
+