按钮新增类型，layout补全文档

.eslintrc.js

@@ -44,7 +44,7 @@ module.exports = {
     'generator-star-spacing': [2, { 'before': true, 'after': true }],
     'handle-callback-err': [2, '^(err|error)$' ],
     'indent': [2, 2, { 'SwitchCase': 1 }],
-    'jsx-quotes': [2, 'prefer-single'],
+    'jsx-quotes': [2, 'prefer-double'],
     'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }],
     'keyword-spacing': [2, { 'before': true, 'after': true }],
     'new-cap': [2, { 'newIsCap': true, 'capIsNew': false }],

docs/examples-docs/button.md

@@ -7,10 +7,6 @@
     .zan-col {
       margin-bottom: 10px;
     }
-    .button-group {
-      font-size: 0;
-      padding: 0 20px;
-    }
   }
 }
 </style>
@@ -53,7 +49,7 @@
 
 ### 按钮尺寸
 
-只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。
+只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。`large`按钮默认100%宽度。
 
 :::demo 按钮尺寸
 ```html 
@@ -62,15 +58,19 @@
     <zan-button size="large">large</zan-button>
   </zan-col>
 </zan-row>
-<zan-row gutter="10">
+<zan-row>
-  <zan-col span="8">
+  <zan-col span="24">
-    <zan-button type="primary" block>normal</zan-button>
+    <zan-button size="normal">normal</zan-button>
   </zan-col>
-  <zan-col span="8">
+</zan-row>
-    <zan-button size="small" block>small</zan-button>
+<zan-row>
+  <zan-col span="24">
+    <zan-button size="small">small</zan-button>
   </zan-col>
-  <zan-col span="8">
+</zan-row>
-    <zan-button size="mini" block>mini</zan-button>
+<zan-row>
+  <zan-col span="24">
+    <zan-button size="mini">mini</zan-button>
   </zan-col>
 </zan-row>
 ```
