✨(component): 发布 1.7.3 版本

package/layer/src/component/Notifiy.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="layer-notifiy" ref="notifyRef">
+  <div class="layui-layer-notifiy-wrapper" ref="notifyRef">
     <h2 class="title">
       <i v-if="icon" :class="iconClass"></i>
       {{ title }}
@@ -27,14 +27,18 @@ export interface LayNotifyProps {
   icon?: string | number | undefined;
   iconClass: string[];
 }
+
 const props = withDefaults(defineProps<LayNotifyProps>(), {
   isHtmlFragment: false,
 });
 
 const emit = defineEmits(["close"]);
+const notifyRef = shallowRef<HTMLElement | null>(null);
+
 const close = () => {
   emit("close");
 };
+
 function addClass(obj: HTMLElement, cls: string) {
   //获取 class 内容.
   let obj_class = obj.className,
@@ -44,7 +48,6 @@ function addClass(obj: HTMLElement, cls: string) {
   obj.className = added; //替换原来的 class.
 }
 
-const notifyRef = shallowRef<HTMLElement | null>(null);
 onMounted(() => {
   nextTick(() => {
     setTimeout(() => {
@@ -52,7 +55,7 @@ onMounted(() => {
       if (!notifyRef.value?.parentElement?.parentElement) return;
       addClass(
         notifyRef.value?.parentElement?.parentElement,
-        "layui-layer-notify"
+        "layui-layer-notifiy-transition"
       );
     }, 300);
   });

package/layer/src/component/index.vue

@@ -45,7 +45,7 @@ import useResize from "../composable/useResize";
 import useMove from "../composable/useMove";
 import { zIndexKey } from "../tokens";
 
-export interface LayModalProps {
+export interface LayerProps {
   id?: string;
   title?: string | boolean | Function;
   icon?: string | number;
@@ -100,7 +100,7 @@ export interface LayModalProps {
   restore?: Function;
 }
 
-const props = withDefaults(defineProps<LayModalProps>(), {
+const props = withDefaults(defineProps<LayerProps>(), {
   title: "标题",
   setTop: false,
   offset: () => ["50%", "50%"],
@@ -381,18 +381,17 @@ watch(
  * @param icon 图标类型
  */
 const boxClasses = computed(() => {
-  return [
-    type === 0 ? "layui-layer-dialog" : "",
-    type === 1 ? "layui-layer-page" : "",
-    type === 2 ? "layui-layer-iframe" : "",
-    type === 3 ? "layui-layer-loading" : "",
-    type === 4 ? "layui-layer-drawer" : "",
-    type === 5 ? "layui-layer-photos" : "",
-    type === 6 ? "layui-layer-notifiy-border" : "",
-    props.isMessage ? "layui-layer-msg" : "",
-    props.isMessage && !props.icon ? "layui-layer-hui" : "",
-    props.skin,
-  ];
+  return [{
+    "layui-layer-dialog": type === 0,
+    "layui-layer-page": type === 1,
+    "layui-layer-iframe": type === 2,
+    "layui-layer-loading": type === 3,
+    "layui-layer-drawer": type === 4,
+    "layui-layer-photos": type === 5,
+    "layui-layer-notifiy": type === 6,
+    "layui-layer-msg": props.isMessage,
+    "layui-layer-hui": props.isMessage && !props.icon,
+  },props.skin];
 });
 
 /**
@@ -707,4 +706,4 @@ defineExpose({ reset, open, close });
       </div>
     </transition>
   </div>
-</template>
+</template>

package/layer/src/theme/index.css

@@ -1064,7 +1064,12 @@
   }
 }
 
-.layer-notifiy {
+.layui-layer-notifiy {
+  border: none;
+  box-shadow: none;
+}
+
+.layui-layer-notifiy-wrapper {
   min-width: 330px;
   padding: 14px 26px 14px 13px;
   box-sizing: border-box;
@@ -1073,7 +1078,8 @@
   border: 1px solid #ebeef5;
   box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
 }
-.layer-notifiy .title {
+
+.layui-layer-notifiy-wrapper .title {
   font-weight: 700;
   font-size: 16px;
   color: #303133;
@@ -1081,17 +1087,20 @@
   display: flex;
   align-items: center;
 }
-.layer-notifiy .content {
+
+.layui-layer-notifiy-wrapper .content {
   font-size: 14px;
   line-height: 21px;
   margin: 6px 0 0 8px;
   color: #606266;
   text-align: justify;
 }
-.layer-notifiy .content img{
+
+.layui-layer-notifiy-wrapper .content img{
   max-width: 100%;
 }
-.layer-notifiy .layui-layer-close {
+
+.layui-layer-notifiy-wrapper .layui-layer-close {
   background-position: 1px -40px;
   cursor: pointer;
   width: 16px;
@@ -1101,17 +1110,15 @@
   right: 10px;
 }
 
-.layer-notifiy .layui-layer-close:hover {
+.layui-layer-notifiy-wrapper .layui-layer-close:hover {
   opacity: 0.7;
 }
-.layui-layer-notify{
+
+.layui-layer-notifiy-transition {
   transition: top 0.3s ease-in-out;
 }
-.layui-layer-notifiy-border{
-  border: none;
-  box-shadow: none;
-}
-.layer-notifiy  .title .layui-layer-ico{
+
+.layui-layer-notifiy-wrapper  .title .layui-layer-ico{
   height: 30px !important;
   width: 30px !important;
   display: inline-block;