perf: add createImgPreview func (#713)

src/components/Preview/index.ts

@@ -1 +1,2 @@
 export { default as ImagePreview } from './src/Preview.vue';
+export { createImgPreview } from './src/functional';

src/components/Preview/src/functional.ts

@@ -0,0 +1,22 @@
+import ImgPreview from './index';
+import { isClient } from '/@/utils/is';
+
+import type { Options, Props } from './types';
+
+import { createVNode, render } from 'vue';
+
+let instance: any = null;
+export function createImgPreview(options: Options) {
+  if (!isClient) return;
+  const { imageList, show = true, index = 0 } = options;
+
+  const propsData: Partial<Props> = {};
+  const container = document.createElement('div');
+  propsData.imageList = imageList;
+  propsData.show = show;
+  propsData.index = index;
+
+  instance = createVNode(ImgPreview, propsData);
+  render(instance, container);
+  document.body.appendChild(container);
+}

src/components/Preview/src/index.less

@@ -0,0 +1,118 @@
+.img-preview {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: @preview-comp-z-index;
+  background: rgba(0, 0, 0, 0.5);
+  user-select: none;
+
+  &-content {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    color: @white;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &-image {
+    cursor: pointer;
+    transition: transform 0.3s;
+  }
+
+  &__close {
+    position: absolute;
+    top: -40px;
+    right: -40px;
+    width: 80px;
+    height: 80px;
+    overflow: hidden;
+    color: @white;
+    cursor: pointer;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    transition: all 0.2s;
+
+    &-icon {
+      position: absolute;
+      top: 46px;
+      left: 16px;
+      font-size: 16px;
+    }
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.8);
+    }
+  }
+
+  &__index {
+    position: absolute;
+    bottom: 5%;
+    left: 50%;
+    padding: 0 22px;
+    font-size: 16px;
+    background: rgba(109, 109, 109, 0.6);
+    border-radius: 15px;
+    transform: translateX(-50%);
+  }
+
+  &__controller {
+    position: absolute;
+    bottom: 10%;
+    left: 50%;
+    display: flex;
+    width: 260px;
+    height: 44px;
+    padding: 0 22px;
+    margin-left: -139px;
+    background: rgba(109, 109, 109, 0.6);
+    border-radius: 22px;
+    justify-content: center;
+
+    &-item {
+      display: flex;
+      height: 100%;
+      padding: 0 9px;
+      font-size: 24px;
+      cursor: pointer;
+      transition: all 0.2s;
+
+      &:hover {
+        transform: scale(1.2);
+      }
+
+      img {
+        width: 1em;
+      }
+    }
+  }
+
+  &__arrow {
+    position: absolute;
+    top: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    font-size: 28px;
+    cursor: pointer;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    transition: all 0.2s;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.8);
+    }
+
+    &.left {
+      left: 50px;
+    }
+
+    &.right {
+      right: 50px;
+    }
+  }
+}