[新增] layer 组件 outAnim 出场动画

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

@@ -268,6 +268,7 @@ export default {
 | closeBtn        | 显示关闭      | true                       |
 | btn             | 按钮          |                            |
 | btnAlign        | 按钮布局      | `l` `r` `c`                |
-| anim            | 弹层动画      | `0` `-` `6`                |
+| anim            | 入场动画      | `0` `-` `6`                |
+| isOutAnim       | 关闭动画      | `true` `false`             |
 
 :::

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

@@ -10,6 +10,14 @@
 ::: demo
 <template>
 <lay-timeline>
+<lay-timeline-item title="0.2.4">
+[重构] row col 栅格组件, 支持 24 栅格。<br>
+[重构] layui.css 样式, 集成 less 编译器。<br>
+[重构] button, button-group, button-container 非破坏性改进代码。<br>
+[修复] themeline 时间线，因 mackdown 造成的样式污染。<br>
+[新增] layer 弹层出场动画, 允许使用 isOutAmin 关闭。<br>
+[删除] rate 评分 theme 属性默认值。<br>
+</lay-timeline-item>
 <lay-timeline-item title="0.2.3">
 [新增] table 表格 列筛选功能。<br>
 [新增] table 表格 row 行单击, row-double 行双击事件。<br>

docs/src/components/LayTableBox.vue

@@ -13,6 +13,10 @@
   border-radius: 4px;
 }
 
