♻️(document): 重构文档结构

package/layer/src/component/Photos.vue

@@ -3,13 +3,27 @@
     <img :src="imgList[index].src" />
     <div class="layui-layer-imgsee" v-if="imgList.length > 0">
       <span class="layui-layer-imguide" v-if="imgList.length > 1">
-        <a href="javascript:;" class="layui-layer-iconext layui-layer-imgprev" @click="changeIndex(-1)"></a>
+        <a
-        <a href="javascript:;" class="layui-layer-iconext layui-layer-imgnext" @click="changeIndex(1)"></a>
+          href="javascript:;"
+          class="layui-layer-iconext layui-layer-imgprev"
+          @click="changeIndex(-1)"
+        ></a>
+        <a
+          href="javascript:;"
+          class="layui-layer-iconext layui-layer-imgnext"
+          @click="changeIndex(1)"
+        ></a>
       </span>
-      <div class="layui-layer-imgbar" style="display: block" v-if="imgList.length > 1 || imgList[index].alt">
+      <div
+        class="layui-layer-imgbar"
+        style="display: block"
+        v-if="imgList.length > 1 || imgList[index].alt"
+      >
         <span class="layui-layer-imgtit">
           <span v-if="imgList[index].alt">{{ imgList[index].alt }}</span>
-          <em v-if="imgList.length > 1">{{ index + 1 }} / {{ imgList.length }}</em>
+          <em v-if="imgList.length > 1"
+            >{{ index + 1 }} / {{ imgList.length }}</em
+          >
         </span>
       </div>
     </div>
@@ -24,7 +38,7 @@ export default {
 import { watch, ref } from "vue";
 
 export interface LayPhotoProps {
-  imgList: { src: string, alt: string }[];
+  imgList: { src: string; alt: string }[];
   startIndex: number;
 }
 const emit = defineEmits(["resetCalculationPohtosArea"]);
@@ -34,18 +48,18 @@ const props = withDefaults(defineProps<LayPhotoProps>(), {
 const index = ref(props.startIndex);
 watch(index, () => {
   //当图片索引改变的时候 重新计算弹层的大小
-  emit('resetCalculationPohtosArea', index.value)
+  emit("resetCalculationPohtosArea", index.value);
-})
+});
 
 const changeIndex = (step: number) => {
-  let nowIndex = index.value
+  let nowIndex = index.value;
-  let next = nowIndex + step
+  let next = nowIndex + step;
   if (next < 0) {
-    next = props.imgList.length - 1
+    next = props.imgList.length - 1;
   }
   if (next >= props.imgList.length) {
-    next = 0
+    next = 0;
   }
-  index.value = next
+  index.value = next;
-}
+};
 </script>

package/layer/src/component/index.vue

@@ -55,7 +55,17 @@ export interface LayModalProps {
   btn?: Record<string, Function>[] | false;
   move?: boolean | string;
   resize?: boolean | string;
-  type?: 0 | 1 | 2 | 3 | "dialog" | "page" | "iframe" | "loading" | "drawer" | "photos";
+  type?:
+    | 0
+    | 1
+    | 2
+    | 3
+    | "dialog"
+    | "page"
+    | "iframe"
+    | "loading"
+    | "drawer"
+    | "photos";
   content?: string | Function | object | VNodeTypes;
   isHtmlFragment?: boolean;
   shade?: boolean | string;

package/layer/src/index.ts

@@ -123,18 +123,18 @@ const layer = {
   },
   //图片预览
   photos: (option: any, callback?: Function) => {
-    if (typeof option === 'string') {
+    if (typeof option === "string") {
       option = {
-        imgList: [{ src: option }]
+        imgList: [{ src: option }],
-      }
+      };
     }
     let defaultOption = {
-      type: 'photos',
+      type: "photos",
       anim: 2,
       startIndex: 0,
       isOutAnim: true,
       shadeClose: true,
-      shadeOpacity: '0.7'
+      shadeOpacity: "0.7",
     };
     return layer.create(option, defaultOption, callback);
   },

package/layer/src/utils/index.ts

@@ -1,4 +1,4 @@
-import { layer } from  "../index"
+import { layer } from "../index";
 
 // 随机数
 export function nextId() {
@@ -255,32 +255,32 @@ export function loadImage(url: string, callback: Function, error: any) {
   };
 }
 
-export async function calculatePhotosArea(url: string,options:object) {
+export async function calculatePhotosArea(url: string, options: object) {
   let img = new Image();
   img.src = url;
 
   return new Promise((resolve, reject) => {
     if (img.complete) {
-      resolve(area(img))
+      resolve(area(img));
-      return
+      return;
     }
-    const layerId=layer.load(2)
+    const layerId = layer.load(2);
     img.onload = () => {
-      layer.close(layerId)
+      layer.close(layerId);
-      resolve(area(img))
+      resolve(area(img));
     };
     img.onerror = () => {
-      layer.close(layerId)
+      layer.close(layerId);
-      layer.msg('图片加载失败')
+      layer.msg("图片加载失败");
-      reject(false)
+      reject(false);
-    }
+    };
-  })
+  });
 
-  function area(img:{width:number,height:number}){
+  function area(img: { width: number; height: number }) {
     var imgarea = [img.width, img.height];
     var winarea = [window.innerWidth - 100, window.innerHeight - 100];
     //如果 实际图片的宽或者高比 屏幕大（那么进行缩放）
-    if ( imgarea[0] > winarea[0] || imgarea[1] > winarea[1]) {
+    if (imgarea[0] > winarea[0] || imgarea[1] > winarea[1]) {
       let wh = [imgarea[0] / winarea[0], imgarea[1] / winarea[1]]; //取宽度缩放比例、高度缩放比例
       if (wh[0] > wh[1]) {
         //取缩放比例最大的进行缩放
@@ -293,5 +293,4 @@ export async function calculatePhotosArea(url: string,options:object) {
     }
     return [imgarea[0] + "px", imgarea[1] + "px"];
   }
-
 }

package/layer/vite.config.ts

@@ -32,15 +32,11 @@ export default defineConfig({
       },
       plugins: [
         babel({
-          babelHelpers: 'runtime',
+          babelHelpers: "runtime",
           exclude: "node_modules/**",
           extensions: [".js", ".jsx", ".ts", ".tsx", ".vue"],
           presets: ["@babel/preset-env", "@babel/preset-typescript"],
-          plugins: [
+          plugins: [["@babel/plugin-transform-runtime"]],
-            [
-              '@babel/plugin-transform-runtime',
-            ],
-          ]
         }),
       ],
       external: ["vue"],