重构badge组件

src/badge/index.js

@@ -8,91 +8,87 @@ import { css, html, Component } from 'wkit'
 
 class Badge extends Component {
   static props = {
-    value: '',
-    type: 'info',
-    max: {
-      type: Number,
-      default: null
-    },
-    hidden: false,
-    isDot: false
+    value: 0,
+    max: 0
+  }
+
+  get #value() {
+    if (this.value > 0) {
+      if (this.max > 0) {
+        if (this.value > this.max) {
+          return this.max + '+'
+        }
+      }
+      return this.value
+    }
+    return ''
   }
 
   static styles = [
     css`
       :host {
-        position: relative;
-        display: inline-block;
+        display: inline-flex;
       }
-      .num {
-        z-index: 1;
+
+      .container {
+        position: relative;
+      }
+
+      .dot {
         position: absolute;
+        z-index: 9;
+        left: calc(100% - 9px);
+        top: -8px;
         display: inline-flex;
         justify-content: center;
         align-items: center;
-        left: calc(100% - 9px);
-        top: -10px;
-        height: 18px;
-        padding: 0 6px;
+        min-width: 14px;
+        height: 14px;
+        padding: 0 4px;
         border-radius: 10px;
+        background: var(--color-red-1);
+      }
+
+      .num {
+        line-height: 12px;
         font-size: 12px;
+        font-style: normal;
         white-space: nowrap;
+        font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
         color: #fff;
-        background: var(--color-blue-3);
       }
-      :host([is-dot])::after {
-        z-index: 1;
-        position: absolute;
-        height: 8px;
-        width: 8px;
-        top: -4px;
-        left: calc(100% - 4px);
-        background: var(--color-blue-3);
-        border-radius: 50%;
-        content: '';
-      }
-      :host([hidden])::after {
-        display: none;
-        content: '';
+
+      :host([hidden-value]) .dot {
+        .num {
+          display: none;
+        }
       }
     `,
 
     //配色
     css`
       $colors: (
-        primary: 'teal',
         info: 'blue',
-        success: 'green',
-        warning: 'orange',
-        danger: 'red',
-        secondary: 'dark',
-        help: 'grey'
+        success: 'teal',
+        warning: 'orange'
       );
 
       @loop $t, $c in $colors {
         :host([type='#{$t}']) {
-          .num {
-            background-color: var(--color-#{$c}-3);
-          }
-          &::after {
-            background-color: var(--color-#{$c}-3);
+          .dot {
+            background-color: var(--color-#{$c}-1);
           }
         }
       }
     `
   ]
+
   render() {
     return html`
-      <div class="badge" ref="bad">
+      <main class="container">
         <slot></slot>
-        ${!this.isDot && !this.hidden
-          ? html`<div class="num">
-              ${this.max && this.value >= this.max
-                ? this.max + '+'
-                : this.value}
-            </div>`
-          : ''}
-      </div>
+        <span class="dot"><i class="num">${this.#value}</i></span>
+      </main>
     `
   }
 }