perf(layer): 新增 anim 属性, 支持 7 种入场动画

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`                |
 
 :::

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>

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;
 }

src/module/layer/index.vue

@@ -11,11 +11,12 @@
   <div
     v-if="visible"
     :id="id"
-    class="layui-layer layui-layer-border"
+    class="layui-layer layui-layer-border layer-anim"
-    :class="{
+    :class="[
-      'layui-layer-dialog': type === 1,
+      'layer-anim-0' + anim,
-      'layui-layer-iframe': type === 2,
+      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,
   }
 )
 

src/tools/guidUtil.ts

@@ -1,7 +1,20 @@
-export function S4() { 
+export function S4() {
-    return (((1+Math.random())*0x10000)|0).toString(16).substring(1); 
+  return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
- }; 
+}
 
- export function guid() { 
+export function guid() {
-    return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4()); 
+  return (
- };
+    S4() +
+    S4() +
+    '-' +
+    S4() +
+    '-' +
+    S4() +
+    '-' +
+    S4() +
+    '-' +
+    S4() +
+    S4() +
+    S4()
+  )
+}