[优化] 组件代码

src/module/badge/index.less

@@ -0,0 +1,33 @@
+.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: 2px;
+}
+
+.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;
+    color: #666;
+}

src/module/badge/index.vue

@@ -1,26 +1,38 @@
+<script lang="ts">
+export default {
+  name: "LayBadge",
+};
+</script>
+
+<script setup lang="ts">
+import { computed, defineProps } from "vue";
+import "./index.less";
+
+export interface LayBadgeProps {
+  type?: "dot" | "rim";
+  theme?: string;
+  color?: string;
+}
+const props = defineProps<LayBadgeProps>();
+
+const classes = computed(() => {
+  return [
+    {
+      "layui-badge": !props.type,
+      "layui-badge-dot": props.type == "dot",
+      "layui-badge-rim": props.type == "rim",
+    },
+    `layui-bg-${props.theme}`,
+  ];
+});
+
+const styles = computed(() => {
+  props.color ? `background-color: ${props.color}` : "";
+});
+</script>
+
 <template>
-  <span :class="classList" :style="styleList">
+  <span :class="classes" :style="styles">
     <slot v-if="type != 'dot'" />
   </span>
-</template>
-
-<script setup name="LayBadge" lang="ts">
-import { defineProps } from 'vue'
-
-const props = defineProps<{
-  type?: string
-  theme?: string
-  color?: string
-}>()
-
-const classList = [
-  {
-    'layui-badge': !props.type,
-    'layui-badge-dot': props.type == 'dot',
-    'layui-badge-rim': props.type == 'rim',
-  },
-  'layui-bg-' + props.theme,
-]
-
-const styleList = props.color ? 'background-color: ' + props.color : ''
-</script>
+</template>