📝: 更新文档

2022-07-06 22:24:25 +08:00
parent f3b2d137b3
commit b4e67b46c6
13 changed files with 459 additions and 201 deletions
--- a/package/layer/src/component/Notifiy.vue
+++ b/package/layer/src/component/Notifiy.vue
@@ -51,10 +51,7 @@ onMounted(() => {
      setTimeout(() => {
        //此处延迟加载class，以免影响弹出效果
        // @ts-ignore
-        addClass(
-          notifyRef.value.parentElement?.parentElement,
-          "layui-layer-notify"
-        );
+        addClass(notifyRef.value.parentElement?.parentElement,"layui-layer-notify");
      }, 300);
    }
  });
--- a/package/layer/src/component/index.vue
+++ b/package/layer/src/component/index.vue
@@ -12,8 +12,35 @@ import CloseBtn from "./CloseBtn.vue";
 import Resize from "./Resize.vue";
 import Photos from "./Photos.vue";
 import Notifiy from "./Notifiy.vue";
-import { Ref, ref, watch, computed, useSlots, VNodeTypes, nextTick, inject } from "vue";
-import { nextId, maxArea, maxOffset, getArea, calculateArea, calculateOffset, calculateContent, calculateType, minArea, minOffset, updateMinArrays, getDrawerAnimationClass, calculateDrawerArea, calculatePhotosArea, calculateNotifOffset, removeNotifiyFromQueen, getNotifyAnimationClass } from "../utils";
+import {
+  Ref,
+  ref,
+  watch,
+  computed,
+  useSlots,
+  VNodeTypes,
+  nextTick,
+  inject,
+} from "vue";
+import {
+  nextId,
+  maxArea,
+  maxOffset,
+  getArea,
+  calculateArea,
+  calculateOffset,
+  calculateContent,
+  calculateType,
+  minArea,
+  minOffset,
+  updateMinArrays,
+  getDrawerAnimationClass,
+  calculateDrawerArea,
+  calculatePhotosArea,
+  calculateNotifOffset,
+  removeNotifiyFromQueen,
+  getNotifyAnimationClass,
+} from "../utils";
 import useResize from "../composable/useResize";
 import useMove from "../composable/useMove";
 import { zIndexKey } from "../tokens";
