feat(preview): added createImgPreview picture preview function

CHANGELOG.zh_CN.md

@@ -9,6 +9,7 @@
 - **CropperImage** `Cropper` 头像裁剪新增圆形裁剪功能
 - **CropperAvatar** 新增头像上传组件
 - **Drawer** `useDrawer`新增`closeDrawer`函数
+- **Preview** 新增`createImgPreview`图片预览函数
 
 ### 🐛 Bug Fixes
 

src/components/Form/src/components/ApiSelect.vue

@@ -26,7 +26,6 @@
   import { useRuleFormItem } from '/@/hooks/component/useFormItem';
   import { useAttrs } from '/@/hooks/core/useAttrs';
   import { get, omit } from 'lodash-es';
-
   import { LoadingOutlined } from '@ant-design/icons-vue';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { propTypes } from '/@/utils/propTypes';

src/components/Form/src/components/FormAction.vue

@@ -40,13 +40,11 @@
 <script lang="ts">
   import type { ColEx } from '../types/index';
   import type { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
-
   import { defineComponent, computed, PropType } from 'vue';
   import { Form, Col } from 'ant-design-vue';
   import { Button } from '/@/components/Button';
   import { BasicArrow } from '/@/components/Basic/index';
   import { useFormContext } from '../hooks/useFormContext';
-
   import { useI18n } from '/@/hooks/web/useI18n';
   import { propTypes } from '/@/utils/propTypes';
 

src/components/Form/src/components/FormItem.vue

@@ -4,17 +4,14 @@
   import type { FormSchema } from '../types/form';
   import type { ValidationRule } from 'ant-design-vue/lib/form/Form';
   import type { TableActionType } from '/@/components/Table';
-
   import { defineComponent, computed, unref, toRefs } from 'vue';
   import { Form, Col } from 'ant-design-vue';
   import { componentMap } from '../componentMap';
   import { BasicHelp } from '/@/components/Basic';
-
   import { isBoolean, isFunction, isNull } from '/@/utils/is';
   import { getSlot } from '/@/utils/helper/tsxHelper';
   import { createPlaceholderMessage, setComponentRuleType } from '../helper';
   import { upperFirst, cloneDeep } from 'lodash-es';
-
   import { useItemLabelWidth } from '../hooks/useLabelWidth';
   import { useI18n } from '/@/hooks/web/useI18n';
 
@@ -91,7 +88,6 @@
         if (isBoolean(dynamicDisabled)) {
           disabled = dynamicDisabled;
         }
-
         if (isFunction(dynamicDisabled)) {
           disabled = dynamicDisabled(unref(getValues));
         }
@@ -276,7 +272,6 @@
           : {
               default: () => renderComponentContent,
             };
-
         return <Comp {...compAttr}>{compSlot}</Comp>;
       }
 
@@ -317,7 +312,6 @@
         };
 
         const showSuffix = !!suffix;
-
         const getSuffix = isFunction(suffix) ? suffix(unref(getValues)) : suffix;
 
         return (
@@ -338,16 +332,18 @@
           </Form.Item>
         );
       }