@@ -107,6 +107,27 @@
 ```
 :::
 
+### 页面底部操作按钮
+一般用于fixed在底部的区域或是popup弹层的底部，一般只使用`primary`和`normal`两种状态。
+
+:::demo 
+```html 
+<zan-row>
+  <zan-col span="24">
+    <zan-button type="primary" bottom-action>立即购买</zan-button>
+  </zan-col>
+</zan-row>
+<zan-row>
+  <zan-col span="12">
+    <zan-button bottom-action>加入购物车</zan-button>
+  </zan-col>
+  <zan-col span="12">
+    <zan-button type="primary" bottom-action>立即购买</zan-button>
+  </zan-col>
+</zan-row>
+```
+:::
+
 ### API
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
@@ -114,6 +135,7 @@
 | type | 按钮类型 | `string`  | `default`          | `primary`, `danger`   |
 | size | 按钮尺寸 | `string`  | `normal`          | `large`, `small`, `mini`  |
 | tag | 按钮标签 | `string`  | `button`          | `a`, `span`, ...  |
-| diabled | 按钮是否禁用 | `boolean`  |           |      |
+| diabled | 按钮是否禁用 | `boolean`  |  false  |      |
-| block | 按钮是否显示为块级元素 | `boolean`  |           |      |
+| block | 按钮是否显示为块级元素 | `boolean`  |   false   |      |
+| bottomAction | 按钮是否显示为底部行动按钮，一般显示在页面底部，有特殊样式 | `boolean`  |   false   |      |
 

docs/examples-docs/icon.md

@@ -29,7 +29,7 @@
 <zan-icon name="check"></zan-icon>
 <zan-icon name="checked"></zan-icon>
 <zan-icon name="like-o"></zan-icon>
-<zan-icon name="like"></zan-icon>
+<zan-icon name="like" :style="{ color: '#f44' }"></zan-icon>
 <zan-icon name="chat"></zan-icon>
 <zan-icon name="shop"></zan-icon>
 <zan-icon name="photograph"></zan-icon>

docs/examples-docs/layout.md

@@ -0,0 +1,67 @@
+<style>
+@component-namespace demo {
+  @b layout {
+    .zan-row {
+      padding: 0 20px;
+    }
+    .zan-col {
+      margin-bottom: 10px;
+    }
+  }
+}
+
+.gray {
+    height: 30px;
+    background: #666;
+}
+.white {
+    height: 30px;
+    background: #fff;
+}
+</style>
+
+## Layout 布局
+主要提供了 zan-row 和 zan-col 两个组件来进行行列布局
+
+### 常规用法
+Layout组件提供了`24列栅格`，通过在`zan-col`上添加`span`属性设置列所占的宽度百分比（span / 24）；此外，添加`offset`属性可以设置列的偏移宽度，计算方式与span相同。
+
+:::demo
+```html
+<zan-row>
+  <zan-col span="8">
+    <div class="gray"></div>
+  </zan-col>
+  <zan-col span="8">
+    <div class="white"></div>
+  </zan-col>
+  <zan-col span="8">
+    <div class="gray"></div>
+  </zan-col>
+</zan-row>
+<zan-row>
+  <zan-col offset="12" span="12">
+    <div class="gray"></div>
+  </zan-col>
+</zan-row>
+```
+:::
+
+### 在列元素之间增加间距
+列元素之间默认间距为0，如果希望在列元素增加相同的间距，可以在`zan-row`上添加`gutter`属性来设置列元素之间的间距。
+
+:::demo
+```html
+<zan-row gutter="10">
+  <zan-col span="8">
+    <div class="gray"></div>
+  </zan-col>
+  <zan-col span="8">
+    <div class="white"></div>
+  </zan-col>
+  <zan-col span="8">
+    <div class="gray"></div>
+  </zan-col>
+</zan-row>
+```
+:::

docs/nav.config.json

@@ -52,6 +52,10 @@
               "path": "/loading",
               "title": "Loading 加载"
             },
+            {
+              "path": "/layout",
+              "title": "Layout 布局"
+            },
             {
               "path": "/steps",
               "title": "Steps 步骤条"

packages/button/src/button.js

@@ -21,6 +21,7 @@ export default {
     disabled: Boolean,
     loading: Boolean,
     block: Boolean,
+    bottomAction: Boolean,
     tag: {
       type: String,
       default: 'button'
@@ -49,8 +50,8 @@ export default {
   },
 
   render(h) {
-    let { type, nativeType, size, disabled, loading, block } = this;
+    const { type, nativeType, size, disabled, loading, block, bottomAction } = this;
-    let Tag = this.tag;
+    const Tag = this.tag;
 
     return (
       <Tag
@@ -63,19 +64,20 @@ export default {
           {
             'zan-button--disabled': disabled,
             'zan-button--loading': loading,
-            'zan-button--block': block
+            'zan-button--block': block,
+            'zan-button--bottom-action': bottomAction
           }
         ]}
         onClick={this.handleClick}
       >
         {
-          loading ?
+          loading
-            <zan-loading
+            ? <zan-loading
-              class="zan-button__icon-loading"
+                class="zan-button__icon-loading"
-              type="circle"
+                type="circle"
-              color={type === 'default' ? 'black' : 'white'}>
+                color={type === 'default' ? 'black' : 'white'}>
-            </zan-loading> :
+              </zan-loading>
-            null
+            : null
         }
         <span class="zan-button__text">{this.$slots.default}</span>
       </Tag>

packages/quantity/src/quantity.vue

@@ -76,8 +76,9 @@ export default {
       this.$emit('change', val);
     },
     value(val) {
-      if (val) {
+      val = this.correctValue(+val);
-        this.currentValue = this.correctValue(+val);
+      if (val !== this.currentValue) {
+        this.currentValue = val;
       }
     }
   },

packages/zanui-css/src/button.css

@@ -9,7 +9,6 @@
     height: 45px;
     line-height: 43px;
     border-radius: 4px;
-    border: 0;
     box-sizing: border-box;
     font-size: 16px;
     text-align: center;
@@ -28,12 +27,11 @@
       opacity: .3;
     }
 
-    & + .zan-button {
+    @e icon-loading {
-      margin-left: 10px;
+      display: inline-block;
-    }
+      width: 16px;
-
+      height: 16px;
-    & + .zan-button--block {
+      vertical-align: middle;
-      margin-left: 0;
     }
 
     @m default {
@@ -62,7 +60,7 @@
     }
 
     @m normal {
-      padding: 0 10px;
+      padding: 0 15px;
       font-size: 14px;
     }
 
@@ -105,11 +103,20 @@
       }
     }
 
-    @e icon-loading {
+    @m bottom-action {
-      display: inline-block;
+      width: 100%;
-      width: 16px;
+      height: 50px;
-      height: 16px;
+      line-height: 50px;
-      vertical-align: middle;
+      border: 0;
+      border-radius: 0;
+      background-color: $bottom-action-button-default-background-color;
+      color: $bottom-action-button-default-color;
+      font-size: 16px;
+
+      &.zan-button--primary {
+        background-color: $bottom-action-button-primary-background-color;
+        color: $bottom-action-button-primary-color;
+      }
     }
   }
 }

packages/zanui-css/src/common/var.css

@@ -32,3 +32,9 @@ $button-danger-border-color: #e33;
 $button-disabled-color: $c-gray-dark;
 $button-disabled-background-color: $c-gray-light;
 $button-disabled-border-color: #cacaca;
+
+$bottom-action-button-default-color: $c-white;
+$bottom-action-button-default-background-color: #f85;
+
+$bottom-action-button-primary-color: $c-white;
+$bottom-action-button-primary-background-color: #f44;