@@ -32,7 +59,21 @@ export interface LayModalProps {
  btn?: Record<string, Function>[] | false;
  move?: boolean | string;
  resize?: boolean | string;
-  type?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | "dialog" | "page" | "iframe" | "loading" | "drawer" | "photos" | "notifiy";
+  type?:
+    | 0
+    | 1
+    | 2
+    | 3
+    | 4
+    | 5
+    | 6
+    | "dialog"
+    | "page"
+    | "iframe"
+    | "loading"
+    | "drawer"
+    | "photos"
+    | "notifiy";
  content?: string | Function | object | VNodeTypes;
  isHtmlFragment?: boolean;
  shade?: boolean | string;
@@ -79,12 +120,12 @@ const props = withDefaults(defineProps<LayModalProps>(), {
  resize: false,
  isHtmlFragment: false,
  isOutAnim: true,
-  destroy: () => { },
-  success: () => { },
-  end: () => { },
-  full: () => { },
-  min: () => { },
-  restore: () => { },
+  destroy: () => {},
+  success: () => {},
+  end: () => {},
+  full: () => {},
+  min: () => {},
+  restore: () => {},
  yesText: "确定",
  isFunction: false,
  isMessage: false,
@@ -107,7 +148,7 @@ const offset: Ref<string[]> = ref(
  calculateOffset(props.offset, area.value, props.type)
 );
 const contentHeight = ref(
-  calculateContent(props.title,area.value[1], props.btn, type, props.isMessage)
+  calculateContent(props.title, area.value[1], props.btn, type, props.isMessage)
 );
 const index: Ref<number | Function> = ref(
  props.zIndex ?? inject(zIndexKey, 99999)
@@ -131,30 +172,30 @@ const _l: Ref<string> = ref(offset.value[1]);
 */
 const firstOpenDelayCalculation = function () {
  nextTick(async () => {
-      area.value = getArea(layero.value);
-      if (type == 4) {
-        area.value = calculateDrawerArea(props.offset, props.area);
-      }
-      if (type == 5) {
-        // @ts-ignore
-        area.value = await calculatePhotosArea(
-          props.imgList[props.startIndex].src,
-          props
-        );
-      }
-      offset.value = calculateOffset(props.offset, area.value, props.type);
-      if (type == 6) {
-        offset.value = calculateNotifOffset(props.offset, area.value, id.value);
-      }
-      w.value = area.value[0];
-      h.value = area.value[1];
-      _w.value = area.value[0];
-      _l.value = area.value[1];
-      t.value = offset.value[0];
-      l.value = offset.value[1];
-      _t.value = offset.value[0];
-      _l.value = offset.value[1];
-      supportMove();
+    area.value = getArea(layero.value);
+    if (type == 4) {
+      area.value = calculateDrawerArea(props.offset, props.area);
+    }
+    if (type == 5) {
+      // @ts-ignore
+      area.value = await calculatePhotosArea(
+        props.imgList[props.startIndex].src,
+        props
+      );
+    }
+    offset.value = calculateOffset(props.offset, area.value, props.type);
+    if (type == 6) {
+      offset.value = calculateNotifOffset(props.offset, area.value, id.value);
+    }
+    w.value = area.value[0];
+    h.value = area.value[1];
+    _w.value = area.value[0];
+    _l.value = area.value[1];
+    t.value = offset.value[0];
+    l.value = offset.value[1];
+    _t.value = offset.value[0];
+    _l.value = offset.value[1];
+    supportMove();
  });
 };

@@ -555,15 +596,33 @@ defineExpose({ reset, open, close });
 <template>
  <div>
    <!-- 遮盖层 -->
-    <Shade :index="index" :visible="shadeVisible" :opacity="shadeOpacity" @shadeClick="shadeHandle"></Shade>
+    <Shade
+      :index="index"
+      :visible="shadeVisible"
+      :opacity="shadeOpacity"
+      @shadeClick="shadeHandle"
+    ></Shade>
    <!-- 动画容器 -->
-    <transition :enter-active-class="enterActiveClass" :leave-active-class="leaveActiveClass">
+    <transition
+      :enter-active-class="enterActiveClass"
+      :leave-active-class="leaveActiveClass"
+    >
      <!-- 弹出层 -->
-      <div ref="layero" class="layui-layer layui-layer-border" :class="boxClasses" :style="styles" v-if="visible">
+      <div
+        ref="layero"
+        class="layui-layer layui-layer-border"
+        :class="boxClasses"
+        :style="styles"
+        v-if="visible"
+      >
        <!-- 标题 -->
        <Title v-if="showTitle" :title="title"></Title>
        <!-- 内容 -->
-        <div class="layui-layer-content" :style="{ height: contentHeight }" :class="contentClasses">
+        <div
+          class="layui-layer-content"
+          :style="{ height: contentHeight }"
+          :class="contentClasses"
+        >
          <template v-if="type === 0 || type === 1 || type === 4">
            <i v-if="icon" :class="iconClass"></i>
            <slot v-if="slots.default"></slot>
@@ -575,28 +634,59 @@ defineExpose({ reset, open, close });
            </template>
          </template>
          <Iframe v-if="type === 2" :src="props.content"></Iframe>
-          <Photos v-if="type === 5" :imgList="props.imgList" :startIndex="props.startIndex"
-            @resetCalculationPohtosArea="resetCalculationPohtosArea"></Photos>
-          <Notifiy v-if="type === 6" @close="closeHandle" :title="props.title" :content="props.content"
-            :isHtmlFragment="props.isHtmlFragment" :icon="props.icon" :iconClass="iconClass"></Notifiy>
+          <Photos
+            v-if="type === 5"
+            :imgList="props.imgList"
+            :startIndex="props.startIndex"
+            @resetCalculationPohtosArea="resetCalculationPohtosArea"
+          ></Photos>
+          <Notifiy
+            v-if="type === 6"
+            @close="closeHandle"
+            :title="props.title"
+            :content="props.content"
+            :isHtmlFragment="props.isHtmlFragment"
+            :icon="props.icon"
+            :iconClass="iconClass"
+          ></Notifiy>
        </div>
        <!-- 工具栏 -->
-        <span class="layui-layer-setwin" v-if="type != 3 && type != 5 && type != 6">
-          <a v-if="maxmin && !max" class="layui-layer-min" :class="[min ? 'layui-layer-ico layui-layer-maxmin' : '']"
-            href="javascript:;" @click="minHandle">
+        <span
+          class="layui-layer-setwin"
+          v-if="type != 3 && type != 5 && type != 6"
+        >
+          <a
+            v-if="maxmin && !max"
+            class="layui-layer-min"
+            :class="[min ? 'layui-layer-ico layui-layer-maxmin' : '']"
+            href="javascript:;"
+            @click="minHandle"
+          >
            <cite v-if="!min"></cite>
          </a>
-          <a v-if="maxmin && !min" class="layui-layer-ico layui-layer-max" :class="[max ? 'layui-layer-maxmin' : '']"
-            href="javascript:;" @click="maxHandle"></a>
-          <CloseBtn v-if="closeBtn != false" :close-btn="closeBtn" @closeHandle="closeHandle" ></CloseBtn>
+          <a
+            v-if="maxmin && !min"
+            class="layui-layer-ico layui-layer-max"
+            :class="[max ? 'layui-layer-maxmin' : '']"
+            href="javascript:;"
+            @click="maxHandle"
+          ></a>
+          <CloseBtn
+            v-if="closeBtn != false"
+            :close-btn="closeBtn"
+            @closeHandle="closeHandle"
+          ></CloseBtn>
        </span>
        <!-- 操作栏 -->
-        <div v-if="((btn && btn.length > 0) || type === 0) && !isMessage" class="layui-layer-btn"
-          :class="[`layui-layer-btn-${btnAlign}`]">
+        <div
+          v-if="((btn && btn.length > 0) || type === 0) && !isMessage"
+          class="layui-layer-btn"
+          :class="[`layui-layer-btn-${btnAlign}`]"
+        >
          <template v-if="btn && btn.length > 0">
            <template v-for="(b, index) in btn" :key="index">
              <a :class="[`layui-layer-btn${index}`]" @click="b.callback(id)">{{
-                  b.text
+                b.text
              }}</a>
            </template>
          </template>
--- a/package/layer/src/utils/index.ts
+++ b/package/layer/src/utils/index.ts
@@ -144,21 +144,21 @@ export function calculateContent(
  }
  if (btn && btn.length > 0) {
    if (type == 0) {
-      if(title) {
+      if (title) {
        return "calc(" + height + " - 137px)";
      } else {
        return "calc(" + height + " - 86px)";
      }
    }
    if (type == 1) {
-      if(title) {
+      if (title) {
        return "calc(" + height + " - 102px)";
      } else {
        return "calc(" + height + " - 51px)";
      }
    }
    if (type == 2) {
-      if(title) {
+      if (title) {
        return "calc(" + height + " - 102px)";
      } else {
        return "calc(" + height + " - 51px)";
@@ -166,21 +166,21 @@ export function calculateContent(
    }
  } else {
    if (type == 0) {
-      if(title) {
+      if (title) {
        return isMessage ? height : "calc(" + height + " - 137px)";
      } else {
        return isMessage ? height : "calc(" + height + " - 86px)";
      }
    }
    if (type == 1) {
-      if(title) {
+      if (title) {
        return "calc(" + height + " - 51px)";
      } else {
        return "calc(" + height + " - 0px)";
      }
    }
    if (type == 2) {
-      if(title) {
+      if (title) {
        return "calc(" + height + " - 51px)";
      } else {
        return "calc(" + height + " - 0px)";