perf(layer): 新增 遮盖层

docs/docs/zh-CN/components/layer.md

@@ -145,7 +145,7 @@ export default {
 
 <template>
   <lay-button @click="changeVisible5" type="primary">远程窗体</lay-button>
-  <lay-layer title="亦是此间少年" width="500px" height="400px" v-model:visible="visible5" move="true" :type="type5" content="http://www.pearadmin.com"></lay-layer>
+  <lay-layer title="亦是此间少年" width="500px" height="400px" maxmin="true" v-model:visible="visible5" move="true" :type="type5" content="http://www.pearadmin.com"></lay-layer>
 </template>
 
 <script>
@@ -211,6 +211,41 @@ export default {
 
 :::
 
+::: title 开启遮盖
+:::
+
+::: demo
+
+<template>
+  <lay-button @click="changeVisible7" type="primary">开启遮盖</lay-button>
+  <lay-layer title="身如不系之舟" move="true" shade="true" v-model:visible="visible7">
+    <div style="padding: 20px;">
+        忘了是怎么开始, 也许就是对你
+    </div>
+  </lay-layer>
+</template>
+
+<script>
+import { ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+export default {
+  setup() {
+
+    const visible7 = ref(false)
+
+    const changeVisible7 = function() {
+        visible7.value = !visible7.value
+    }
+
+    return {
+        visible7
+    };
+  },
+};
+</script>
+
+:::
+
 ::: title 弹层属性
 :::
 
@@ -224,3 +259,5 @@ export default {
 | height          | 高            | --      |
 | v-model:visible | 展示 隐藏     | false   |
 | content         | 内容          | --      |
+| shade           | 开启遮盖          | --      |
+| shadeClose      | 遮盖点击关闭          | --      |

docs/docs/zh-CN/guide/changelog.md

@@ -14,6 +14,7 @@
 [新增] useFullScreen 全屏 hooks。<br>
 [新增] useMove 拖拽 hooks。<br>
 [新增] textarea 文本域 blur foucs 获取焦点 失去焦点 事件。<br>
+[新增] layer 弹层。<br>
 </lay-timeline-item>
 <lay-timeline-item title="0.2.1">
 [新增] hooks 文档

src/css/layer.css

@@ -514,6 +514,7 @@ html #layuicss-layer {
   padding: 20px;
   line-height: 24px;
   word-break: break-all;
+  height: 100%;
   overflow: hidden;
   font-size: 14px;
   overflow-x: hidden;

src/hooks/useFullScreen.ts

@@ -4,7 +4,7 @@ const useFullScreen = () => {
   const isFullScreen = ref(false)
 
   const fullScreen = function () {
-    var docElm = document.documentElement
+    const docElm = document.documentElement
     switch (!isFullScreen.value) {
       case true:
         if (docElm.requestFullscreen) {

src/module/layer/index.vue

@@ -1,4 +1,12 @@
 <template>
+  <!-- 遮盖 -->
+  <div
+    class="layui-layer-shade"
+    style="z-index: 19891020; background-color: rgb(0, 0, 0); opacity: 0.1"
+    @click="shadeHandle"
+    v-if="visible && shade"
+  ></div>
+  <!-- 元素 -->
   <div
     v-if="visible"
     :id="id"
@@ -15,7 +23,7 @@
       {{ title }}
     </div>
     <div class="layui-layer-content">
-      <div :style="{ height: contentHeight }" v-if="type === 1">
+      <div v-if="type === 1" :style="{ height: contentHeight }">
         <slot v-if="slot.default"></slot>
         <template v-else>
           {{ content }}
@@ -39,10 +47,10 @@
         @click="minHandle"
         ><cite></cite></a
       ><a
+        v-if="maxmin"
         class="layui-layer-ico layui-layer-max"
         :class="[max ? 'layui-layer-maxmin' : '']"
         href="javascript:;"
-        v-if="maxmin"
         @click="maxHandle"
       ></a>
       <a
@@ -51,7 +59,7 @@
         @click="closeHandle"
       ></a
     ></span>
-    <div class="layui-layer-btn" v-if="btn && btn.length > 0">
+    <div v-if="btn && btn.length > 0" class="layui-layer-btn">
       <template v-for="(b, index) in btn" :key="index">
         <a :class="['layui-layer-btn' + index]" @click="b.callback">{{
           b.text
@@ -68,27 +76,17 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { onMounted, onUpdated, ref, useSlots } from 'vue'
+import { onMounted, onUpdated, ref, useSlots, watch } from 'vue'
 import useMove from '../../hooks/useMove'
 
 const slot = useSlots()
 
 onMounted(() => {
-  if (props.move) {
+  moveHandle()
-    const el = document.getElementById(props.id)
-    if (el != null) {
-      useMove(el)
-    }
-  }
 })
 
 onUpdated(() => {
-  if (props.move) {
+  moveHandle()
-    const el = document.getElementById(props.id)
-    if (el != null) {
-      useMove(el)
-    }
-  }
 })
 
 const props = withDefaults(
@@ -104,6 +102,8 @@ const props = withDefaults(
     move?: boolean
     type?: number
     content?: string
+    shade?: boolean
+    shadeClose?: boolean
   }>(),
   {
     id: 'layer',
@@ -116,6 +116,8 @@ const props = withDefaults(
     move: false,
     type: 1,
     btn: () => [],
+    shade: false,
+    shadeClose: true,
   }
 )
 
@@ -126,12 +128,28 @@ const height = ref(props.height)
 const max = ref(false)
 const contentHeight = ref(
   props.btn.length > 0
-    ? 'calc(' + props.height + ' - 100px)'
+    ? 'calc(' + height.value + ' - 100px)'
-    : 'calc(' + props.height + ' - 50px)'
+    : 'calc(' + height.value + ' - 50px)'
 )
 
 const emit = defineEmits(['close', 'update:visible'])
 
+const moveHandle = function () {
+  if (props.move) {
+    const el = document.getElementById(props.id)
+    if (el != null) {
+      useMove(el)
+    }
+  }
+}
+
+const shadeHandle = function () {
+  if (props.shadeClose) {
+    emit('close')
+    emit('update:visible', false)
+  }
+}
+
 const closeHandle = function () {
   emit('close')
   emit('update:visible', false)