Badge add text prop

梁灏
1 parent 0ff50807
Showing 4 changed files with 28 additions and 6 deletions Show diff stats
examples/routers/badge.vue
examples/routers/cell.vue
src/components/badge/badge.vue
src/styles/components/badge.less
@@ -14,14 +14,17 @@
 </style>
 <template>
     <div>
-        <Badge dot :count="count">
+        <Badge :count="count">
             <a href="#" class="demo-badge"></a>
         </Badge>
         <Badge :count="0" showZero>
             <a href="#" class="demo-badge"></a>
         </Badge>
         <Button @click="setCount">set count</Button>
-        
+        <br><br>
+        <Badge text="hot">
+            <Button type="ghost">Hello</Button>
+        </Badge>
     </div>
 </template>
 <script>
@@ -29,7 +32,7 @@
         props: {},
         data () {
             return {
-                count: 50
+                count: 5
             };
         },
         methods: {
@@ -2,7 +2,9 @@
     <div style="margin: 100px;background: #f8f8f9;padding: 100px;">
         <Card title="选项" :padding="0" shadow style="width: 300px;">
             <CellGroup @on-click="handleClick">
-                <Cell title="标题一" name="a1" label="附属内容" to="/button"></Cell>
+                <Cell title="标题一" name="a1" label="附属内容" to="/button">
+                    <Badge count="10" slot="extra"></Badge>
+                </Cell>
                 <Cell title="标题一" name="a2" label="附属内容" extra="详细信息"></Cell>
                 <Cell title="标题一" name="a3" label="附属内容" extra="详细信息" to="/button"></Cell>
                 <Cell title="标题一" name="a4" label="附属内容" selected></Cell>
@@ -9,12 +9,13 @@
     </span>
 </template>
 <script>
+    import { oneOf } from '../../utils/assist';
     const prefixCls = 'ivu-badge';
  
     export default {
         name: 'Badge',
         props: {
-            count: [Number, String],
+            count: Number,
             dot: {
                 type: Boolean,
                 default: false
@@ -27,6 +28,18 @@
             showZero: {
                 type: Boolean,
                 default: false
+            },
+            text: {
+                type: String,
+                default: ''
+            },
+            status: {
+                validator (value) {
+                    return oneOf(value, ['success', 'processing', 'default', 'error', 'warning']);
+                }
+            },
+            offset: {
+                type: Array
             }
         },
         computed: {
@@ -46,6 +59,7 @@
                 ];
             },
             finalCount () {
+                if (this.text !== '') return this.text;
                 return parseInt(this.count) >= parseInt(this.overflowCount) ? `${this.overflowCount}+` : this.count;
             },
             badge () {
@@ -64,10 +78,12 @@
                     }
                 }
  
+                if (this.text !== '') status = true;
+
                 return status || this.showZero;
             },
             hasCount() {
-                if(this.count) return true;
+                if(this.count || this.text !== '') return true;
                 if(this.showZero && parseInt(this.count) === 0) return true;
                 else return false;
             },
 @badge-prefix-cls: ~"@{css-prefix}badge";
  
 .@{badge-prefix-cls} {
+    font-family: "Monospaced Number";
     position: relative;
     display: inline-block;
     line-height: 1;