blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-27 20:06:36 +08:00
Code Issues Projects Releases Wiki Activity

feat(GoodsActionButton): add color prop (#4255)

Browse Source
This commit is contained in:
neverland 2019-08-27 17:13:12 +08:00 committed by GitHub
parent 339cbdc1dd
commit a842da803f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 84 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/button/README.md
View File

@ -97,7 +97,7 @@ Vue.use(Button);
| type | Can be set to `primary` `info` `warning` `danger` | `string` | `default` |
| size | Can be set to `large` `small` `mini` | `string` | `normal` |
| text | Text | `string` | - |
| color | Color | `string` | - |
| color | Color, support linear-gradient | `string` | - |
| icon | Left Icon | `string` | - |
| tag | HTML Tag | `string` | `button` |
| native-type | Native Type Attribute | `string` | `''` |

2
src/button/README.zh-CN.md
View File

@ -117,7 +117,7 @@ Vue.use(Button);
| type | 类型，可选值为 `primary` `info` `warning` `danger` | `string` | `default` | 1.6.6 |
| size | 尺寸，可选值为 `large` `small` `mini` | `string` | `normal` | - |
| text | 按钮文字 | `string` | - | - |
| color | 按钮颜色 | `string` | - | 2.1.3 |
| color | 按钮颜色，支持传入`linear-gradient`渐变色 | `string` | - | 2.1.3 |
| icon | 左侧图标名称或图片链接，可选值见 Icon 组件 | `string` | - | 2.0.0 |
| tag | HTML 标签 | `string` | `button` | - |
| native-type | 原生 button 标签 type 属性 | `string` | - | - |

2
src/goods-action-button/index.js
View File

@ -12,6 +12,7 @@ export default createComponent({
...routeProps,
type: String,
text: String,
color: String,
loading: Boolean,
disabled: Boolean
},
@ -48,6 +49,7 @@ export default createComponent({
square
size="large"
type={this.type}
color={this.color}
loading={this.loading}
disabled={this.disabled}
onClick={this.onClick}

62
src/goods-action/README.md
View File

@ -22,26 +22,10 @@ Vue
```html
<van-goods-action>
<van-goods-action-icon
icon="chat-o"
text="Icon1"
@click="onClickIcon"
/>
<van-goods-action-icon
icon="cart-o"
text="Icon2"
@click="onClickIcon"
/>
<van-goods-action-button
type="warning"
text="Button1"
@click="onClickButton"
/>
<van-goods-action-button
type="danger"
text="Button2"
@click="onClickButton"
/>
<van-goods-action-icon icon="chat-o" text="Icon1" @click="onClickIcon" />
<van-goods-action-icon icon="cart-o" text="Icon2" @click="onClickIcon" />
<van-goods-action-button type="warning" text="Button1" @click="onClickButton" />
<van-goods-action-button type="danger" text="Button2" @click="onClickButton" />
</van-goods-action>
```
@ -64,27 +48,22 @@ Use `info` prop to show messages in upper right corner of icon
```html
<van-goods-action>
<van-goods-action-icon
icon="chat-o"
text="Icon1"
/>
<van-goods-action-icon
info="5"
icon="cart-o"
text="Icon2"
/>
<van-goods-action-icon
icon="shop-o"
text="Icon3"
/>
<van-goods-action-button
type="warning"
text="Button1"
/>
<van-goods-action-button
type="danger"
text="Button2"
/>
<van-goods-action-icon icon="chat-o" text="Icon1" />
<van-goods-action-icon icon="cart-o" text="Icon2" info="5" />
<van-goods-action-icon icon="shop-o" text="Icon3" />
<van-goods-action-button type="warning" text="Button1" />
<van-goods-action-button type="danger" text="Button2" />
</van-goods-action>
```
### Custom Button Color
```html
<van-goods-action>
<van-goods-action-icon icon="chat-o" text="Icon1" />
<van-goods-action-icon icon="shop-o" text="Icon2" />
<van-goods-action-button color="#be99ff" type="warning" text="Button1" />
<van-goods-action-button color="#7232dd" type="danger" text="Button2" />
</van-goods-action>
```
@ -114,6 +93,7 @@ Use `info` prop to show messages in upper right corner of icon
|------|------|------|------|
| type | Button type, Can be set to `primary` `info` `warning` `danger` | `string` | `default` |
| text | Button text | `string` | - |
| color | Button color, support linear-gradient | `string` | - |
| primary | Is primary button (red color) | `boolean` | `false` |
| disabled | Whether to disable button | `boolean` | `false` |
| loading | Whether show loading status | `boolean` | `false` |

64
src/goods-action/README.zh-CN.md
View File

@ -22,26 +22,10 @@ Vue
```html
<van-goods-action>
<van-goods-action-icon
icon="chat-o"
text="客服"
@click="onClickIcon"
/>
<van-goods-action-icon
icon="cart-o"
text="购物车"
@click="onClickIcon"
/>
<van-goods-action-button
type="warning"
text="加入购物车"
@click="onClickButton"
/>
<van-goods-action-button
type="danger"
text="立即购买"
@click="onClickButton"
/>
<van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
<van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
<van-goods-action-button type="warning" text="加入购物车" @click="onClickButton" />
<van-goods-action-button type="danger" text="立即购买" @click="onClickButton" />
</van-goods-action>
```
@ -64,27 +48,24 @@ export default {
```html
<van-goods-action>
<van-goods-action-icon
icon="chat-o"
text="客服"
/>
<van-goods-action-icon
info="5"
icon="cart-o"
text="购物车"
/>
<van-goods-action-icon
icon="shop-o"
text="店铺"
/>
<van-goods-action-button
type="warning"
text="加入购物车"
/>
<van-goods-action-button
type="danger"
text="立即购买"
/>
<van-goods-action-icon icon="chat-o" text="客服" />
<van-goods-action-icon icon="cart-o" text="购物车" info="5" />
<van-goods-action-icon icon="shop-o" text="店铺" />
<van-goods-action-button type="warning" text="加入购物车" />
<van-goods-action-button type="danger" text="立即购买" />
</van-goods-action>
```
### 自定义按钮颜色
通过`color`属性可以自定义按钮的颜色，支持传入`linear-gradient`渐变色
```html
<van-goods-action>
<van-goods-action-icon icon="chat-o" text="客服" />
<van-goods-action-icon icon="shop-o" text="店铺" />
<van-goods-action-button color="#be99ff" type="warning" text="加入购物车" />
<van-goods-action-button color="#7232dd" type="danger" text="立即购买" />
</van-goods-action>
```
@ -114,6 +95,7 @@ export default {
|------|------|------|------|------|
| text | 按钮文字 | `string` | - | - |
| type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | `string` | `default` | 2.0.0 |
| color | 按钮颜色，支持传入`linear-gradient`渐变色 | `string` | - | 2.1.8 |
| disabled | 是否禁用按钮 | `boolean` | `false` | - | - |
| loading | 是否显示为加载状态 | `boolean` | `false` | - | - |
| url | 跳转链接 | `string` | - | - |

70
src/goods-action/demo/index.vue
View File

@ -3,57 +3,29 @@
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-goods-action>
<van-goods-action-icon
icon="chat-o"
:text="$t('icon1')"
@click="onClickIcon"
/>
<van-goods-action-icon
icon="cart-o"
:text="$t('icon2')"
@click="onClickIcon"
/>
<van-goods-action-button
type="warning"
:text="$t('button1')"
@click="onClickButton"
/>
<van-goods-action-button
type="danger"
:text="$t('button2')"
@click="onClickButton"
/>
<van-goods-action-icon icon="chat-o" :text="$t('icon1')" @click="onClickIcon" />
<van-goods-action-icon icon="cart-o" :text="$t('icon2')" @click="onClickIcon" />
<van-goods-action-button type="warning" :text="$t('button1')" @click="onClickButton" />
<van-goods-action-button type="danger" :text="$t('button2')" @click="onClickButton" />
</van-goods-action>
</demo-block>
<demo-block :title="$t('title2')">
<van-goods-action>
<van-goods-action-icon
icon="chat-o"
:text="$t('icon1')"
@click="onClickIcon"
/>
<van-goods-action-icon
icon="cart-o"
info="5"
:text="$t('icon2')"
@click="onClickIcon"
/>
<van-goods-action-icon
icon="shop-o"
:text="$t('icon3')"
@click="onClickIcon"
/>
<van-goods-action-button
type="warning"
:text="$t('button1')"
@click="onClickButton"
/>
<van-goods-action-button
type="danger"
:text="$t('button2')"
@click="onClickButton"
/>
<van-goods-action-icon icon="chat-o" :text="$t('icon1')" />
<van-goods-action-icon icon="cart-o" info="5" :text="$t('icon2')" />
<van-goods-action-icon icon="shop-o" :text="$t('icon3')" />
<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')" />
<van-goods-action-icon icon="cart-o" :text="$t('icon2')" />
<van-goods-action-button color="#be99ff" type="warning" :text="$t('button1')" />
<van-goods-action-button color="#7232dd" type="danger" :text="$t('button2')" />
</van-goods-action>
</demo-block>
</demo-section>
@ -70,7 +42,8 @@ export default {
icon3: '店铺',
button1: '加入购物车',
button2: '立即购买',
title2: '图标提示'
title2: '图标提示',
customButtonColor: '自定义按钮颜色'
},
'en-US': {
clickIcon: 'Click Icon',
@ -80,7 +53,8 @@ export default {
icon3: 'Icon3',
button1: 'Button1',
button2: 'Button2',
title2: 'Icon info'
title2: 'Icon info',
customButtonColor: 'Custom Button Color'
}
},
methods: {

14
src/goods-action/test/__snapshots__/demo.spec.js.snap
View File

@ -35,5 +35,19 @@ 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">
<!---->
</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> <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" style="border-color: #be99ff; color: rgb(255, 255, 255); background: rgb(190, 153, 255);"><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" style="border-color: #7232dd; color: rgb(255, 255, 255); background: rgb(114, 50, 221);"><span class="van-button__text">立即购买</span></button>
</div>
</div>
</div>
`;