diff --git a/.eslintrc.js b/.eslintrc.js index 15ae2f995..892f6e1db 100644 --- a/.eslintrc.js +++ b/.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 }], diff --git a/docs/examples-docs/button.md b/docs/examples-docs/button.md index 42d94d1ed..c871c2884 100644 --- a/docs/examples-docs/button.md +++ b/docs/examples-docs/button.md @@ -7,10 +7,6 @@ .zan-col { margin-bottom: 10px; } - .button-group { - font-size: 0; - padding: 0 20px; - } } } @@ -53,7 +49,7 @@ ### 按钮尺寸 -只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。 +只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。`large`按钮默认100%宽度。 :::demo 按钮尺寸 ```html @@ -62,15 +58,19 @@ large - - - normal + + + normal - - small + + + + small - - mini + + + + mini ``` @@ -107,6 +107,27 @@ ``` ::: +### 页面底部操作按钮 +一般用于fixed在底部的区域或是popup弹层的底部，一般只使用`primary`和`normal`两种状态。 + +:::demo +```html + + + 立即购买 + + + + + 加入购物车 + + + 立即购买 + + +``` +::: + ### API | 参数 | 说明 | 类型 | 默认值 | 可选值 | @@ -114,6 +135,7 @@ | type | 按钮类型 | `string` | `default` | `primary`, `danger` | | size | 按钮尺寸 | `string` | `normal` | `large`, `small`, `mini` | | tag | 按钮标签 | `string` | `button` | `a`, `span`, ... | -| diabled | 按钮是否禁用 | `boolean` | | | -| block | 按钮是否显示为块级元素 | `boolean` | | | +| diabled | 按钮是否禁用 | `boolean` | false | | +| block | 按钮是否显示为块级元素 | `boolean` | false | | +| bottomAction | 按钮是否显示为底部行动按钮，一般显示在页面底部，有特殊样式 | `boolean` | false | | diff --git a/docs/examples-docs/icon.md b/docs/examples-docs/icon.md index 99f58633a..f6c7f31e7 100644 --- a/docs/examples-docs/icon.md +++ b/docs/examples-docs/icon.md @@ -29,7 +29,7 @@ - + diff --git a/docs/examples-docs/layout.md b/docs/examples-docs/layout.md index e69de29bb..f9a7af23a 100644 --- a/docs/examples-docs/layout.md +++ b/docs/examples-docs/layout.md @@ -0,0 +1,67 @@ + + +## Layout 布局 +主要提供了 zan-row 和 zan-col 两个组件来进行行列布局 + +### 常规用法 +Layout组件提供了`24列栅格`，通过在`zan-col`上添加`span`属性设置列所占的宽度百分比（span / 24）；此外，添加`offset`属性可以设置列的偏移宽度，计算方式与span相同。 + +:::demo +```html + + +
+ + +
+ + +
+ + + + +
+ + +``` +::: + +### 在列元素之间增加间距 +列元素之间默认间距为0，如果希望在列元素增加相同的间距，可以在`zan-row`上添加`gutter`属性来设置列元素之间的间距。 + +:::demo +```html + + +
+ + +
+ + +
+ + +``` +::: diff --git a/docs/nav.config.json b/docs/nav.config.json index 7d1959e5a..858ca9306 100644 --- a/docs/nav.config.json +++ b/docs/nav.config.json @@ -52,6 +52,10 @@ "path": "/loading", "title": "Loading 加载" }, + { + "path": "/layout", + "title": "Layout 布局" + }, { "path": "/steps", "title": "Steps 步骤条" diff --git a/packages/button/src/button.js b/packages/button/src/button.js index 8798cc5ad..1dc05107c 100644 --- a/packages/button/src/button.js +++ b/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; - let Tag = this.tag; + const { type, nativeType, size, disabled, loading, block, bottomAction } = this; + const Tag = this.tag; return ( { - loading ? - - : - null + loading + ? + + : null } {this.$slots.default} diff --git a/packages/quantity/src/quantity.vue b/packages/quantity/src/quantity.vue index 0f16ef49e..2b89ef52b 100644 --- a/packages/quantity/src/quantity.vue +++ b/packages/quantity/src/quantity.vue @@ -76,8 +76,9 @@ export default { this.$emit('change', val); }, value(val) { - if (val) { - this.currentValue = this.correctValue(+val); + val = this.correctValue(+val); + if (val !== this.currentValue) { + this.currentValue = val; } } }, diff --git a/packages/zanui-css/src/button.css b/packages/zanui-css/src/button.css index 0dc62e8f7..29f86dc04 100644 --- a/packages/zanui-css/src/button.css +++ b/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 { - margin-left: 10px; - } - - & + .zan-button--block { - margin-left: 0; + @e icon-loading { + display: inline-block; + width: 16px; + height: 16px; + vertical-align: middle; } @m default { @@ -62,7 +60,7 @@ } @m normal { - padding: 0 10px; + padding: 0 15px; font-size: 14px; } @@ -105,11 +103,20 @@ } } - @e icon-loading { - display: inline-block; - width: 16px; - height: 16px; - vertical-align: middle; + @m bottom-action { + width: 100%; + height: 50px; + line-height: 50px; + 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; + } } } } diff --git a/packages/zanui-css/src/common/var.css b/packages/zanui-css/src/common/var.css index 7f79e0414..4e89219f5 100644 --- a/packages/zanui-css/src/common/var.css +++ b/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;