diff --git a/example/pages/goods-action/index.wxml b/example/pages/goods-action/index.wxml index d9f4eca8..ae97375b 100644 --- a/example/pages/goods-action/index.wxml +++ b/example/pages/goods-action/index.wxml @@ -37,7 +37,16 @@ - + + + + + + + + + + diff --git a/packages/common/style/var.less b/packages/common/style/var.less index 78eec35f..7504524a 100644 --- a/packages/common/style/var.less +++ b/packages/common/style/var.less @@ -212,6 +212,7 @@ @goods-action-button-border-radius: @goods-action-button-height / 2; @goods-action-button-warning-color: @gradient-orange; @goods-action-button-danger-color: @gradient-red; +@goods-action-button-plain-color: @white; // Image @image-placeholder-text-color: @gray-6; diff --git a/packages/goods-action-button/index.less b/packages/goods-action-button/index.less index 925452e5..a4de88ca 100644 --- a/packages/goods-action-button/index.less +++ b/packages/goods-action-button/index.less @@ -6,7 +6,6 @@ } .van-goods-action-button { - border: none !important; .theme(height, '@goods-action-button-height') !important; .theme(font-weight, '@font-weight-bold') !important; .theme(line-height, '@goods-action-button-height') !important; @@ -33,6 +32,18 @@ .theme(background, '@goods-action-button-danger-color'); } + &--ordinary { + border: none !important; + } + + &--plain { + .theme(background, '@goods-action-button-plain-color'); + } + + &--no-right-border { + border-right-width: 0px !important; + } + @media (max-width: 321px) { font-size: 13px; } diff --git a/packages/goods-action-button/index.ts b/packages/goods-action-button/index.ts index 73fffd94..3bab17f4 100644 --- a/packages/goods-action-button/index.ts +++ b/packages/goods-action-button/index.ts @@ -18,6 +18,7 @@ VantComponent({ color: String, loading: Boolean, disabled: Boolean, + plain: Boolean, type: { type: String, value: 'danger' @@ -36,11 +37,16 @@ VantComponent({ updateStyle() { const { children = [] } = this.parent; + const { length } = children; const index = children.indexOf(this); - + let rightBorderLess = false; + if (length > 1) { + rightBorderLess = index !== length - 1; + } this.setData({ isFirst: index === 0, - isLast: index === children.length - 1 + rightBorderLess, + isLast: index === length - 1 }); } } diff --git a/packages/goods-action-button/index.wxml b/packages/goods-action-button/index.wxml index d6d2daab..392b96d9 100644 --- a/packages/goods-action-button/index.wxml +++ b/packages/goods-action-button/index.wxml @@ -5,10 +5,11 @@ lang="{{ lang }}" type="{{ type }}" color="{{ color }}" + plain="{{ plain }}" loading="{{ loading }}" disabled="{{ disabled }}" open-type="{{ openType }}" - custom-class="{{ utils.bem('goods-action-button', [type, { first: isFirst, last: isLast }]) }}" + custom-class="{{ utils.bem('goods-action-button', [type, { first: isFirst, last: isLast, plain : plain, ordinary: !plain }])}} {{ rightBorderLess ?'van-goods-action-button--no-right-border': ''}}" business-id="{{ businessId }}" session-from="{{ sessionFrom }}" app-parameter="{{ appParameter }}" diff --git a/packages/goods-action/README.md b/packages/goods-action/README.md index b6d53aaa..ad94c34d 100644 --- a/packages/goods-action/README.md +++ b/packages/goods-action/README.md @@ -81,6 +81,19 @@ Page({ ``` +### 朴素按钮 + +通过`plain`属性将按钮设置为朴素按钮,朴素按钮的文字为按钮颜色,背景为白色 + +```html + + + + + + + +``` ## API @@ -121,6 +134,7 @@ Page({ | link-type | 链接跳转类型,可选值为 `redirectTo` `switchTab` `reLaunch` | *string* | `navigateTo` | - | | id | 标识符 | *string* | - | - | | type | 按钮类型,可选值为 `primary` `warning` `danger` | *string* | `danger` | - | +| plain | 是否为朴素按钮 | *boolean* | `false` | - | | size | 按钮尺寸,可选值为 `normal` `large` `small` `mini` | *string* | `normal` | - | | disabled | 是否禁用按钮 | *boolean* | `false` | - | | loading | 是否显示为加载状态 | *boolean* | `false` | - |