feat(img-preview): add imgPreview componnt

Author: anncwb

package.json

@@ -26,11 +26,11 @@
     "lodash-es": "^4.17.15",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
-    "path-to-regexp": "^6.1.0",
+    "path-to-regexp": "^6.2.0",
     "qrcode": "^1.4.4",
     "vue": "^3.0.0",
-    "vue-i18n": "^9.0.0-beta.3",
-    "vue-router": "^4.0.0-beta.12",
+    "vue-i18n": "^9.0.0-beta.4",
+    "vue-router": "^4.0.0-beta.13",
     "vuex": "^4.0.0-beta.4",
     "vuex-module-decorators": "^1.0.1",
     "zxcvbn": "^4.4.2"
@@ -51,8 +51,8 @@
     "@types/rollup-plugin-visualizer": "^2.6.0",
     "@types/shelljs": "^0.8.8",
     "@types/zxcvbn": "^4.4.0",
-    "@typescript-eslint/eslint-plugin": "^4.2.0",
-    "@typescript-eslint/parser": "^4.2.0",
+    "@typescript-eslint/eslint-plugin": "^4.4.0",
+    "@typescript-eslint/parser": "^4.4.0",
     "@vue/compiler-sfc": "^3.0.0",
     "autoprefixer": "^9.8.6",
     "babel-plugin-import": "^1.13.0",
@@ -63,7 +63,7 @@
     "eslint": "^7.10.0",
     "eslint-config-prettier": "^6.12.0",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-vue": "^7.0.0-beta.4",
+    "eslint-plugin-vue": "^7.0.1",
     "fs-extra": "^9.0.1",
     "husky": "^4.3.0",
     "inquirer": "^7.3.3",

src/components/Drawer/src/index.less

@@ -1,5 +1,5 @@
 @import (reference) '../../../design/index.less';
