From 9808f9201f258e318765c27a5330b21c86c6128c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E4=BB=AA=E5=BC=8F?= <854085467@qq.com>
Date: Sun, 7 Nov 2021 23:59:53 +0800
Subject: [PATCH] =?UTF-8?q?perf(layer):=20=E6=96=B0=E5=A2=9E=20anim=20?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7,=20=E6=94=AF=E6=8C=81=207=20=E7=A7=8D?=
 =?UTF-8?q?=E5=85=A5=E5=9C=BA=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/docs/zh-CN/components/layer.md | 19 ++++++++++++++++---
 docs/docs/zh-CN/guide/changelog.md  |  1 +
 src/css/layer.css                   |  5 -----
 src/module/layer/index.vue          | 13 ++++++++-----
 src/tools/guidUtil.ts               | 25 +++++++++++++++++++------
 5 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/docs/docs/zh-CN/components/layer.md b/docs/docs/zh-CN/components/layer.md
index 586c59b8..5f27eb4e 100644
--- a/docs/docs/zh-CN/components/layer.md
+++ b/docs/docs/zh-CN/components/layer.md
@@ -6,7 +6,9 @@
 <template>
   <lay-button @click="changeVisible1" type="primary">基础使用</lay-button>
   <lay-layer title="基础使用" v-model:visible="visible1">
+    <div style="padding:10px">
     这是一个基础弹窗
+    </div>
   </lay-layer>
 </template>
 
@@ -39,7 +41,9 @@ export default {
 <template>
   <lay-button @click="changeVisible2" type="primary">允许拖动</lay-button>
   <lay-layer title="允许拖动" v-model:visible="visible2" move="true">
-    这是一个可以拖拽的弹窗
+    <div style="padding:10px">
+      这是一个可以拖拽的弹窗
+    </div>
   </lay-layer>
 </template>
 
@@ -72,7 +76,9 @@ export default {
 <template>
   <lay-button @click="changeVisible3" type="primary">放大缩小</lay-button>
   <lay-layer title="放大缩小" v-model:visible="visible3" move="true" maxmin="true">
+      <div style="padding:10px">
         该弹窗支持放大缩小
+      </div>
   </lay-layer>
 </template>
 
@@ -105,7 +111,9 @@ export default {
 <template>
   <lay-button @click="changeVisible4" type="primary">指定位置</lay-button>
   <lay-layer title="指定位置" v-model:visible="visible4" move="true" :offset="['100px','100px']">
-        指定弹窗显示的默认位置
+      <div style="padding:10px">
+      指定弹窗显示的默认位置
+      </div>
   </lay-layer>
 </template>
 
@@ -171,7 +179,9 @@ export default {
 <template>
   <lay-button @click="changeVisible6" type="primary">定义操作</lay-button>
   <lay-layer title="定义操作" v-model:visible="visible6" move="true" :btn="btn6">
+    <div style="padding:10px">
     定义一组弹窗操作按钮
+    </div>
   </lay-layer>
 </template>
 
@@ -209,7 +219,9 @@ export default {
 <template>
   <lay-button @click="changeVisible7" type="primary">开启遮盖</lay-button>
   <lay-layer title="开启遮盖" move="true" shade="true" v-model:visible="visible7">
-        允许点击遮盖层关闭弹窗
+    <div style="padding:10px">
+      允许点击遮盖层关闭弹窗
+    </div>
   </lay-layer>
 </template>
 
@@ -256,5 +268,6 @@ export default {
 | closeBtn        | 显示关闭      | true                       |
 | btn             | 按钮          |                            |
 | btnAlign        | 按钮布局      | `l` `r` `c`                |
+| anim            | 弹层动画      | `0` `-` `6`                |
 
 :::
diff --git a/docs/docs/zh-CN/guide/changelog.md b/docs/docs/zh-CN/guide/changelog.md
index 931f8e54..9b870f48 100644
--- a/docs/docs/zh-CN/guide/changelog.md
+++ b/docs/docs/zh-CN/guide/changelog.md
@@ -17,6 +17,7 @@
 [新增] layer 弹层 btnAlign 属性, 允许自定义按钮布局。<br>
 [修复] mackdown 文档 table 样式对 table 组件的污染。<br>
 [优化] layer 弹层 border 样式。<br>
+[优化] layer 弹层 id 默认生成方式, 使用 Guid 作为编号。<br>
 [优化] carousel 轮播逻辑, 允许循环切换。<br>
 [升级] vue-router 4.0.12 版本。<br>
 [升级] vue 3.2.21 版本。<br>
diff --git a/src/css/layer.css b/src/css/layer.css
index cc767e0d..4718027e 100644
--- a/src/css/layer.css
+++ b/src/css/layer.css
@@ -509,7 +509,6 @@ html #layuicss-layer {
 
 .layui-layer-dialog .layui-layer-content {
   position: relative;
-  padding: 20px;
   line-height: 24px;
   word-break: break-all;
   height: 100%;
@@ -756,10 +755,6 @@ html #layuicss-layer {
   padding: 6px 10px;
 }
 
-.layui-layer-prompt .layui-layer-content {
-  padding: 20px;
-}
-
 .layui-layer-prompt .layui-layer-btn {
   padding-top: 0;
 }
diff --git a/src/module/layer/index.vue b/src/module/layer/index.vue
index be1631ab..5a7976af 100644
--- a/src/module/layer/index.vue
+++ b/src/module/layer/index.vue
@@ -11,11 +11,12 @@
   <div
     v-if="visible"
     :id="id"
-    class="layui-layer layui-layer-border"
-    :class="{
-      'layui-layer-dialog': type === 1,
-      'layui-layer-iframe': type === 2,
-    }"
+    class="layui-layer layui-layer-border layer-anim"
+    :class="[
+      'layer-anim-0' + anim,
+      type === 1 ? 'layui-layer-dialog' : '',
+      type === 2 ? 'layui-layer-iframe' : ''
+    ]"
     style="position: fixed"
     :style="{
       top: top,
@@ -119,6 +120,7 @@ const props = withDefaults(
     shadeClose?: boolean
     closeBtn?: boolean
     btnAlign?: string
+    anim?: number
   }>(),
   {
     id: 'layer-' + guid(),
@@ -136,6 +138,7 @@ const props = withDefaults(
     shadeClose: true,
     closeBtn: true,
     btnAlign: 'l',
+    anim: 0,
   }
 )
 
diff --git a/src/tools/guidUtil.ts b/src/tools/guidUtil.ts
index c3da1e87..f8fd2734 100644
--- a/src/tools/guidUtil.ts
+++ b/src/tools/guidUtil.ts
@@ -1,7 +1,20 @@
-export function S4() { 
-    return (((1+Math.random())*0x10000)|0).toString(16).substring(1); 
- }; 
+export function S4() {
+  return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
+}
 
- export function guid() { 
-    return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4()); 
- };
\ No newline at end of file
+export function guid() {
+  return (
+    S4() +
+    S4() +
+    '-' +
+    S4() +
+    '-' +
+    S4() +
+    '-' +
+    S4() +
+    '-' +
+    S4() +
+    S4() +
+    S4()
+  )
+}
\ No newline at end of file