mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(Tag): add closeable prop (#4763)
This commit is contained in:
neverland
GitHub
parent
8d55e737c6
commit
7999098060
@ -21,16 +21,6 @@ Vue.use(Tag);
|
||||
<van-tag type="warning">Tag</van-tag>
|
||||
```
|
||||
|
||||
### Plain style
|
||||
|
||||
```html
|
||||
<van-tag plain>Tag</van-tag>
|
||||
<van-tag plain type="primary">Tag</van-tag>
|
||||
<van-tag plain type="success">Tag</van-tag>
|
||||
<van-tag plain type="danger">Tag</van-tag>
|
||||
<van-tag plain type="warning">Tag</van-tag>
|
||||
```
|
||||
|
||||
### Round style
|
||||
|
||||
```html
|
||||
@ -51,6 +41,16 @@ Vue.use(Tag);
|
||||
<van-tag mark type="warning">Tag</van-tag>
|
||||
```
|
||||
|
||||
### Plain style
|
||||
|
||||
```html
|
||||
<van-tag plain>Tag</van-tag>
|
||||
<van-tag plain type="primary">Tag</van-tag>
|
||||
<van-tag plain type="success">Tag</van-tag>
|
||||
<van-tag plain type="danger">Tag</van-tag>
|
||||
<van-tag plain type="warning">Tag</van-tag>
|
||||
```
|
||||
|
||||
### Custom Color
|
||||
|
||||
```html
|
||||
@ -69,6 +69,45 @@ Vue.use(Tag);
|
||||
<van-tag type="danger" size="large">Tag</van-tag>
|
||||
```
|
||||
|
||||
### Closeable
|
||||
|
||||
```html
|
||||
<van-tag
|
||||
v-if="showPrimary"
|
||||
type="primary"
|
||||
size="medium"
|
||||
@close="close('primary')"
|
||||
>
|
||||
Tag
|
||||
</van-tag>
|
||||
<van-tag
|
||||
v-if="showSuccess"
|
||||
type="success"
|
||||
size="medium"
|
||||
@close="close('success')"
|
||||
>
|
||||
Tag
|
||||
</van-tag>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: {
|
||||
primary: true,
|
||||
success: true
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close(type) {
|
||||
this.show[type] = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
@ -82,6 +121,7 @@ Vue.use(Tag);
|
||||
| round | Whether to be round style | *boolean* | `false` | - |
|
||||
| mark | Whether to be mark style | *boolean* | `false` | - |
|
||||
| text-color | Text color | *string* | `white` | - |
|
||||
| closeable | Whether to be closeable | *boolean* | `false` | 2.2.9 |
|
||||
|
||||
### Slots
|
||||
|
||||
@ -94,3 +134,4 @@ Vue.use(Tag);
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| click | Triggered when clicked | event: Event |
|
||||
| close | Triggered when click close icon | - |
|
||||
|
||||
@ -23,18 +23,6 @@ Vue.use(Tag);
|
||||
<van-tag type="warning">标签</van-tag>
|
||||
```
|
||||
|
||||
### 空心样式
|
||||
|
||||
设置`plain`属性设置为空心样式
|
||||
|
||||
```html
|
||||
<van-tag plain>标签</van-tag>
|
||||
<van-tag plain type="primary">标签</van-tag>
|
||||
<van-tag plain type="success">标签</van-tag>
|
||||
<van-tag plain type="danger">标签</van-tag>
|
||||
<van-tag plain type="warning">标签</van-tag>
|
||||
```
|
||||
|
||||
### 圆角样式
|
||||
|
||||
通过`round`设置为圆角样式
|
||||
@ -59,6 +47,18 @@ Vue.use(Tag);
|
||||
<van-tag mark type="warning">标签</van-tag>
|
||||
```
|
||||
|
||||
### 空心样式
|
||||
|
||||
设置`plain`属性设置为空心样式
|
||||
|
||||
```html
|
||||
<van-tag plain>标签</van-tag>
|
||||
<van-tag plain type="primary">标签</van-tag>
|
||||
<van-tag plain type="success">标签</van-tag>
|
||||
<van-tag plain type="danger">标签</van-tag>
|
||||
<van-tag plain type="warning">标签</van-tag>
|
||||
```
|
||||
|
||||
### 自定义颜色
|
||||
|
||||
```html
|
||||
@ -77,6 +77,47 @@ Vue.use(Tag);
|
||||
<van-tag type="danger" size="large">标签</van-tag>
|
||||
```
|
||||
|
||||
### 可关闭标签
|
||||
|
||||
添加`closeable`属性表示标签是可关闭的，关闭标签时会触发`close`事件，在`close`事件中可以执行隐藏标签的逻辑
|
||||
|
||||
```html
|
||||
<van-tag
|
||||
v-if="showPrimary"
|
||||
type="primary"
|
||||
size="medium"
|
||||
@close="close('primary')"
|
||||
>
|
||||
标签
|
||||
</van-tag>
|
||||
<van-tag
|
||||
v-if="showSuccess"
|
||||
type="success"
|
||||
size="medium"
|
||||
@close="close('success')"
|
||||
>
|
||||
标签
|
||||
</van-tag>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: {
|
||||
primary: true,
|
||||
success: true
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close(type) {
|
||||
this.show[type] = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
@ -90,15 +131,17 @@ Vue.use(Tag);
|
||||
| round | 是否为圆角样式 | *boolean* | `false` | - |
|
||||
| mark | 是否为标记样式 | *boolean* | `false` | - |
|
||||
| text-color | 文本颜色，优先级高于`color`属性 | *string* | `white` | - |
|
||||
| closeable | 是否为可关闭标签 | *boolean* | `false` | 2.2.9 |
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| default | 自定义 Tag 显示内容 |
|
||||
| default | 标签显示内容 |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| click | 点击时触发 | event: Event |
|
||||
| close | 关闭标签时触发 | - |
|
||||
|
||||
@ -8,14 +8,6 @@
|
||||
<van-tag type="warning">{{ $t('tag') }}</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('plain')">
|
||||
<van-tag plain>{{ $t('tag') }}</van-tag>
|
||||
<van-tag plain type="primary">{{ $t('tag') }}</van-tag>
|
||||
<van-tag plain type="success">{{ $t('tag') }}</van-tag>
|
||||
<van-tag plain type="danger">{{ $t('tag') }}</van-tag>
|
||||
<van-tag plain type="warning">{{ $t('tag') }}</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('round')">
|
||||
<van-tag round>{{ $t('tag') }}</van-tag>
|
||||
<van-tag round type="primary">{{ $t('tag') }}</van-tag>
|
||||
@ -32,6 +24,14 @@
|
||||
<van-tag mark type="warning">{{ $t('tag') }}</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('plain')">
|
||||
<van-tag plain>{{ $t('tag') }}</van-tag>
|
||||
<van-tag plain type="primary">{{ $t('tag') }}</van-tag>
|
||||
<van-tag plain type="success">{{ $t('tag') }}</van-tag>
|
||||
<van-tag plain type="danger">{{ $t('tag') }}</van-tag>
|
||||
<van-tag plain type="warning">{{ $t('tag') }}</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customColor')">
|
||||
<van-tag color="#f2826a">{{ $t('tag') }}</van-tag>
|
||||
<van-tag color="#f2826a" plain>{{ $t('tag') }}</van-tag>
|
||||
@ -41,9 +41,30 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customSize')">
|
||||
<van-tag type="danger">{{ $t('tag') }}</van-tag>
|
||||
<van-tag type="danger" size="medium">{{ $t('tag') }}</van-tag>
|
||||
<van-tag type="danger" size="large">{{ $t('tag') }}</van-tag>
|
||||
<van-tag type="success">{{ $t('tag') }}</van-tag>
|
||||
<van-tag type="success" size="medium">{{ $t('tag') }}</van-tag>
|
||||
<van-tag type="success" size="large">{{ $t('tag') }}</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('closeable')">
|
||||
<van-tag
|
||||
v-if="show.primary"
|
||||
size="medium"
|
||||
closeable
|
||||
type="primary"
|
||||
@close="close('primary')"
|
||||
>
|
||||
{{ $t('tag') }}
|
||||
</van-tag>
|
||||
<van-tag
|
||||
v-if="show.success"
|
||||
size="medium"
|
||||
closeable
|
||||
type="success"
|
||||
@close="close('success')"
|
||||
>
|
||||
{{ $t('tag') }}
|
||||
</van-tag>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
@ -55,6 +76,7 @@ export default {
|
||||
plain: '空心样式',
|
||||
round: '圆角样式',
|
||||
mark: '标记样式',
|
||||
closeable: '可关闭标签',
|
||||
customColor: '自定义颜色',
|
||||
customSize: '标签大小'
|
||||
},
|
||||
@ -62,9 +84,25 @@ export default {
|
||||
plain: 'Plain style',
|
||||
round: 'Round style',
|
||||
mark: 'Mark style',
|
||||
closeable: 'Closeable',
|
||||
customColor: 'Custom Color',
|
||||
customSize: 'Custom Size'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
show: {
|
||||
primary: true,
|
||||
success: true
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
close(tag) {
|
||||
this.show[tag] = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-tag {
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: @tag-padding;
|
||||
color: @tag-text-color;
|
||||
font-size: @tag-font-size;
|
||||
@ -58,19 +59,18 @@
|
||||
}
|
||||
|
||||
&--mark {
|
||||
padding-right: .6em;
|
||||
border-radius: 0 .8em .8em 0;
|
||||
padding-right: .7em;
|
||||
|
||||
&,
|
||||
&::after {
|
||||
border-radius: 0 1.6em 1.6em 0;
|
||||
border-radius: 0 @tag-round-border-radius @tag-round-border-radius 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--round {
|
||||
border-radius: @tag-round-border-radius;
|
||||
|
||||
&,
|
||||
&::after {
|
||||
border-radius: @tag-round-border-radius * 2;
|
||||
border-radius: @tag-round-border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
@ -81,4 +81,8 @@
|
||||
&--large {
|
||||
font-size: @tag-large-font-size;
|
||||
}
|
||||
|
||||
&__close {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import { inherit } from '../utils/functional';
|
||||
import { inherit, emit } from '../utils/functional';
|
||||
import { BORDER_SURROUND } from '../utils/constant';
|
||||
import Icon from '../icon';
|
||||
|
||||
// Types
|
||||
import { CreateElement, RenderContext } from 'vue/types';
|
||||
@ -18,6 +19,7 @@ export type TagProps = {
|
||||
plain?: boolean;
|
||||
round?: boolean;
|
||||
textColor?: string;
|
||||
closeable?: boolean;
|
||||
};
|
||||
|
||||
const [createComponent, bem] = createNamespace('tag');
|
||||
@ -42,18 +44,30 @@ function Tag(
|
||||
classes[size] = size;
|
||||
}
|
||||
|
||||
return (
|
||||
const Content = (
|
||||
<span
|
||||
style={style}
|
||||
class={[
|
||||
bem([classes, type]),
|
||||
{ [BORDER_SURROUND]: plain }
|
||||
]}
|
||||
class={[bem([classes, type]), { [BORDER_SURROUND]: plain }]}
|
||||
{...inherit(ctx, true)}
|
||||
>
|
||||
{slots.default && slots.default()}
|
||||
{props.closeable && (
|
||||
<Icon
|
||||
name="cross"
|
||||
class={bem('close')}
|
||||
onClick={() => {
|
||||
emit(ctx, 'close');
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
|
||||
if (props.closeable) {
|
||||
return <transition name="van-fade">{Content}</transition>;
|
||||
}
|
||||
|
||||
return Content;
|
||||
}
|
||||
|
||||
Tag.props = {
|
||||
@ -63,6 +77,7 @@ Tag.props = {
|
||||
plain: Boolean,
|
||||
round: Boolean,
|
||||
textColor: String,
|
||||
closeable: Boolean,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
|
||||
@ -3,10 +3,15 @@
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div><span class="van-tag van-tag--default">标签</span> <span class="van-tag van-tag--primary">标签</span> <span class="van-tag van-tag--success">标签</span> <span class="van-tag van-tag--danger">标签</span> <span class="van-tag van-tag--warning">标签</span></div>
|
||||
<div><span class="van-tag van-tag--plain van-tag--default van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--primary van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--success van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--danger van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--warning van-hairline--surround">标签</span></div>
|
||||
<div><span class="van-tag van-tag--round van-tag--default">标签</span> <span class="van-tag van-tag--round van-tag--primary">标签</span> <span class="van-tag van-tag--round van-tag--success">标签</span> <span class="van-tag van-tag--round van-tag--danger">标签</span> <span class="van-tag van-tag--round van-tag--warning">标签</span></div>
|
||||
<div><span class="van-tag van-tag--mark van-tag--default">标签</span> <span class="van-tag van-tag--mark van-tag--primary">标签</span> <span class="van-tag van-tag--mark van-tag--success">标签</span> <span class="van-tag van-tag--mark van-tag--danger">标签</span> <span class="van-tag van-tag--mark van-tag--warning">标签</span></div>
|
||||
<div><span class="van-tag van-tag--plain van-tag--default van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--primary van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--success van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--danger van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--warning van-hairline--surround">标签</span></div>
|
||||
<div><span class="van-tag van-tag--default" style="background-color: rgb(242, 130, 106);">标签</span> <span class="van-tag van-tag--plain van-tag--default van-hairline--surround" style="color: rgb(242, 130, 106);">标签</span> <span class="van-tag van-tag--default" style="background-color: rgb(114, 50, 221);">标签</span> <span class="van-tag van-tag--plain van-tag--default van-hairline--surround" style="color: rgb(114, 50, 221);">标签</span> <span class="van-tag van-tag--default" style="background-color: rgb(255, 225, 225); color: rgb(173, 0, 0);">标签</span></div>
|
||||
<div><span class="van-tag van-tag--danger">标签</span> <span class="van-tag van-tag--medium van-tag--danger">标签</span> <span class="van-tag van-tag--large van-tag--danger">标签</span></div>
|
||||
<div><span class="van-tag van-tag--success">标签</span> <span class="van-tag van-tag--medium van-tag--success">标签</span> <span class="van-tag van-tag--large van-tag--success">标签</span></div>
|
||||
<div><span class="van-tag van-tag--medium van-tag--primary" name="van-fade">
|
||||
标签
|
||||
<i class="van-icon van-icon-cross van-tag__close"><!----></i></span> <span class="van-tag van-tag--medium van-tag--success" name="van-fade">
|
||||
标签
|
||||
<i class="van-icon van-icon-cross van-tag__close"><!----></i></span></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -14,3 +14,20 @@ test('click event', () => {
|
||||
wrapper.trigger('click');
|
||||
expect(click).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test('close event', () => {
|
||||
const close = jest.fn();
|
||||
const wrapper = mount(Tag, {
|
||||
propsData: {
|
||||
closeable: true
|
||||
},
|
||||
context: {
|
||||
on: {
|
||||
close
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.find('.van-tag__close').trigger('click');
|
||||
expect(close).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user