blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

fix(Tag): incorrect border color when using plain (#8602)

Browse Source
This commit is contained in:
neverland 2021-04-22 19:28:41 +08:00 committed by GitHub
parent 07f138a308
commit fc81749cd2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/tag/index.less
View File

@ -52,6 +52,7 @@
&--plain { &--plain {
background-color: @tag-plain-background-color; background-color: @tag-plain-background-color;
border-color: currentColor;
&::before { &::before {
position: absolute; position: absolute;
@ -59,7 +60,8 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
border: 1px solid currentColor; border: 1px solid;
border-color: inherit;
border-radius: inherit; border-radius: inherit;
content: ''; content: '';
pointer-events: none; pointer-events: none;

10
src/tag/index.tsx
View File

@ -32,13 +32,17 @@ function Tag(
slots: DefaultSlots, slots: DefaultSlots,
ctx: RenderContext<TagProps> ctx: RenderContext<TagProps>
) { ) {
const { type, mark, plain, color, round, size } = props; const { type, mark, plain, color, round, size, textColor } = props;
const key = plain ? 'color' : 'backgroundColor'; const key = plain ? 'color' : 'backgroundColor';
const style = { [key]: color }; const style = { [key]: color };
if (props.textColor) { if (plain) {
style.color = props.textColor; style.color = textColor || color;
style.borderColor = color;
} else {
style.color = textColor;
style.background = color;
} }
const classes: { [key: string]: any } = { mark, plain, round }; const classes: { [key: string]: any } = { mark, plain, round };

6
src/tag/test/__snapshots__/demo.spec.js.snap
View File

@ -57,15 +57,15 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div class="van-cell"> <div class="van-cell">
<div class="van-cell__title"><span>背景颜色</span></div> <div class="van-cell__title"><span>背景颜色</span></div>
<div class="van-cell__value"><span class="van-tag van-tag--default" style="background-color: rgb(114, 50, 221);">标签</span></div> <div class="van-cell__value"><span class="van-tag van-tag--default" style="background: rgb(114, 50, 221);">标签</span></div>
</div> </div>
<div class="van-cell"> <div class="van-cell">
<div class="van-cell__title"><span>文字颜色</span></div> <div class="van-cell__title"><span>文字颜色</span></div>
<div class="van-cell__value"><span class="van-tag van-tag--default" style="background-color: rgb(255, 225, 225); color: rgb(173, 0, 0);">标签</span></div> <div class="van-cell__value"><span class="van-tag van-tag--default" style="color: rgb(173, 0, 0); background: rgb(255, 225, 225);">标签</span></div>
</div> </div>
<div class="van-cell"> <div class="van-cell">
<div class="van-cell__title"><span>空心颜色</span></div> <div class="van-cell__title"><span>空心颜色</span></div>
<div class="van-cell__value"><span class="van-tag van-tag--plain van-tag--default" style="color: rgb(114, 50, 221);">标签</span></div> <div class="van-cell__value"><span class="van-tag van-tag--plain van-tag--default" style="color: rgb(114, 50, 221); border-color: #7232dd;">标签</span></div>
</div> </div>
</div> </div>
</div> </div>