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

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-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,
   }
 )
 

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()); 
- };
+export function guid() {
+  return (
+    S4() +
+    S4() +
+    '-' +
+    S4() +
+    '-' +
+    S4() +
+    '-' +
+    S4() +
+    '-' +
+    S4() +
+    S4() +
+    S4()
+  )
+}