✨(layer): 发布 1.4.0

package/component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "1.2.6",
+  "version": "1.2.7-alpha.1",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",

package/document-layer/src/document/zh-CN/demo.md

@@ -124,8 +124,7 @@ const load4 = function() {
             <button @click="openMaxmin">缩小放大</button>
             <button @click="openResize">尺寸拉伸</button>
             <button @click="openIndex">设置层级</button>
-            <button @click="openAreaAuto">内容适应</button>
+            <button @click="openClose2">关闭主题</button>
-            <button @click="openAreaAuto2">内容适应2</button>
         </lay-col>
     </lay-row>
 </template>
@@ -165,7 +164,7 @@ const openIframe = function() {
         title: "标题",
         resize: true,
         area: ['500px','500px'],
-        content: "http://layui-vue.pearadmin.com"
+        content: "http://www.layui-vue.com"
     })
 }
 
@@ -210,28 +209,18 @@ const openResize = function() {
 const openIndex = function() {
     layer.open({
         type: 1,
-        title: "标题",
         zIndex: 999,
+        title: "标题",
         content: "设置层级"
     })
 }
 
-const openAreaAuto = function(){
+const openClose2 = function() {
     layer.open({
-        type:1,
+        type: 1,
-        title:"area:auto",
+        closeBtn: 2,
-        isHtmlFragment:true,
+        title: "其他关闭",
-        content:"<img src='https://chixian.oss-cn-hangzhou.aliyuncs.com/20210819230007_346ce.jpeg'/>"
+        content: "内容"
-    })
-}
-
-const openAreaAuto2 = function(){
-    layer.open({
-        type:1,
-        title:"area:auto",
-        offset:['10px','50%'],
-        isHtmlFragment:true,
-        content:"<img src='https://chixian.oss-cn-hangzhou.aliyuncs.com/20210819230007_346ce.jpeg'/>",
     })    
 }
 </script>
@@ -294,9 +283,9 @@ const openRight = function() {
 ::: demo 通过 layer.photos(options) 创建图片预览弹层, 参数`options`主要传入预览的图片链接。
 
 <template>
-    <button @click="signleImg">图片查看</button>
+   <button @click="signleImg">图片查看</button>
-    <button @click="signleImg2">图片标题</button>
+   <button @click="signleImg2">图片标题</button>
-    <button @click="groupImg">图片分组</button>
+   <button @click="groupImg">图片分组</button>
 </template>
 
 <script>
@@ -319,7 +308,6 @@ const groupImg = function() {
   })
 }
 </script>
-
 :::
 
 <fieldset class="layui-elem-field layui-field-title">
@@ -331,12 +319,10 @@ const groupImg = function() {
 <template>
   <lay-row :space="30" >
     <lay-col :span="24">
-      <button @click="baseNotifiy">基本使用</button>
+      <button @click="baseNotifiy">右上位置</button>
-      <button @click="baseNotifiyRB">右下</button>
+      <button @click="baseNotifiyRB">右下位置</button>
-      <button @click="baseNotifiyLT">左上</button>
+      <button @click="baseNotifiyLT">左上位置</button>
-      <button @click="baseNotifiyLB">左下</button>
+      <button @click="baseNotifiyLB">左下位置</button>
-      <button @click="baseNotifiyTime0">不主动关闭</button>
-      <button @click="baseNotifiyHtml">HTML解析</button>
     </lay-col>
     <lay-col :span="24">
       <button @click="NotifiySuccess">成功通知</button>
@@ -377,22 +363,6 @@ const baseNotifiyLB = function() {
       offset:'lb',
     })
 }