+.lay-table-box table tbody {
+  border-bottom: 1px solid whitesmoke;
+}
+
 .lay-table-box table th,
 .lay-table-box table td {
   font-size: 14px;

src/module/header/index.less

@@ -0,0 +1,4 @@
+.layui-header {
+    box-sizing: border-box;
+    height: 60px;
+}

src/module/header/index.vue

@@ -1,17 +1,15 @@
+<script lang="ts">
+export default {
+  name: "LayHeader",
+};
+</script>
+
+<script setup lang="ts">
+import "./index.less";
+</script>
+
 <template>
   <div class="layui-header">
     <slot />
   </div>
 </template>
-<script lang="ts">
-export default {
-  name: 'LayHeader',
-}
-</script>
-<script setup lang="ts"></script>
-<style>
-.layui-header {
-  box-sizing: border-box;
-  height: 60px;
-}
-</style>

src/module/layer/index.vue

@@ -1,86 +1,3 @@
-<template>
-  <!-- 遮盖 -->
-  <div
-    v-if="visible && shade"
-    class="layui-layer-shade"
-    style="background-color: rgb(0, 0, 0); opacity: 0.1"
-    :style="{ zIndex: zIndex }"
-    @click="shadeHandle"
-  ></div>
-  <!-- 元素 -->
-  <div
-    v-if="visible"
-    :id="id"
-    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,
-      left: left,
-      width: width,
-      height: height,
-      zIndex: zIndex,
-    }"
-  >
-    <div class="layui-layer-title" style="cursor: move">
-      {{ title }}
-    </div>
-    <div class="layui-layer-content" :style="{ height: contentHeight }">
-      <div v-if="type === 1" style="height: 100%">
-        <slot v-if="slot.default"></slot>
-        <template v-else>
-          {{ content }}
-        </template>
-      </div>
-      <iframe
-        v-if="type === 2"
-        scrolling="auto"
-        allowtransparency="true"
-        frameborder="0"
-        :src="content"
-        style="width: 100%; height: 100%"
-      ></iframe>
-    </div>
-    <span class="layui-layer-setwin"
-      ><a
-        v-if="maxmin"
-        class="layui-layer-min"
-        href="javascript:;"
-        @click="minHandle"
-        ><cite></cite></a
-      ><a
-        v-if="maxmin"
-        class="layui-layer-ico layui-layer-max"
-        :class="[max ? 'layui-layer-maxmin' : '']"
-        href="javascript:;"
-        @click="maxHandle"
-      ></a>
-      <a
-        v-if="closeBtn"
-        class="layui-layer-ico layui-layer-close layui-layer-close1"
-        href="javascript:;"
-        @click="closeHandle"
-      ></a
-    ></span>
-    <div
-      v-if="btn && btn.length > 0"
-      class="layui-layer-btn"
-      :class="['layui-layer-btn-' + btnAlign]"
-    >
-      <template v-for="(b, index) in btn" :key="index">
-        <a :class="['layui-layer-btn' + index]" @click="b.callback">{{
-          b.text
-        }}</a>
-      </template>
-    </div>
-    <span class="layui-layer-resize"></span>
-  </div>
-</template>
-
 <script lang="ts">
 export default {
   name: "LayLayer",
@@ -119,7 +36,8 @@ export interface LayLayerProps {
   shadeClose?: boolean | string;
   closeBtn?: boolean | string;
   btnAlign?: string;
-  anim?: number;
+  anim?: number | boolean;
+  isOutAnim?: boolean;
 }
 
 const props = withDefaults(defineProps<LayLayerProps>(), {
@@ -140,6 +58,7 @@ const props = withDefaults(defineProps<LayLayerProps>(), {
   btnAlign: "l",
   anim: 0,
   content: "",
+  isOutAnim: true
 });
 
 const top = ref(props.offset[0]);
@@ -208,3 +127,87 @@ const maxHandle = function () {
   max.value = !max.value;
 };
 </script>
+
+<template>
+  <!-- 遮盖 -->
+  <div
+    v-if="visible && shade"
+    class="layui-layer-shade"
+    style="background-color: rgb(0, 0, 0); opacity: 0.1"
+    :style="{ zIndex: zIndex }"
+    @click="shadeHandle"
+  ></div>
+  <!-- 元素 -->
+  <transition :leave-to-class="isOutAnim ? 'layer-anim-close':''">
+    <div
+      v-if="visible"
+      :id="id"
+      :class="[
+        anim!== false ? 'layer-anim layer-anim-0' + anim : '',
+        type === 1 ? 'layui-layer-dialog' : '',
+        type === 2 ? 'layui-layer-iframe' : '',
+      ]"
+      class="layui-layer layui-layer-border"
+      :style="{
+        top: top,
+        left: left,
+        width: width,
+        height: height,
+        zIndex: zIndex,
+      }"
+    >
+      <div class="layui-layer-title" style="cursor: move">
+        {{ title }}
+      </div>
+      <div class="layui-layer-content" :style="{ height: contentHeight }">
+        <div v-if="type === 1" style="height: 100%">
+          <slot v-if="slot.default"></slot>
+          <template v-else>
+            {{ content }}
+          </template>
+        </div>
+        <iframe
+          v-if="type === 2"
+          scrolling="auto"
+          allowtransparency="true"
+          frameborder="0"
+          :src="content"
+          style="width: 100%; height: 100%"
+        ></iframe>
+      </div>
+      <span class="layui-layer-setwin"
+        ><a
+          v-if="maxmin"
+          class="layui-layer-min"
+          href="javascript:;"
+          @click="minHandle"
+          ><cite></cite></a
+        ><a
+          v-if="maxmin"
+          class="layui-layer-ico layui-layer-max"
+          :class="[max ? 'layui-layer-maxmin' : '']"
+          href="javascript:;"
+          @click="maxHandle"
+        ></a>
+        <a
+          v-if="closeBtn"
+          class="layui-layer-ico layui-layer-close layui-layer-close1"
+          href="javascript:;"
+          @click="closeHandle"
+        ></a
+      ></span>
+      <div
+        v-if="btn && btn.length > 0"
+        class="layui-layer-btn"
+        :class="['layui-layer-btn-' + btnAlign]"
+      >
+        <template v-for="(b, index) in btn" :key="index">
+          <a :class="['layui-layer-btn' + index]" @click="b.callback">{{
+            b.text
+          }}</a>
+        </template>
+      </div>
+      <span class="layui-layer-resize"></span>
+    </div>
+  </transition>
+</template>

src/module/menu/index.vue

@@ -5,46 +5,43 @@
 </template>
 
 <script setup name="LayMenu" lang="ts">
-import { computed, defineProps, provide, ref, watch } from 'vue'
+import { computed, defineProps, provide, ref, watch } from "vue";
 
-const emit = defineEmits(['update:selectedKey', 'update:openKeys'])
+export interface LayMenuProps {
+  selectedKey?: string;
+  openKeys?: string[];
+  tree?: boolean;
+}
 
-const props = withDefaults(
+const emit = defineEmits(["update:selectedKey", "update:openKeys"]);
-  defineProps<{
-    selectedKey?: string
-    openKeys?: string[]
-    tree?: boolean
-  }>(),
-  {
-    selectedKey: '',
-    openKeys: function () {
-      return []
-    },
-    tree: false,
-  }
-)
 
-const isTree = computed(() => props.tree)
+const props = withDefaults(defineProps<LayMenuProps>(), {
+  selectedKey: "",
+  openKeys: () => [],
+  tree: false,
+});
+
+const isTree = computed(() => props.tree);
 
 const openKeys = computed({
   get() {
-    return props.openKeys
+    return props.openKeys;
   },
   set(val) {
-    emit('update:selectedKey', val)
+    emit("update:selectedKey", val);
   },
-})
+});
 
 const selectedKey = computed({
   get() {
-    return props.selectedKey
+    return props.selectedKey;
   },
   set(val) {
-    emit('update:selectedKey', val)
+    emit("update:selectedKey", val);
   },
-})
+});
 
-provide('isTree', isTree)
+provide("isTree", isTree);
-provide('selectedKey', selectedKey)
+provide("selectedKey", selectedKey);
-provide('openKeys', openKeys)
+provide("openKeys", openKeys);
 </script>