mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(GoodsAcitonIcon): add color prop (#5576)
This commit is contained in:
neverland
GitHub
parent
70bfb65242
commit
0223258a01
@ -12,6 +12,7 @@ export default createComponent({
|
||||
...routeProps,
|
||||
text: String,
|
||||
icon: String,
|
||||
color: String,
|
||||
info: [Number, String],
|
||||
iconClass: null
|
||||
},
|
||||
@ -20,22 +21,31 @@ export default createComponent({
|
||||
onClick(event) {
|
||||
this.$emit('click', event);
|
||||
route(this.$router, this);
|
||||
},
|
||||
|
||||
genIcon() {
|
||||
const slot = this.slots('icon');
|
||||
|
||||
if (slot) {
|
||||
return <div class={bem('icon')}>{slot}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Icon
|
||||
class={[bem('icon'), this.iconClass]}
|
||||
tag="div"
|
||||
info={this.info}
|
||||
name={this.icon}
|
||||
color={this.color}
|
||||
/>
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div role="button" tabindex="0" class={bem()} onClick={this.onClick}>
|
||||
{this.slots('icon') ? (
|
||||
<div class={bem('icon')}>{this.slots('icon')}</div>
|
||||
) : (
|
||||
<Icon
|
||||
class={[bem('icon'), this.iconClass]}
|
||||
tag="div"
|
||||
info={this.info}
|
||||
name={this.icon}
|
||||
/>
|
||||
)}
|
||||
{this.genIcon()}
|
||||
{this.slots() || this.text}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -56,6 +56,18 @@ Use `info` prop to show badge in icon
|
||||
</van-goods-action>
|
||||
```
|
||||
|
||||
### Custom Icon Color
|
||||
|
||||
```html
|
||||
<van-goods-action>
|
||||
<van-goods-action-icon icon="chat-o" text="Icon1" color="#07c160" />
|
||||
<van-goods-action-icon icon="cart-o" text="Icon2" />
|
||||
<van-goods-action-icon icon="star" text="Collected" color="#ff5000" />
|
||||
<van-goods-action-button type="warning" text="Button1" />
|
||||
<van-goods-action-button type="danger" text="Button2" />
|
||||
</van-goods-action>
|
||||
```
|
||||
|
||||
### Custom Button Color
|
||||
|
||||
```html
|
||||
@ -81,6 +93,7 @@ Use `info` prop to show badge in icon
|
||||
|------|------|------|------|
|
||||
| text | Button text | *string* | - |
|
||||
| icon | Icon | *string* | - |
|
||||
| color `v2.4.2` | Icon color | *string* | `#323233` |
|
||||
| icon-class | Icon class name | *any* | `''` |
|
||||
| info | Content of the badge | *string \| number* | - |
|
||||
| url | Link | *string* | - |
|
||||
|
||||
@ -56,9 +56,23 @@ export default {
|
||||
</van-goods-action>
|
||||
```
|
||||
|
||||
### 自定义图标颜色
|
||||
|
||||
通过 GoodsActionIcon 的`color`属性可以自定义图标的颜色
|
||||
|
||||
```html
|
||||
<van-goods-action>
|
||||
<van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
|
||||
<van-goods-action-icon icon="cart-o" text="购物车" />
|
||||
<van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
|
||||
<van-goods-action-button type="warning" text="加入购物车" />
|
||||
<van-goods-action-button type="danger" text="立即购买" />
|
||||
</van-goods-action>
|
||||
```
|
||||
|
||||
### 自定义按钮颜色
|
||||
|
||||
通过`color`属性可以自定义按钮的颜色，支持传入`linear-gradient`渐变色
|
||||
通过 GoodsActionButton 的`color`属性可以自定义按钮的颜色，支持传入`linear-gradient`渐变色
|
||||
|
||||
```html
|
||||
<van-goods-action>
|
||||
@ -83,6 +97,7 @@ export default {
|
||||
|------|------|------|------|
|
||||
| text | 按钮文字 | *string* | - |
|
||||
| icon | 图标 | *string* | - |
|
||||
| color `v2.4.2` | 图标颜色 | *string* | `#323233` |
|
||||
| icon-class | 图标额外类名 | *any* | - |
|
||||
| info | 图标右上角徽标的内容 | *string \| number* | - |
|
||||
| url | 点击后跳转的链接地址 | *string* | - |
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
</van-goods-action>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<demo-block :title="$t('iconInfo')">
|
||||
<van-goods-action>
|
||||
<van-goods-action-icon icon="chat-o" :text="$t('icon1')" />
|
||||
<van-goods-action-icon icon="cart-o" info="5" :text="$t('icon2')" />
|
||||
@ -20,6 +20,16 @@
|
||||
</van-goods-action>
|
||||
</demo-block>
|
||||
|
||||
<demo-block v-if="!isWeapp" :title="$t('customIconColor')">
|
||||
<van-goods-action>
|
||||
<van-goods-action-icon icon="chat-o" :text="$t('icon1')" color="#07c160" />
|
||||
<van-goods-action-icon icon="cart-o" :text="$t('icon2')" />
|
||||
<van-goods-action-icon icon="star" :text="$t('collected')" color="#ff5000" />
|
||||
<van-goods-action-button type="warning" :text="$t('button1')" />
|
||||
<van-goods-action-button type="danger" :text="$t('button2')" />
|
||||
</van-goods-action>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customButtonColor')">
|
||||
<van-goods-action>
|
||||
<van-goods-action-icon icon="chat-o" :text="$t('icon1')" />
|
||||
@ -35,25 +45,29 @@
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
clickIcon: '点击图标',
|
||||
clickButton: '点击按钮',
|
||||
icon1: '客服',
|
||||
icon2: '购物车',
|
||||
icon3: '店铺',
|
||||
button1: '加入购物车',
|
||||
button2: '立即购买',
|
||||
title2: '徽标提示',
|
||||
iconInfo: '徽标提示',
|
||||
collected: '已收藏',
|
||||
clickIcon: '点击图标',
|
||||
clickButton: '点击按钮',
|
||||
customIconColor: '自定义图标颜色',
|
||||
customButtonColor: '自定义按钮颜色'
|
||||
},
|
||||
'en-US': {
|
||||
clickIcon: 'Click Icon',
|
||||
clickButton: 'Click Button',
|
||||
icon1: 'Icon1',
|
||||
icon2: 'Icon2',
|
||||
icon3: 'Icon3',
|
||||
button1: 'Button1',
|
||||
button2: 'Button2',
|
||||
title2: 'Icon info',
|
||||
iconInfo: 'Icon info',
|
||||
collected: 'Collected',
|
||||
clickIcon: 'Click Icon',
|
||||
clickButton: 'Click Button',
|
||||
customIconColor: 'Custom Icon Color',
|
||||
customButtonColor: 'Custom Button Color'
|
||||
}
|
||||
},
|
||||
|
||||
@ -35,6 +35,25 @@ exports[`renders demo correctly 1`] = `
|
||||
</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--warning"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button van-goods-action-button--last van-goods-action-button--danger"><span class="van-button__text">立即购买</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-goods-action">
|
||||
<div role="button" tabindex="0" class="van-goods-action-icon">
|
||||
<div class="van-icon van-icon-chat-o van-goods-action-icon__icon" style="color: rgb(7, 193, 96);">
|
||||
<!---->
|
||||
</div>客服
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-goods-action-icon">
|
||||
<div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
|
||||
<!---->
|
||||
</div>购物车
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-goods-action-icon">
|
||||
<div class="van-icon van-icon-star van-goods-action-icon__icon" style="color: rgb(255, 80, 0);">
|
||||
<!---->
|
||||
</div>已收藏
|
||||
</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--warning"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button van-goods-action-button--last van-goods-action-button--danger"><span class="van-button__text">立即购买</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-goods-action">
|
||||
<div role="button" tabindex="0" class="van-goods-action-icon">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user