init

src/component/badge/index.less

@@ -0,0 +1,82 @@
+.layui-badge,
+.layui-badge-dot,
+.layui-badge-rim {
+  position: relative;
+  display: inline-block;
+  padding: 0 6px;
+  font-size: 12px;
+  text-align: center;
+  background-color: #ff5722;
+  color: #fff;
+  border-radius: var(--global-border-radius);
+}
+
+.layui-badge {
+  height: 18px;
+  line-height: 18px;
+}
+
+.layui-badge-dot {
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border-radius: 50%;
+}
+
+.layui-badge-rim {
+  height: 18px;
+  line-height: 18px;
+  border-width: 1px;
+  border-style: solid;
+  background-color: #fff;
+  border-color: var(--global-neutral-color-3);
+  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;
+  }
+}
+
+/** Badge 在与其他组件配合使用时的辅助样式 */
+
+.layui-btn .layui-badge,
+.layui-btn .layui-badge-dot {
+  margin-left: 5px;
+}
+
+.layui-nav .layui-badge,
+.layui-nav .layui-badge-dot {
+  position: absolute;
+  top: 50%;
+  margin: -5px 6px 0;
+}
+
+.layui-nav .layui-badge {
+  margin-top: -10px;
+}
+
+.layui-tab-title .layui-badge,
+.layui-tab-title .layui-badge-dot {
+  left: 5px;
+  top: -2px;
+}

src/component/badge/index.ts

@@ -0,0 +1,5 @@
+import { withInstall, WithInstallType } from "../../utils";
+import Component from "./index.vue";
+
+const component: WithInstallType<typeof Component> = withInstall(Component);
+export default component;

src/component/badge/index.vue

@@ -0,0 +1,48 @@
+<script lang="ts">
+export default {
+  name: "LayBadge",
+};
+</script>
+
+<script setup lang="ts">
+import { computed, StyleValue } from "vue";
+import "./index.less";
+
+export interface BadgeProps {
+  type?: "dot" | "rim";
+  theme?: string;
+  color?: string;
+  ripple?: boolean;
+}
+
+const props = defineProps<BadgeProps>();
+
+const classes = computed(() => {
+  return [
+    {
+      "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}`,
+  ];
+});
+
+const styles = computed<StyleValue>(() => {
+  return [props.color ? `background-color: ${props.color}` : ""];
+});
+</script>
+
+<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>