fix(MdBadge): custom class and style supported (#1676)

* fix(MdBadge): custom class and style supported style is not recommend
vuematerial · Apr 10, 2018 · 71b7afa · 71b7afa
1 parent 71c1960
commit 71b7afa
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/docs/app/pages/Components/Badge/Badge.vue b/docs/app/pages/Components/Badge/Badge.vue
@@ -49,7 +49,8 @@
           {
             name: 'md-content',
             type: 'String, Number',
-            description: 'A content for badge'
+            description: 'A content for badge',
+            defaults: ' '
           },
           {
             name: 'md-position',

diff --git a/src/components/MdBadge/MdBadge.vue b/src/components/MdBadge/MdBadge.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="md-badge-content" v-if="hasDefaultSlot">
     <slot />
-    <md-badge-standalone :class="badgeClasses">
+    <md-badge-standalone :class="badgeClasses" :style="styles">
       <div>
         {{ mdContent }}
       </div>
     </md-badge-standalone>
   </div>
-  <md-badge-standalone :class="badgeClasses" v-else>
+  <md-badge-standalone :class="badgeClasses" :style="styles" v-else>
     {{ mdContent }}
   </md-badge-standalone>
 </template>
@@ -40,9 +40,27 @@
         return !!this.$slots.default
       },
       badgeClasses () {
+        const staticClass = this.$vnode.data.staticClass ?
+          this.$vnode.data.staticClass.split(' ').filter(val => val).reduce((result, key) => {
+          result[key] = true
+          return result
+        }, {}) : {}
+
+        const dynamicClass = this.$vnode.data.class
+
         return {
           ['md-position-' + this.mdPosition]: true,
-          'md-dense': this.mdDense
+          'md-dense': this.mdDense,
+          ...staticClass,
+          ...dynamicClass
+        }
+      },
+      styles () {
+        const staticStyle = this.$vnode.data.staticStyle
+        const style = this.$vnode.data.style
+        return {
+          ...staticStyle,
+          ...style
         }
       }
     }