fixed ButtonGroup

src/packages/buttongroup/buttongroup.scss

@@ -16,24 +16,7 @@
     }
     &.menu {
         height: $btn-menu-height;
-        font-size: $font-size-small;        
-        .nut-button {
-            position: relative;
-            height: $btn-menu-height;
-            width: 100%;
-            padding: 0;
-            font-size: $btn-icon-height-small;
-        }
-        .txt-icon {
-            display: block;
-            margin: 0 auto;
-            width: $btn-menu-icon-height;
-            height: $btn-menu-icon-height;
-        }
-        .nut-badge {
-            flex: 1;
-            -webkit-flex: 1;
-        }
+        font-size: $font-size-small;
     }
     .nut-button {
         flex: 1;

src/packages/buttongroup/buttongroup.vue

@@ -5,30 +5,24 @@
 </template>
 <script>
 export default {
-    name:'nut-buttongroup',
+    name: "nut-buttongroup",
     props: {
         shape: {
             type: String,
-            default: ''
+            default: ""
         },
         type: {
             type: String,
-            default: ''
-
+            default: ""
         }
     },
     data() {
         return {
-            cls: ''
+            cls: ""
         };
     },
     mounted() {
-        this.initStyle();
-    },
-    methods: {
-        initStyle() {
-            this.cls = `nut-buttongroup ${this.shape} ${this.type}`;
-        }
+        this.cls = `nut-buttongroup ${this.shape} ${this.type}`;
     }
-}
+};
 </script>

src/packages/buttongroup/demo.vue

@@ -1,31 +1,50 @@
 <template>
     <div>
-      <h4>常规按钮组</h4>
-      <nut-buttongroup>
-        <nut-button type="light">重置</nut-button>
-        <nut-button>确定</nut-button>
-      </nut-buttongroup>
-    <h4>圆角按钮组</h4>
-    <nut-buttongroup shape="circle">
-      <nut-button type="light">重置</nut-button>
-      <nut-button>确定</nut-button>
-    </nut-buttongroup>
-    <h4>页面底部功能，配合Badge使用</h4>
-      <nut-buttongroup type="menu">
-        <nut-button type="light" icon="action" color="#000">关于</nut-button>
-        <nut-button type="light" icon="more" color="#000">更多</nut-button>
-        <nut-button type="light" icon="search" color="#000">关闭</nut-button>
-        <nut-badge value="2" top="0.5rem" right="2rem"><nut-button type="light" icon="trolley" color="#f00">购物车</nut-button></nut-badge>      
-        <nut-button type="light" icon="tick" color="#000">成功</nut-button>
-      </nut-buttongroup>
+        <h4>常规按钮组</h4>
+        <nut-buttongroup>
+            <nut-button type="light">重置</nut-button>
+            <nut-button>确定</nut-button>
+        </nut-buttongroup>
+        <h4>圆角按钮组</h4>
+        <nut-buttongroup shape="circle">
+            <nut-button type="light">重置</nut-button>
+            <nut-button>确定</nut-button>
+        </nut-buttongroup>
+        <h4>页面底部功能，配合Badge使用</h4>
+        <nut-buttongroup type="menu">
+            <nut-button type="light" icon="action" color="#000">关于</nut-button>
+            <nut-button type="light" icon="more" color="#000">更多</nut-button>
+            <nut-button type="light" icon="search" color="#000">关闭</nut-button>
+            <nut-badge value="2" top="0.5rem" right="2rem">
+                <nut-button type="light" icon="trolley" color="#f00">购物车</nut-button>
+            </nut-badge>
+            <nut-button type="light" icon="tick" color="#000">成功</nut-button>
+        </nut-buttongroup>
     </div>
 </template>
 
 <script>
-export default {
-};
+export default {};
 </script>
 
 <style lang="scss" scoped>
-
+/deep/.menu {
+    .nut-button {
+        position: relative;
+        height: $btn-menu-height;
+        width: 100%;
+        padding: 0;
+        font-size: $btn-icon-height-small;
+    }
+    .txt-icon {
+        display: block;
+        margin: 0 auto;
+        width: $btn-menu-icon-height;
+        height: $btn-menu-icon-height;
+    }
+    .nut-badge {
+        flex: 1;
+        -webkit-flex: 1;
+    }
+}
 </style>

src/packages/buttongroup/doc.md

@@ -83,10 +83,31 @@
   </nut-button>
 </nut-buttongroup>
 ```
+``` style
+/deep/.menu {
+    .nut-button {
+        position: relative;
+        height: $btn-menu-height;
+        width: 100%;
+        padding: 0;
+        font-size: $btn-icon-height-small;
+    }
+    .txt-icon {
+        display: block;
+        margin: 0 auto;
+        width: $btn-menu-icon-height;
+        height: $btn-menu-icon-height;
+    }
+    .nut-badge {
+        flex: 1;
+        -webkit-flex: 1;
+    }
+}
 
+```
 ## Prop
 
-| 字段 | 说明 | 类型 | 默认值
-|----- | ----- | ----- | ----- 
-| shape | 设置按钮组形状，可选值：circle、无 | String | 无
-| type | 设置按钮样式，可选值为：menu、无 | String | 无
+| 字段  | 说明                           | 类型   | 默认值 |
+| ----- | ------------------------------ | ------ | ------ |
+| shape | 设置按钮组形状，可选值：circle | String | 无     |
+| type  | 设置按钮样式，可选值为：menu   | String | 无     |