+
       return () => {
         const { colProps = {}, colSlot, renderColContent, component } = props.schema;
-        if (!componentMap.has(component)) return null;
+        if (!componentMap.has(component)) {
+          return null;
+        }
 
         const { baseColProps = {} } = props.formProps;
-
         const realColProps = { ...baseColProps, ...colProps };
         const { isIfShow, isShow } = getShow();
-
         const values = unref(getValues);
+
         const getContent = () => {
           return colSlot
             ? getSlot(slots, colSlot, values)

src/components/Form/src/components/RadioButtonGroup.vue

 <!--
  * @Description:It is troublesome to implement radio button group in the form. So it is extracted independently as a separate component
 -->
-
 <template>
   <RadioGroup v-bind="attrs" v-model:value="state" button-style="solid">
     <template v-for="item in getOptions" :key="`${item.value}`">
@@ -17,6 +16,7 @@
   import { isString } from '/@/utils/is';
   import { useRuleFormItem } from '/@/hooks/component/useFormItem';
   import { useAttrs } from '/@/hooks/core/useAttrs';
+
   type OptionsItem = { label: string; value: string | number | boolean; disabled?: boolean };
   type RadioItem = string | OptionsItem;
 
@@ -39,6 +39,7 @@
       const attrs = useAttrs();
       // Embedded in the form, just use the hook binding to perform form verification
       const [state] = useRuleFormItem(props);
+
       // Processing options value
       const getOptions = computed((): OptionsItem[] => {
         const { options } = props;

src/components/Form/src/hooks/useAdvanced.ts

@@ -2,10 +2,8 @@ import type { ColEx } from '../types';
 import type { AdvanceState } from '../types/hooks';
 import type { ComputedRef, Ref } from 'vue';
 import type { FormProps, FormSchema } from '../types/form';
-
 import { computed, unref, watch } from 'vue';
 import { isBoolean, isFunction, isNumber, isObject } from '/@/utils/is';
-
 import { useBreakpoint } from '/@/hooks/event/useBreakpoint';
 import { useDebounceFn } from '@vueuse/core';
 

src/components/Form/src/hooks/useAutoFocus.ts

@@ -16,16 +16,22 @@ export async function useAutoFocus({
   isInitedDefault,
 }: UseAutoFocusContext) {
   watchEffect(async () => {
-    if (unref(isInitedDefault) || !unref(getProps).autoFocusFirstItem) return;
+    if (unref(isInitedDefault) || !unref(getProps).autoFocusFirstItem) {
+      return;
+    }
     await nextTick();
     const schemas = unref(getSchema);
     const formEl = unref(formElRef);
     const el = (formEl as any)?.$el as HTMLElement;
-    if (!formEl || !el || !schemas || schemas.length === 0) return;
+    if (!formEl || !el || !schemas || schemas.length === 0) {
+      return;
+    }
 
     const firstItem = schemas[0];
     // Only open when the first form item is input type
-    if (!firstItem.component.includes('Input')) return;
+    if (!firstItem.component.includes('Input')) {
+      return;
+    }
 
     const inputEl = el.querySelector('.ant-row:first-child input') as Nullable<HTMLInputElement>;
     if (!inputEl) return;

src/components/Form/src/hooks/useForm.ts

+import type { FormProps, FormActionType, UseFormReturnType, FormSchema } from '../types/form';
+import type { NamePath } from 'ant-design-vue/lib/form/interface';
+import type { DynamicProps } from '/#/utils';
 import { ref, onUnmounted, unref, nextTick, watch } from 'vue';
-
 import { isProdMode } from '/@/utils/env';
 import { error } from '/@/utils/log';
 import { getDynamicProps } from '/@/utils';
 
-import type { FormProps, FormActionType, UseFormReturnType, FormSchema } from '../types/form';
-import type { NamePath } from 'ant-design-vue/lib/form/interface';
-import type { DynamicProps } from '/#/utils';
-
 export declare type ValidateFields = (nameList?: NamePath[]) => Promise<Recordable>;
 
 type Props = Partial<DynamicProps<FormProps>>;

src/components/Form/src/hooks/useFormEvents.ts

 import type { ComputedRef, Ref } from 'vue';
 import type { FormProps, FormSchema, FormActionType } from '../types/form';
 import type { NamePath } from 'ant-design-vue/lib/form/interface';
-
 import { unref, toRaw } from 'vue';
-
 import { isArray, isFunction, isObject, isString } from '/@/utils/is';
 import { deepMerge } from '/@/utils';
 import { dateItemType, handleInputNumberValue } from '../helper';

src/components/Form/src/hooks/useFormValues.ts

 import { isArray, isFunction, isObject, isString, isNullOrUnDef } from '/@/utils/is';
 import { dateUtil } from '/@/utils/dateUtil';
-
 import { unref } from 'vue';
 import type { Ref, ComputedRef } from 'vue';
 import type { FormProps, FormSchema } from '../types/form';
-
 import { set } from 'lodash-es';
 
 interface UseFormValuesContext {

src/components/Form/src/types/form.ts

 import type { NamePath, RuleObject } from 'ant-design-vue/lib/form/interface';
 import type { VNode } from 'vue';
 import type { ButtonProps as AntdButtonProps } from 'ant-design-vue/es/button/buttonTypes';
-
 import type { FormItem } from './formItem';
 import type { ColEx, ComponentType } from './index';
 import type { TableActionType } from '/@/components/Table/src/types/table';

src/components/Form/src/types/index.ts

@@ -90,9 +90,7 @@ export type ComponentType =
   | 'InputCountDown'
   | 'Select'
   | 'ApiSelect'
-  | 'SelectOptGroup'
   | 'TreeSelect'
-  | 'Transfer'
   | 'RadioButtonGroup'
   | 'RadioGroup'
   | 'Checkbox'

src/components/Preview/src/index.tsx → src/components/Preview/src/Functional.vue

-import './index.less';
+<script lang="tsx">
+  import { defineComponent, ref, unref, computed, reactive, watchEffect } from 'vue';
+  import { Props } from './typing';
+  import { CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
+  import resumeSvg from '/@/assets/svg/preview/resume.svg';
+  import rotateSvg from '/@/assets/svg/preview/p-rotate.svg';
+  import scaleSvg from '/@/assets/svg/preview/scale.svg';
+  import unScaleSvg from '/@/assets/svg/preview/unscale.svg';
+  import unRotateSvg from '/@/assets/svg/preview/unrotate.svg';
 
-import { defineComponent, ref, unref, computed, reactive, watchEffect } from 'vue';
-
-// @ts-ignore
-import { basicProps } from './props';
-// @ts-ignore
-import { Props } from './types';
-
-import { CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
-// import { Spin } from 'ant-design-vue';
-
-import resumeSvg from '/@/assets/svg/preview/resume.svg';
-import rotateSvg from '/@/assets/svg/preview/p-rotate.svg';
-import scaleSvg from '/@/assets/svg/preview/scale.svg';
-import unScaleSvg from '/@/assets/svg/preview/unscale.svg';
-import unRotateSvg from '/@/assets/svg/preview/unrotate.svg';
-enum StatueEnum {
+  enum StatueEnum {
     LOADING,
     DONE,
     FAIL,
-}
-interface ImgState {
+  }
+  interface ImgState {
     currentUrl: string;
     imgScale: number;
     imgRotate: number;
@@ -31,12 +24,26 @@ interface ImgState {
     moveX: number;
     moveY: number;
     show: boolean;
-}
+  }
+  const props = {
+    show: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
+    imageList: {
+      type: [Array] as PropType<string[]>,
+      default: null,
+    },
+    index: {
+      type: Number as PropType<number>,
+      default: 0,
+    },
+  };
 
-const prefixCls = 'img-preview';
-export default defineComponent({
+  const prefixCls = 'img-preview';
+  export default defineComponent({
     name: 'ImagePreview',
-  props: basicProps,
+    props,
     setup(props: Props) {
       const imgState = reactive<ImgState>({
         currentUrl: '',
@@ -286,7 +293,10 @@ export default defineComponent({
                 {/*/>*/}
                 <img
                   style={unref(getImageStyle)}
-                class={[`${prefixCls}-image`, imgState.status === StatueEnum.DONE ? '' : 'hidden']}
+                  class={[
+                    `${prefixCls}-image`,
+                    imgState.status === StatueEnum.DONE ? '' : 'hidden',
+                  ]}
                   ref={imgElRef}
                   src={imgState.currentUrl}
                   onMousedown={handleAddMoveListener}
@@ -302,4 +312,125 @@ export default defineComponent({
         );
       };
     },
-});
+  });
+</script>
+<style lang="less">
+  .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;
+      }
+    }
+  }
+</style>

src/components/Preview/src/functional.ts

-import ImgPreview from './index';
+import type { Options, Props } from './typing';
+import ImgPreview from './Functional.vue';
 import { isClient } from '/@/utils/is';
-
-import type { Options, Props } from './types';
-
 import { createVNode, render } from 'vue';
 
-let instance: any = null;
+let instance: ReturnType<typeof createVNode> | null = null;
 export function createImgPreview(options: Options) {
   if (!isClient) return;
   const { imageList, show = true, index = 0 } = options;

src/components/Preview/src/index.less

-.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;
-    }
-  }
-}

src/components/Preview/src/props.ts

-import { PropType } from 'vue';
-export const basicProps = {
-  show: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
-  imageList: {
-    type: [Array] as PropType<string[]>,
-    default: null,
-  },
-  index: {
-    type: Number as PropType<number>,
-    default: 0,
-  },
-};

src/views/demo/feat/img-preview/index.vue

 <template>
   <PageWrapper title="图片预览示例">
-    <p @click="openImg">打开图片</p>
     <ImagePreview :imageList="imgList" />
+    <a-button @click="openImg" type="primary">无预览图</a-button>
   </PageWrapper>
 </template>
 <script lang="ts">