-@header-height: 50px;
+@header-height: 40px;
 @footer-height: 60px;
 
 .basic-drawer {

src/components/Preview/src/index.tsx

@@ -1,6 +1,4 @@
-import { defineComponent, ref, unref, computed, reactive, watch } from 'vue';
-
-import { FadeTransition } from '/@/components/Transition/index';
+import { defineComponent, ref, unref, computed, reactive, watchEffect } from 'vue';
 
 import { basicProps } from './props';
 import { Props } from './types';
@@ -11,9 +9,9 @@ import { CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vu
 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 unScaleSvg from '/@/assets/svg/preview/unscale.svg';
 import loadingSvg from '/@/assets/images/loading.svg';
-import unrotateSvg from '/@/assets/svg/preview/unrotate.svg';
+import unRotateSvg from '/@/assets/svg/preview/unrotate.svg';
 enum StatueEnum {
   LOADING,
   DONE,
@@ -29,6 +27,7 @@ interface ImgState {
   status: StatueEnum;
   moveX: number;
   moveY: number;
+  show: boolean;
 }
 
 const prefixCls = 'img-preview';
@@ -46,7 +45,9 @@ export default defineComponent({
       currentIndex: 0,
       moveX: 0,
       moveY: 0,
+      show: props.show,
     });
+
     const wrapElRef = ref<HTMLDivElement | null>(null);
     const imgElRef = ref<HTMLImageElement | null>(null);
 
@@ -133,16 +134,15 @@ export default defineComponent({
     }
 
     // 关闭
-    function handleClose() {
-      const { instance } = props;
-      if (instance) {
-        instance.show = false;
-      }
+    function handleClose(e: MouseEvent) {
+      e && e.stopPropagation();
+      imgState.show = false;
       // 移除火狐浏览器下的鼠标滚动事件
       document.body.removeEventListener('DOMMouseScroll', scrollFunc);
       // 恢复火狐及Safari浏览器下的图片拖拽
       document.ondragstart = null;
     }
+
     // 图片复原
     function resume() {
       initState();
@@ -202,26 +202,15 @@ export default defineComponent({
       const { imageList } = props;
       return imageList.length > 1;
     });
-    watch(
-      () => props.show,
-      (show) => {
-        if (show) {
-          init();
-        }
-      },
-      {
-        immediate: true,
+
+    watchEffect(() => {
+      if (props.show) {
+        init();
       }
-    );
-    watch(
-      () => props.imageList,
-      () => {
+      if (props.imageList) {
         initState();
-      },
-      {
-        immediate: true,
       }
-    );
+    });
 
     const renderClose = () => {
       return (
@@ -247,7 +236,7 @@ export default defineComponent({
       return (
         <div class={`${prefixCls}__controller`}>
           <div class={`${prefixCls}__controller-item`} onClick={() => scaleFunc(-0.15)}>
-            <img src={unscaleSvg} />
+            <img src={unScaleSvg} />
           </div>
           <div class={`${prefixCls}__controller-item`} onClick={() => scaleFunc(0.15)}>
             <img src={scaleSvg} />
@@ -256,7 +245,7 @@ export default defineComponent({
             <img src={resumeSvg} />
           </div>
           <div class={`${prefixCls}__controller-item`} onClick={() => rotateFunc(-90)}>
-            <img src={unrotateSvg} />
+            <img src={unRotateSvg} />
           </div>
           <div class={`${prefixCls}__controller-item`} onClick={() => rotateFunc(90)}>
             <img src={rotateSvg} />
@@ -277,41 +266,32 @@ export default defineComponent({
     };
     return () => {
       return (
-        <FadeTransition>
-          {() =>
-            props.show && (
-              <div class={prefixCls} ref={wrapElRef} onMouseup={handleMouseUp}>
-                <div class={`${prefixCls}-content`}>
-                  <img
-                    width="32"
-                    src={loadingSvg}
-                    v-show={imgState.status === StatueEnum.LOADING}
-                    class={`${prefixCls}-image`}
-                  />
-                  <img
-                    v-show={imgState.status === StatueEnum.DONE}
-                    style={unref(getImageStyle)}
-                    class={`${prefixCls}-image`}
-                    ref={imgElRef}
-                    src={imgState.currentUrl}
-                    onMousedown={handleAddMoveListener}
-                  />
-                  <img
-                    width="32"
-                    src={loadingSvg}
-                    v-show={imgState.status === StatueEnum.LOADING}
-                    class={`${prefixCls}-image`}
-                  />
-                  {renderClose()}
-                  {renderIndex()}
-                  {renderController()}
-                  {renderArrow('left')}
-                  {renderArrow('right')}
-                </div>
-              </div>
-            )
-          }
-        </FadeTransition>
+        imgState.show && (
+          <div class={prefixCls} ref={wrapElRef} onMouseup={handleMouseUp}>
+            <div class={`${prefixCls}-content`}>
+              <img
+                width="32"
+                src={loadingSvg}
+                class={[
+                  `${prefixCls}-image`,
+                  imgState.status === StatueEnum.LOADING ? '' : 'hidden',
+                ]}
+              />
+              <img
+                style={unref(getImageStyle)}
+                class={[`${prefixCls}-image`, imgState.status === StatueEnum.DONE ? '' : 'hidden']}
+                ref={imgElRef}
+                src={imgState.currentUrl}
+                onMousedown={handleAddMoveListener}
+              />
+              {renderClose()}
+              {renderIndex()}
+              {renderController()}
+              {renderArrow('left')}
+              {renderArrow('right')}
+            </div>
+          </div>
+        )
       );
     };
   },

src/components/Preview/src/props.ts

@@ -1,14 +1,9 @@
 import { PropType } from 'vue';
-import { Props } from './types';
 export const basicProps = {
   show: {
     type: Boolean as PropType<boolean>,
     default: false,
   },
-  instance: {
-    type: Object as PropType<Props>,
-    default: null,
-  },
   imageList: {
     type: [Array] as PropType<string[]>,
     default: null,

src/router/menus/modules/demo/feat.ts

@@ -13,10 +13,10 @@ const menu: MenuModule = {
         path: '/context-menu',
         name: '右键菜单',
       },
-      // {
-      //   path: '/img-preview',
-      //   name: '图片预览',
-      // },
+      {
+        path: '/img-preview',
+        name: '图片预览',
+      },
       {
         path: '/i18n',
         name: '国际化',

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

@@ -4,6 +4,8 @@
     <div class="flex justify-center mt-4">
       <img :src="img" v-for="img in imgList" :key="img" class="mr-2" @click="handleClick(img)" />
     </div>
+    <Alert message="无预览图" type="info" />
+    <a-button @click="handlePreview" type="primary" class="mt-4">预览图片</a-button>
   </div>
 </template>
 <script lang="ts">
@@ -21,7 +23,11 @@
       function handleClick(img: string) {
         createImgPreview({ imageList: [img] });
       }
-      return { imgList, handleClick };
+
+      function handlePreview() {
+        createImgPreview({ imageList: imgList });
+      }
+      return { imgList, handleClick, handlePreview };
     },
   });
 </script>