feat(badge): 添加动画

package/component/src/component/badge/index.less

@@ -33,3 +33,27 @@
   background-color: #fff;
   color: #666;
 }
+
+.layui-badge-dot-ripple > span{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: block;
+    border-radius: 50%;
+    box-sizing: border-box;
+    animation: layui-badge-dot-anim-ripple 1.2s ease-in-out infinite;
+  }
+  
+  @keyframes layui-badge-dot-anim-ripple {
+    from {
+      transform: scale(0.8);
+      opacity: 0.6;
+    }
+  
+    to {
+      transform: scale(2.4);
+      opacity: 0;
+    }
+  }

package/component/src/component/badge/index.vue

@@ -12,6 +12,7 @@ export interface LayBadgeProps {
   type?: "dot" | "rim";
   theme?: string;
   color?: string;
+  ripple?: boolean;
 }
 
 const props = defineProps<LayBadgeProps>();
@@ -22,8 +23,10 @@ const classes = computed(() => {
       "layui-badge": !props.type,
       "layui-badge-dot": props.type == "dot",
       "layui-badge-rim": props.type == "rim",
+      "layui-badge-dot-ripple": props.ripple,
     },
     `layui-bg-${props.theme}`,
+    
   ];
 });
 
@@ -34,6 +37,11 @@ const styles = computed(() => {
 
 <template>
   <span :class="classes" :style="styles">
+      <span v-if="type === 'dot'" 
+        :class="props.theme ? `layui-bg-${props.theme}` : ``" 
+        :style="styles ?? `background-color: #ff5722;`">
+      </span>
+    
       <slot v-if="type != 'dot'"></slot>
   </span>
 </template>

package/document/src/document/zh-CN/components/badge.md

@@ -45,6 +45,25 @@ export default {
 
 :::
 
+::: title 动画
+:::
+
+::: demo 使用 `ripple` 属性, 添加水波纹动画, 仅支持 `dot` 类型
+<template>
+    <lay-badge type="dot" ripple></lay-badge>&nbsp;
+    <lay-badge type="dot" theme="orange" ripple></lay-badge>&nbsp;
+    <lay-badge type="dot" theme="green" ripple></lay-badge>&nbsp;
+    <lay-badge type="dot" theme="cyan" ripple></lay-badge>&nbsp;
+    <lay-badge type="dot" theme="blue" ripple></lay-badge>&nbsp;
+    <lay-badge type="dot" theme="black" ripple></lay-badge>&nbsp;
+    <lay-badge type="dot" theme="gray" ripple></lay-badge>&nbsp;
+</template>
+
+<script>
+</script>
+:::
+
+
 ::: title Badge 属性
 :::