✨(layer): 发布 1.4.0

2022-07-06 10:09:41 +08:00
parent dc56a071b7
commit 43c4ef2e47
12 changed files with 211 additions and 331 deletions
--- a/package/layer/src/component/CloseBtn.vue
+++ b/package/layer/src/component/CloseBtn.vue
@@ -7,6 +7,12 @@ export default {
 <script lang="ts" setup>
 import { computed, defineEmits } from "vue";

+export interface CloseBtnProps {
+  closeBtn?: number | string | boolean;
+}
+
+const props = defineProps<CloseBtnProps>();
+
 const emit = defineEmits(["closeHandle"]);

 const closeHandle = () => {
@@ -16,7 +22,7 @@ const closeHandle = () => {

 <template>
  <a
-    class="layui-layer-ico layui-layer-close layui-layer-close1"
+    :class="['layui-layer-ico layui-layer-close layui-layer-close' + closeBtn]"
    href="javascript:;"
    @click="closeHandle"
  ></a>
--- a/package/layer/src/component/index.vue
+++ b/package/layer/src/component/index.vue
@@ -12,37 +12,10 @@ 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 useMove from "../composable/useMove";
+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";

 export interface LayModalProps {
@@ -59,21 +32,7 @@ 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;
@@ -113,19 +72,19 @@ const props = withDefaults(defineProps<LayModalProps>(), {
  shade: true,
  shadeClose: true,
  shadeOpacity: "0.1",
-  closeBtn: true,
+  closeBtn: "1",
  btnAlign: "r",
  load: 0,
  anim: 0,
  resize: false,
  isHtmlFragment: false,
  isOutAnim: true,
-  destroy: () => {},
-  success: () => {},
-  end: () => {},
-  full: () => {},
-  min: () => {},
-  restore: () => {},
+  destroy: () => { },
+  success: () => { },
+  end: () => { },
+  full: () => { },
+  min: () => { },
+  restore: () => { },
  yesText: "确定",
  isFunction: false,
  isMessage: false,
@@ -148,7 +107,7 @@ const offset: Ref<string[]> = ref(
  calculateOffset(props.offset, area.value, props.type)
 );
 const contentHeight = ref(
-  calculateContent(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)
@@ -172,33 +131,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
-      );
-    }
-    if (props.isHtmlFragment && props.area === "auto") {
-      area.value = ["auto", "auto"];
-    }
-    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();
  });
 };

@@ -360,6 +316,7 @@ watch(
  () => h.value,
  () => {
    contentHeight.value = calculateContent(
+      props.title,
      h.value,
      props.btn,
      type,
@@ -423,31 +380,6 @@ const styles = computed<any>(() => {
    height: h.value,
    zIndex: index.value,
  };
-  if (props.isHtmlFragment && props.area === "auto") {
-    // @ts-ignore
-    style.maxWidth = "calc(100% - 2px)";
-    // @ts-ignore
-    style.maxHeight = "calc(100% - 51px)";
-    style.top = "50%";
-    style.left = "50%";
-    if (Array.isArray(offset.value)) {
-      if (offset.value[0].indexOf("px") > -1) {
-        style.top = offset.value[0];
-      }
-      if (offset.value[1].indexOf("px") > -1) {
-        style.left = offset.value[1];
-      }
-      if (
-        offset.value[0].indexOf("%") > -1 ||
-        offset.value[1].indexOf("%") > -1
-      ) {
-        // @ts-ignore
-        style.transform = `translate(-${
-          style.left.indexOf("%") > -1 ? style.left : 0
-        },-${style.top.indexOf("%") > -1 ? style.top : 0})`;
-      }
-    }
-  }
  return style;
 });

@@ -623,33 +555,15 @@ 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>
@@ -661,55 +575,28 @@ 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" @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
@@ -1,3 +1,4 @@
+import { title } from "process";
 import { layer } from "../index";

 // 随机数
@@ -132,6 +133,7 @@ export function calculateType(modalType: number | string) {
 // @param height 高度
 // @param btn 操作集合
 export function calculateContent(
+  title: any,
  height: any,
  btn: any,
  type: any,
@@ -141,24 +143,48 @@ export function calculateContent(
    height = "100%";
  }
  if (btn && btn.length > 0) {
-    if (type === 0) {
-      return "calc(" + height + " - 137px)";
+    if (type == 0) {
+      if(title) {
+        return "calc(" + height + " - 137px)";
+      } else {
+        return "calc(" + height + " - 86px)";
+      }
    }
-    if (type === 1) {
-      return "calc(" + height + " - 102px)";
+    if (type == 1) {
+      if(title) {
+        return "calc(" + height + " - 102px)";
+      } else {
+        return "calc(" + height + " - 51px)";
+      }
    }
-    if (type === 2) {
-      return "calc(" + height + " - 102px)";
+    if (type == 2) {
+      if(title) {
+        return "calc(" + height + " - 102px)";
+      } else {
+        return "calc(" + height + " - 51px)";
+      }
    }
  } else {
-    if (type === 0) {
-      return isMessage ? height : "calc(" + height + " - 137px)";
+    if (type == 0) {
+      if(title) {
+        return isMessage ? height : "calc(" + height + " - 137px)";
+      } else {
+        return isMessage ? height : "calc(" + height + " - 86px)";
+      }
    }
-    if (type === 1) {
-      return "calc(" + height + " - 51px)";
+    if (type == 1) {
+      if(title) {
+        return "calc(" + height + " - 51px)";
+      } else {
+        return "calc(" + height + " - 0px)";
+      }
    }
-    if (type === 2) {
-      return "calc(" + height + " - 51px)";
+    if (type == 2) {
+      if(title) {
+        return "calc(" + height + " - 51px)";
+      } else {
+        return "calc(" + height + " - 0px)";
+      }
    }
  }
 }
@@ -344,9 +370,7 @@ export function removeNotifiyFromQueen(layerId: string | undefined) {
  // 间隙
  let transOffsetTop = 15;
  // @ts-ignore 删除项的高度
-  let offsetHeight =
-    document.getElementById(layerId)?.firstElementChild?.firstElementChild
-      ?.offsetHeight;
+  let offsetHeight = document.getElementById(layerId)?.firstElementChild?.firstElementChild ?.offsetHeight;
  // @ts-ignore
  window.NotifiyQueen = window.NotifiyQueen || [];
  // @ts-ignore
@@ -366,14 +390,10 @@ export function removeNotifiyFromQueen(layerId: string | undefined) {
      ?.firstElementChild;
    if (offsetType === "rt" || offsetType === "lt") {
      // @ts-ignore
-      dom.style["top"] =
-        parseFloat(dom.style["top"]) - transOffsetTop - offsetHeight + "px";
+      dom.style["top"] = parseFloat(dom.style["top"]) - transOffsetTop - offsetHeight + "px";
    } else {
      // @ts-ignore
-      let bottom =
-        parseFloat(dom.style["top"].split(" - ")[1]) -
-        transOffsetTop -
-        offsetHeight;
+      let bottom = parseFloat(dom.style["top"].split(" - ")[1]) - transOffsetTop - offsetHeight;
      // @ts-ignore
      dom.style["top"] = "calc(100vh - " + bottom + "px)";
    }