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

fix(Button): should hide border when color is linear-gradient (#4342)

Browse Source
This commit is contained in:
neverland 2019-09-03 16:08:40 +08:00 committed by GitHub
parent d8bd873318
commit 252bd25662
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/button/index.tsx
View File

@ -57,16 +57,22 @@ function Button(
loadingText
} = props;
const style: Record<string, string> = {};
const style: Record<string, string | number> = {};
if (color) {
style.borderColor = color;
style.color = plain ? color : WHITE;
if (!plain) {
// Use background instead of backgroundColor to make linear-gradient work
style.background = color;
}
// hide border when color is linear-gradient
if (color.indexOf('gradient') !== -1) {
style.border = 0;
} else {
style.borderColor = color;
}
}
function onClick(event: Event) {

2
src/button/test/__snapshots__/demo.spec.js.snap
View File

@ -32,6 +32,6 @@ exports[`renders demo correctly 1`] = `
迷你按钮
</span></button></div>
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">URL 跳转</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">路由跳转</span></button></div>
<div><button class="van-button van-button--default van-button--normal" style="border-color: #7232dd; color: rgb(255, 255, 255); background: rgb(114, 50, 221);"><span class="van-button__text">自定义颜色</span></button> <button class="van-button van-button--default van-button--normal van-button--plain" style="border-color: #7232dd; color: rgb(114, 50, 221);"><span class="van-button__text">自定义颜色</span></button></div>
<div><button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">自定义颜色</span></button> <button class="van-button van-button--default van-button--normal van-button--plain" style="color: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">自定义颜色</span></button></div>
</div>
`;

10
src/button/test/index.spec.js
View File

@ -72,3 +72,13 @@ test('touchstart event', () => {
wrapper.trigger('touchstart');
expect(onTouchstart).toHaveBeenCalled();
});
test('hide border when color is gradient', () => {
const wrapper = mount(Button, {
propsData: {
color: 'linear-gradient(#000, #fff)'
}
});
expect(wrapper.element.style.border).toEqual('0px');
});

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

@ -46,7 +46,7 @@ exports[`renders demo correctly 1`] = `
<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> <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="color: rgb(255, 255, 255); background: rgb(190, 153, 255); border-color: #be99ff;"><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="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">立即购买</span></button>
</div>
</div>
</div>