feat(Button): add class-prefix prop to support custom icon (#3159)

This commit is contained in:
程俊超 2020-05-24 19:40:18 +08:00 committed by GitHub
parent dc7e3d2453
commit d80ec54186
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 5 deletions

View File

@ -120,6 +120,7 @@
| size | 按钮尺寸,可选值为 `normal` `large` `small` `mini` | _string_ | `normal` | - | | size | 按钮尺寸,可选值为 `normal` `large` `small` `mini` | _string_ | `normal` | - |
| color | 按钮颜色,支持传入`linear-gradient`渐变色 | _string_ | - | 1.0.0 | | color | 按钮颜色,支持传入`linear-gradient`渐变色 | _string_ | - | 1.0.0 |
| icon | 左侧图标名称或图片链接,可选值见 [Icon 组件](#/icon) | _string_ | - | - | | icon | 左侧图标名称或图片链接,可选值见 [Icon 组件](#/icon) | _string_ | - | - |
| class-prefix | 类名前缀 用法等同于[Icon 组件](#/icon) | _string_ | `van-icon` | - |
| plain | 是否为朴素按钮 | _boolean_ | `false` | - | | plain | 是否为朴素按钮 | _boolean_ | `false` | - |
| block | 是否为块级元素 | _boolean_ | `false` | - | | block | 是否为块级元素 | _boolean_ | `false` | - |
| round | 是否为圆形按钮 | _boolean_ | `false` | - | | round | 是否为圆形按钮 | _boolean_ | `false` | - |

View File

@ -13,6 +13,10 @@ VantComponent({
props: { props: {
icon: String, icon: String,
classPrefix: {
type: String,
value: 'van-icon',
},
plain: Boolean, plain: Boolean,
block: Boolean, block: Boolean,
round: Boolean, round: Boolean,
@ -73,7 +77,7 @@ VantComponent({
this.$emit('click'); this.$emit('click');
} }
}, },
noop() {}, noop() {},
}, },
}); });

View File

@ -31,10 +31,7 @@
type="{{ loadingType }}" type="{{ loadingType }}"
color="{{ loadingColor(type,color,plain) }}" color="{{ loadingColor(type,color,plain) }}"
/> />
<view <view wx:if="{{ loadingText }}" class="van-button__loading-text">
wx:if="{{ loadingText }}"
class="van-button__loading-text"
>
{{ loadingText }} {{ loadingText }}
</view> </view>
</block> </block>
@ -43,6 +40,7 @@
wx:if="{{ icon }}" wx:if="{{ icon }}"
size="1.2em" size="1.2em"
name="{{ icon }}" name="{{ icon }}"
class-prefix="{{classPrefix}}"
class="van-button__icon" class="van-button__icon"
custom-style="line-height: inherit;" custom-style="line-height: inherit;"
/> />