init

.svn/pristine/c6/c6f297e70b6714381905f4b02704851a348e2a9c.svn-base

@@ -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>