-const baseNotifiyTime0 = function() {
-    layer.notifiy({
-      title:"这是标题",
-      content:"不会主动关闭，请点击右上角关闭图标",
-      time:0
-    })
-}
-const baseNotifiyHtml = function() {
-    layer.notifiy({
-      title:"这是标题,有图片时请设置area参数",
-      isHtmlFragment:true,
-      content:"<img src='https://chixian.oss-cn-hangzhou.aliyuncs.com/20210819230007_346ce.jpeg'/>",
-      area:['330px','220px'],
-      time:3000
-    })
-}
 const NotifiySuccess=function(){
     layer.notifiy({
       title:"Success",

package/document-layer/src/document/zh-CN/help.md

@@ -0,0 +1,33 @@
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>选项</legend>
+</fieldset>
+
+我们提供了丰富的 `options` 配置, 你可以通过配置来满足对 layer 的定制化, 需要注意的是有些属性仅适用部分组件。
+
+| 属性 | 描述 | 类型 | 默认值 | 可选值 |
+| -- | -- | -- | -- | -- |
+| type | 类型 | string | `1` | `0` `1` `2` `3` `4` `5` |
+| title | 标题 | string boolean | `信息` | -- |
+| content | 内容 | string vnode | -- | -- |
+| v-model | 显示 | boolean | `false`  | `true` `false` |
+| offset | 位置 | string array | `['50%','50%']` | -- |
+| area | 尺寸 | string array | `auto`  | -- |
+| move | 拖拽 | boolean | `true` | `true` `false` |anim
+| maxmin | 缩放 | boolean | `false` | `true` `false` |
+| resize | 拉伸 | boolean | `false` | `true` `false` |
+| anim | 入场动画 | number | `0` | `0` - `6` |
+| isOutAnim | 出场动画 | boolean | `true` | `true` `false` |
+| btnAlign | 按钮位置 | string | `r` | `l` `c` `r` |
+| closeBtn | 关闭按钮 | boolean string | `1` | `false` `1` `2` |
+| time | 关闭时间 | number | `0` | -- |
+| shade | 遮盖层 | boolean | `true` | `true` `false` |
+| shadeClose | 遮盖层关闭 | boolean | `true` | `true` `false` |
+| shadeOpacity | 遮盖层透明度 | string | `0.1` | `0.1` - `1` |
+| isHtmlFragment | 解析 html 字符 | boolean | `false` | `true` `false` |
+| imgList | 图片数据数组 | array[{src:图片链接,alt:图片名字可选'}] | - | - |
+| startIndex | 图片初始浏览索引 | number | 0 | - |
+| full | 最大化回调 | function | - | - |
+| min | 最小化回调 | function | -  | - |
+| restore | 重置回调 | function | -  | - |
+| success | 打开回调 | function | -  | - |
+| end | 关闭回调 | function | -  | - |

package/document-layer/src/document/zh-CN/index.md

@@ -27,7 +27,7 @@ app.use(layer).mount('#app');
 
 因 layer-vue 可以独立使用，也可以在 layui-vue 中使用。所以请按照你的实际需求来选择。
 
-如果你想独立使用 layer-vue, 你需要通过 npm 安装。如果你使用的是 layui-vue, 那么你无需安装 layer-vue。 
+如果你想独立使用 layer-vue, 你需要通过 npm 安装。如果你使用的是 layui-vue, 那么你无需安装 layer-vue, 已内置。 
 
 <fieldset class="layui-elem-field layui-field-title">
     <legend>入门</legend>
@@ -69,82 +69,3 @@ const changeVisible = () => {
 }
 </script>
 ```
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>选项</legend>
-</fieldset>
-
-我们提供了丰富的 `options` 配置, 你可以通过配置来满足对 layer 的定制化, 需要注意的是有些属性仅适用部分组件。
-
-| 属性 | 描述 | 类型 | 默认值 | 可选值 |
-| -- | -- | -- | -- | -- |
-| type | 类型 | string | `1` | `0` `1` `2` `3` |
-| title | 标题 | string boolean | `信息` | -- |
-| content | 内容 | string vnode | -- | -- |
-| v-model | 显示 | boolean | `false`  | `true` `false` |
-| offset | 位置 | string array | `['50%','50%']` | -- |
-| area | 尺寸 | string array | `auto`  | -- |
-| move | 拖拽 | boolean | `true` | `true` `false` |anim
-| maxmin | 缩放 | boolean | `false` | `true` `false` |
-| resize | 拉伸 | boolean | `false` | `true` `false` |
-| anim | 入场动画 | number | `0` | `0` - `6` |
-| isOutAnim | 出场动画 | boolean | `true` | `true` `false` |
-| btnAlign | 按钮位置 | string | `r` | `l` `c` `r` |
-| closeBtn | 关闭按钮 | boolean | `true` | `true` `false` |
-| time | 关闭时间 | number | `0` | -- |
-| shade | 遮盖层 | boolean | `true` | `true` `false` |
-| shadeClose | 遮盖层关闭 | boolean | `true` | `true` `false` |
-| shadeOpacity | 遮盖层透明度 | string | `0.1` | `0.1` - `1` |
-| isHtmlFragment | 解析 html 字符 | boolean | `false` | `true` `false` |
-| imgList | 图片数据数组 | array[{src:图片链接,alt:图片名字可选'}] | - | - |
-| startIndex | 图片初始浏览索引 | number | 0 | - |
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>动画</legend>
-</fieldset>
-
-anim：Number，默认：0
-
-我们的出场动画全部采用CSS3。这意味着除了ie6-9，其它所有浏览器都是支持的。目前anim可支持的动画类型有0-6 如果不想显示动画，设置 anim: -1 即可。
-
-另外需要注意的是，3.0之前的版本用的是 shift 参数。
-
-| 属性 | 描述 |
-| -- | -- | 
-| anim:0 | 平滑放大 | 
-| anim:1 | 从上掉落 | 
-| anim:2 | 从最底部往上滑入 | 
-| anim:3 | 从左滑入 | 
-| anim:4 | 从左翻滚 | 
-| anim:5 | 渐显 |
-| anim:5 | 抖动 |
-
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>问题</legend>
-</fieldset>
-
-直接调用 layer 的方法，组件会通过 Vue.render 动态创建新的 Vue 实体。其 context 与当前代码所在 context 并不相同，因而无法获取 context 信息。
-
-当你需要 context 信息（例如使用全局注册的组件）时，可以通过 appContext 属性传递当前组件 context, 当你需要保留属性响应式时，你可以使用函数返回:
-
-```
-import { getCurrentInstance, ref } from 'vue';
-import { layer } from "@layui/layer-vue";
-
-const appContext = getCurrentInstance().appContext;
-
-const title = ref("标题")
-
-layer.open({
-    title: () => title.value,
-    content: h("children"),
-    appContext: appContext
-})
-```
-
-<fieldset class="layui-elem-field layui-field-title">
-    <legend>结语</legend>
-</fieldset>
-
-::: demo 以写作为工具，为道途，先帮助自己一程，再以自己的领悟帮助他人一程, 这是一种服务 -- 庆山
-<template></template>
-<script setup></script>
-:::

package/document-layer/src/document/zh-CN/question.md

@@ -0,0 +1,22 @@
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>问题</legend>
+</fieldset>
+
+直接调用 layer 的方法，组件会通过 Vue.render 动态创建新的 Vue 实体。其 context 与当前代码所在 context 并不相同，因而无法获取 context 信息。
+
+当你需要 context 信息（例如使用全局注册的组件）时，可以通过 appContext 属性传递当前组件 context。
+
+```
+import { getCurrentInstance, ref } from 'vue';
+import { layer } from "@layui/layer-vue";
+
+const appContext = getCurrentInstance().appContext;
+
+const title = ref("标题")
+
+layer.open({
+    title: () => title.value,
+    content: h("children"),
+    appContext: appContext
+})
+```

package/document-layer/src/layouts/Layout.vue

@@ -3,25 +3,18 @@
     <div class="markdown-body light-scheme">
       <div class="alone-header">
         <img class="alone-logo" src="../assets/logo.png" />
-        <a
+        <a style="
-          style="
             position: absolute;
             right: 16%;
             line-height: 60px;
             color: white;
             font-size: 15px;
-          "
+          ">{{ version }}</a>
-          >{{ version }}</a
+        <a href="https://gitee.com/layui-vue/layer-vue" style="position: absolute; right: 10%; line-height: 75px">
-        >
-        <a
-          href="https://gitee.com/layui-vue/layer-vue"
-          style="position: absolute; right: 10%; line-height: 75px"
-        >
           <svg width="1.7em" height="1.7em" viewBox="0 0 24 24">
-            <path
+            <path fill="#fff"
-              fill="#fff"
+              d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z">
-              d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"
+            </path>
-            ></path>
           </svg>
         </a>
       </div>
@@ -37,9 +30,14 @@
           <lay-tab-item title="入门" id="/zh-CN/index"></lay-tab-item>
           <lay-tab-item title="示例" id="/zh-CN/demo"></lay-tab-item>
           <lay-tab-item title="帮助" id="/zh-CN/help"></lay-tab-item>
+          <lay-tab-item title="问题" id="/zh-CN/question"></lay-tab-item>
         </lay-tab>
         <router-view></router-view>
       </div>
+      <div class="footer footer-index">
+        <p>Released under the <a href="/index.html">MIT License</a>.</p>
+        <p>Copyright © 2021-2022 layui-vue.com</p>
+      </div>
     </div>
   </lay-scroll>
 </template>
@@ -104,12 +102,14 @@ body {
   border-bottom: none !important;
   letter-spacing: 3px;
 }
+
 .alone-banner p {
   padding-top: 40px;
   color: #e2e2e2;
   font-size: 14px;
   color: rgba(255, 255, 255, 0.8);
 }
+
 .alone-download {
   width: 77.5%;
   border-radius: 4px;
@@ -124,6 +124,10 @@ body {
   border-width: 1px 0 0;
 }
 
+.layui-container {
+  padding-bottom: 50px!important;
+}
+
 .layui-elem-field {
   padding: 0;
   margin-top: 10px;
@@ -135,4 +139,16 @@ body {
 .layui-tab-content {
   padding: 0 !important;
 }
+
+.footer {
+  width: 100%;
+  padding: 30px 0px;
+  line-height: 30px;
+  text-align: center;
+  border-top: 1px solid #eee;
+  color: rgba(60, 60, 60, 0.7);
+  font-weight: 300;
+  font-size: 13.6px;
+  background: #f9f9f9;
+}
 </style>

package/document-layer/src/router/zh-CN.ts

@@ -22,6 +22,11 @@ const zhCN = [
         component: () => import("../document/zh-CN/help.md"),
         meta: { title: "帮助" },
       },
+      {
+        path: "/zh-CN/question",
+        component: () => import("../document/zh-CN/question.md"),
+        meta: { title: "问题" },
+      },
     ],
   },
 ];

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>

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 {
+import { Ref, ref, watch, computed, useSlots, VNodeTypes, nextTick, inject } from "vue";
-  Ref,
+import { nextId, maxArea, maxOffset, getArea, calculateArea, calculateOffset, calculateContent, calculateType, minArea, minOffset, updateMinArrays, getDrawerAnimationClass, calculateDrawerArea, calculatePhotosArea, calculateNotifOffset, removeNotifiyFromQueen, getNotifyAnimationClass } from "../utils";
-  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 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?:
+  type?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | "dialog" | "page" | "iframe" | "loading" | "drawer" | "photos" | "notifiy";
-    | 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: () => {},
+  destroy: () => { },
-  success: () => {},
+  success: () => { },
-  end: () => {},
+  end: () => { },
-  full: () => {},
+  full: () => { },
-  min: () => {},
+  min: () => { },
-  restore: () => {},
+  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);
+      area.value = getArea(layero.value);
-    if (type == 4) {
+      if (type == 4) {
-      area.value = calculateDrawerArea(props.offset, props.area);
+        area.value = calculateDrawerArea(props.offset, props.area);
-    }
+      }
-    if (type == 5) {
+      if (type == 5) {
-      // @ts-ignore
+        // @ts-ignore
-      area.value = await calculatePhotosArea(
+        area.value = await calculatePhotosArea(
-        props.imgList[props.startIndex].src,
+          props.imgList[props.startIndex].src,
-        props
+          props
-      );
+        );
-    }
+      }
-    if (props.isHtmlFragment && props.area === "auto") {
+      offset.value = calculateOffset(props.offset, area.value, props.type);
-      area.value = ["auto", "auto"];
+      if (type == 6) {
-    }
+        offset.value = calculateNotifOffset(props.offset, area.value, id.value);
-    offset.value = calculateOffset(props.offset, area.value, props.type);
+      }
-    if (type == 6) {
+      w.value = area.value[0];
-      offset.value = calculateNotifOffset(props.offset, area.value, id.value);
+      h.value = area.value[1];
-    }
+      _w.value = area.value[0];
-    w.value = area.value[0];
+      _l.value = area.value[1];
-    h.value = area.value[1];
+      t.value = offset.value[0];
-    _w.value = area.value[0];
+      l.value = offset.value[1];
-    _l.value = area.value[1];
+      _t.value = offset.value[0];
-    t.value = offset.value[0];
+      _l.value = offset.value[1];
-    l.value = offset.value[1];
+      supportMove();
-    _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
+    <Shade :index="index" :visible="shadeVisible" :opacity="shadeOpacity" @shadeClick="shadeHandle"></Shade>
-      :index="index"
-      :visible="shadeVisible"
-      :opacity="shadeOpacity"
-      @shadeClick="shadeHandle"
-    ></Shade>
     <!-- 动画容器 -->
-    <transition
+    <transition :enter-active-class="enterActiveClass" :leave-active-class="leaveActiveClass">
-      :enter-active-class="enterActiveClass"
-      :leave-active-class="leaveActiveClass"
-    >
       <!-- 弹出层 -->
-      <div
+      <div ref="layero" class="layui-layer layui-layer-border" :class="boxClasses" :style="styles" v-if="visible">
-        ref="layero"
-        class="layui-layer layui-layer-border"
-        :class="boxClasses"
-        :style="styles"
-        v-if="visible"
-      >
         <!-- 标题 -->
         <Title v-if="showTitle" :title="title"></Title>
         <!-- 内容 -->
-        <div
+        <div class="layui-layer-content" :style="{ height: contentHeight }" :class="contentClasses">
-          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
+          <Photos v-if="type === 5" :imgList="props.imgList" :startIndex="props.startIndex"
-            v-if="type === 5"
+            @resetCalculationPohtosArea="resetCalculationPohtosArea"></Photos>
-            :imgList="props.imgList"
+          <Notifiy v-if="type === 6" @close="closeHandle" :title="props.title" :content="props.content"
-            :startIndex="props.startIndex"
+            :isHtmlFragment="props.isHtmlFragment" :icon="props.icon" :iconClass="iconClass"></Notifiy>
-            @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
+        <span class="layui-layer-setwin" v-if="type != 3 && type != 5 && type != 6">
-          class="layui-layer-setwin"
+          <a v-if="maxmin && !max" class="layui-layer-min" :class="[min ? 'layui-layer-ico layui-layer-maxmin' : '']"
-          v-if="type != 3 && type != 5 && type != 6"
+            href="javascript:;" @click="minHandle">
-        >
-          <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
+          <a v-if="maxmin && !min" class="layui-layer-ico layui-layer-max" :class="[max ? 'layui-layer-maxmin' : '']"
-            v-if="maxmin && !min"
+            href="javascript:;" @click="maxHandle"></a>
-            class="layui-layer-ico layui-layer-max"
+          <CloseBtn v-if="closeBtn != false" :close-btn="closeBtn" @closeHandle="closeHandle" ></CloseBtn>
-            :class="[max ? 'layui-layer-maxmin' : '']"
-            href="javascript:;"
-            @click="maxHandle"
-          ></a>
-          <CloseBtn v-if="closeBtn" @closeHandle="closeHandle"></CloseBtn>
         </span>
         <!-- 操作栏 -->
-        <div
+        <div v-if="((btn && btn.length > 0) || type === 0) && !isMessage" class="layui-layer-btn"
-          v-if="((btn && btn.length > 0) || type === 0) && !isMessage"
+          :class="[`layui-layer-btn-${btnAlign}`]">
-          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>

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) {
+    if (type == 0) {
-      return "calc(" + height + " - 137px)";
+      if(title) {
+        return "calc(" + height + " - 137px)";
+      } else {
+        return "calc(" + height + " - 86px)";
+      }
     }
-    if (type === 1) {
+    if (type == 1) {
-      return "calc(" + height + " - 102px)";
+      if(title) {
+        return "calc(" + height + " - 102px)";
+      } else {
+        return "calc(" + height + " - 51px)";
+      }
     }
-    if (type === 2) {
+    if (type == 2) {
-      return "calc(" + height + " - 102px)";
+      if(title) {
+        return "calc(" + height + " - 102px)";
+      } else {
+        return "calc(" + height + " - 51px)";
+      }
     }
   } else {
-    if (type === 0) {
+    if (type == 0) {
-      return isMessage ? height : "calc(" + height + " - 137px)";
+      if(title) {
+        return isMessage ? height : "calc(" + height + " - 137px)";
+      } else {
+        return isMessage ? height : "calc(" + height + " - 86px)";
+      }
     }
-    if (type === 1) {
+    if (type == 1) {
-      return "calc(" + height + " - 51px)";
+      if(title) {
+        return "calc(" + height + " - 51px)";
+      } else {
+        return "calc(" + height + " - 0px)";
+      }
     }
-    if (type === 2) {
+    if (type == 2) {
-      return "calc(" + height + " - 51px)";
+      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 =
+  let offsetHeight = document.getElementById(layerId)?.firstElementChild?.firstElementChild ?.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"] =
+      dom.style["top"] = parseFloat(dom.style["top"]) - transOffsetTop - offsetHeight + "px";
-        parseFloat(dom.style["top"]) - transOffsetTop - offsetHeight + "px";
     } else {
       // @ts-ignore
-      let bottom =
+      let bottom = parseFloat(dom.style["top"].split(" - ")[1]) - transOffsetTop - offsetHeight;
-        parseFloat(dom.style["top"].split(" - ")[1]) -
-        transOffsetTop -
-        offsetHeight;
       // @ts-ignore
       dom.style["top"] = "calc(100vh - " + bottom + "px)";
     }