mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Merge branch 'dev' into next
This commit is contained in:
chenjiahan
commit
e5368ed2f9
@ -20,69 +20,28 @@ Vue.use(Tag);
|
||||
<van-tag type="warning">Tag</van-tag>
|
||||
```
|
||||
|
||||
### Plain style
|
||||
|
||||
```html
|
||||
<van-tag plain type="primary">Tag</van-tag>
|
||||
```
|
||||
|
||||
### Round style
|
||||
|
||||
```html
|
||||
<van-tag round type="primary">Tag</van-tag>
|
||||
<van-tag round type="success">Tag</van-tag>
|
||||
<van-tag round type="danger">Tag</van-tag>
|
||||
<van-tag round type="warning">Tag</van-tag>
|
||||
```
|
||||
|
||||
### Mark style
|
||||
|
||||
```html
|
||||
<van-tag mark type="primary">Tag</van-tag>
|
||||
<van-tag mark type="success">Tag</van-tag>
|
||||
<van-tag mark type="danger">Tag</van-tag>
|
||||
<van-tag mark type="warning">Tag</van-tag>
|
||||
```
|
||||
|
||||
### Plain style
|
||||
|
||||
```html
|
||||
<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
|
||||
<van-tag color="#f2826a">Tag</van-tag>
|
||||
<van-tag color="#7232dd">Tag</van-tag>
|
||||
<van-tag color="#7232dd" plain>Tag</van-tag>
|
||||
<van-tag color="#ffe1e1" text-color="#ad0000">Tag</van-tag>
|
||||
```
|
||||
|
||||
### Custom Size
|
||||
|
||||
```html
|
||||
<van-tag type="danger">Tag</van-tag>
|
||||
<van-tag type="danger" size="medium">Tag</van-tag>
|
||||
<van-tag type="danger" size="large">Tag</van-tag>
|
||||
```
|
||||
|
||||
### Closeable
|
||||
|
||||
```html
|
||||
<van-tag
|
||||
closeable
|
||||
size="medium"
|
||||
type="primary"
|
||||
:show="show.primary"
|
||||
@close="close('primary')"
|
||||
>
|
||||
Tag
|
||||
</van-tag>
|
||||
<van-tag
|
||||
closeable
|
||||
size="medium"
|
||||
type="success"
|
||||
:show="show.success"
|
||||
@close="close('success')"
|
||||
>
|
||||
<van-tag :show="show" closeable size="medium" type="primary" @close="close">
|
||||
Tag
|
||||
</van-tag>
|
||||
```
|
||||
@ -91,20 +50,33 @@ Vue.use(Tag);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: {
|
||||
primary: true,
|
||||
success: true,
|
||||
},
|
||||
show: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
close(type) {
|
||||
this.show[type] = false;
|
||||
close() {
|
||||
this.show = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Custom Size
|
||||
|
||||
```html
|
||||
<van-tag type="primary">Tag</van-tag>
|
||||
<van-tag type="primary" size="medium">Tag</van-tag>
|
||||
<van-tag type="primary" size="large">Tag</van-tag>
|
||||
```
|
||||
|
||||
### Custom Color
|
||||
|
||||
```html
|
||||
<van-tag color="#7232dd">Tag</van-tag>
|
||||
<van-tag color="#ffe1e1" text-color="#ad0000">Tag</van-tag>
|
||||
<van-tag color="#7232dd" plain>Tag</van-tag>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
@ -22,15 +22,20 @@ Vue.use(Tag);
|
||||
<van-tag type="warning">标签</van-tag>
|
||||
```
|
||||
|
||||
### 空心样式
|
||||
|
||||
设置 `plain` 属性设置为空心样式。
|
||||
|
||||
```html
|
||||
<van-tag plain type="primary">标签</van-tag>
|
||||
```
|
||||
|
||||
### 圆角样式
|
||||
|
||||
通过 `round` 设置为圆角样式。
|
||||
|
||||
```html
|
||||
<van-tag round type="primary">标签</van-tag>
|
||||
<van-tag round type="success">标签</van-tag>
|
||||
<van-tag round type="danger">标签</van-tag>
|
||||
<van-tag round type="warning">标签</van-tag>
|
||||
```
|
||||
|
||||
### 标记样式
|
||||
@ -39,37 +44,6 @@ Vue.use(Tag);
|
||||
|
||||
```html
|
||||
<van-tag mark type="primary">标签</van-tag>
|
||||
<van-tag mark type="success">标签</van-tag>
|
||||
<van-tag mark type="danger">标签</van-tag>
|
||||
<van-tag mark type="warning">标签</van-tag>
|
||||
```
|
||||
|
||||
### 空心样式
|
||||
|
||||
设置 `plain` 属性设置为空心样式。
|
||||
|
||||
```html
|
||||
<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
|
||||
<van-tag color="#f2826a">标签</van-tag>
|
||||
<van-tag color="#7232dd">标签</van-tag>
|
||||
<van-tag color="#7232dd" plain>标签</van-tag>
|
||||
<van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>
|
||||
```
|
||||
|
||||
### 标签大小
|
||||
|
||||
```html
|
||||
<van-tag type="danger">标签</van-tag>
|
||||
<van-tag type="danger" size="medium">标签</van-tag>
|
||||
<van-tag type="danger" size="large">标签</van-tag>
|
||||
```
|
||||
|
||||
### 可关闭标签
|
||||
@ -77,22 +51,7 @@ Vue.use(Tag);
|
||||
添加 `closeable` 属性表示标签是可关闭的，关闭标签时会触发 `close` 事件，在 `close` 事件中可以执行隐藏标签的逻辑。
|
||||
|
||||
```html
|
||||
<van-tag
|
||||
closeable
|
||||
size="medium"
|
||||
type="primary"
|
||||
:show="show.primary"
|
||||
@close="close('primary')"
|
||||
>
|
||||
标签
|
||||
</van-tag>
|
||||
<van-tag
|
||||
closeable
|
||||
size="medium"
|
||||
type="success"
|
||||
:show="show.success"
|
||||
@close="close('success')"
|
||||
>
|
||||
<van-tag :show="show" closeable size="medium" type="primary" @close="close">
|
||||
标签
|
||||
</van-tag>
|
||||
```
|
||||
@ -101,20 +60,37 @@ Vue.use(Tag);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: {
|
||||
primary: true,
|
||||
success: true,
|
||||
},
|
||||
show: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
close(type) {
|
||||
this.show[type] = false;
|
||||
close() {
|
||||
this.show = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 标签大小
|
||||
|
||||
通过 `size` 属性调整标签大小。
|
||||
|
||||
```html
|
||||
<van-tag type="primary">标签</van-tag>
|
||||
<van-tag type="primary" size="medium">标签</van-tag>
|
||||
<van-tag type="primary" size="large">标签</van-tag>
|
||||
```
|
||||
|
||||
### 自定义颜色
|
||||
|
||||
通过 `color` 和 `text-color` 属性设置标签颜色。
|
||||
|
||||
```html
|
||||
<van-tag color="#7232dd">标签</van-tag>
|
||||
<van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>
|
||||
<van-tag color="#7232dd" plain>标签</van-tag>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
@ -1,65 +1,65 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-tag type="primary">{{ t('tag') }}</van-tag>
|
||||
<van-tag type="success">{{ t('tag') }}</van-tag>
|
||||
<van-tag type="danger">{{ t('tag') }}</van-tag>
|
||||
<van-tag type="warning">{{ t('tag') }}</van-tag>
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-cell :title="`primary ${t('type')}`">
|
||||
<van-tag type="primary">{{ t('tag') }}</van-tag>
|
||||
</van-cell>
|
||||
<van-cell :title="`success ${t('type')}`">
|
||||
<van-tag type="success">{{ t('tag') }}</van-tag>
|
||||
</van-cell>
|
||||
<van-cell :title="`danger ${t('type')}`">
|
||||
<van-tag type="danger">{{ t('tag') }}</van-tag>
|
||||
</van-cell>
|
||||
<van-cell :title="`warning ${t('type')}`">
|
||||
<van-tag type="warning">{{ t('tag') }}</van-tag>
|
||||
</van-cell>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('round')">
|
||||
<van-tag round type="primary">{{ t('tag') }}</van-tag>
|
||||
<van-tag round type="success">{{ t('tag') }}</van-tag>
|
||||
<van-tag round type="danger">{{ t('tag') }}</van-tag>
|
||||
<van-tag round type="warning">{{ t('tag') }}</van-tag>
|
||||
<demo-block card :title="t('tagStyle')">
|
||||
<van-cell :title="t('plain')">
|
||||
<van-tag plain type="primary">{{ t('tag') }}</van-tag>
|
||||
</van-cell>
|
||||
<van-cell :title="t('round')">
|
||||
<van-tag round type="primary">{{ t('tag') }}</van-tag>
|
||||
</van-cell>
|
||||
<van-cell :title="t('mark')">
|
||||
<van-tag mark type="primary">{{ t('tag') }}</van-tag>
|
||||
</van-cell>
|
||||
<van-cell :title="t('closeable')">
|
||||
<van-tag
|
||||
closeable
|
||||
:show="show"
|
||||
size="medium"
|
||||
type="primary"
|
||||
@close="close"
|
||||
>
|
||||
{{ t('tag') }}
|
||||
</van-tag>
|
||||
</van-cell>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('mark')">
|
||||
<van-tag mark type="primary">{{ t('tag') }}</van-tag>
|
||||
<van-tag mark type="success">{{ t('tag') }}</van-tag>
|
||||
<van-tag mark type="danger">{{ t('tag') }}</van-tag>
|
||||
<van-tag mark type="warning">{{ t('tag') }}</van-tag>
|
||||
<demo-block card :title="t('customSize')">
|
||||
<van-cell :title="t('smallSize')">
|
||||
<van-tag type="primary">{{ t('tag') }}</van-tag>
|
||||
</van-cell>
|
||||
<van-cell :title="t('mediumSize')">
|
||||
<van-tag type="primary" size="medium">{{ t('tag') }}</van-tag>
|
||||
</van-cell>
|
||||
<van-cell :title="t('largeSize')">
|
||||
<van-tag type="primary" size="large">{{ t('tag') }}</van-tag>
|
||||
</van-cell>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('plain')">
|
||||
<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="#7232dd">{{ t('tag') }}</van-tag>
|
||||
<van-tag color="#7232dd" plain>{{ t('tag') }}</van-tag>
|
||||
<van-tag color="#ffe1e1" text-color="#ad0000">{{ t('tag') }}</van-tag>
|
||||
</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>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('closeable')">
|
||||
<van-tag
|
||||
size="medium"
|
||||
:show="show.primary"
|
||||
closeable
|
||||
type="primary"
|
||||
@close="close('primary')"
|
||||
>
|
||||
{{ t('tag') }}
|
||||
</van-tag>
|
||||
<van-tag
|
||||
size="medium"
|
||||
:show="show.success"
|
||||
closeable
|
||||
type="success"
|
||||
@close="close('success')"
|
||||
>
|
||||
{{ t('tag') }}
|
||||
</van-tag>
|
||||
<demo-block card :title="t('customColor')">
|
||||
<van-cell :title="t('customBgColor')">
|
||||
<van-tag color="#7232dd">{{ t('tag') }}</van-tag>
|
||||
</van-cell>
|
||||
<van-cell :title="t('customTextColor')">
|
||||
<van-tag color="#ffe1e1" text-color="#ad0000">{{ t('tag') }}</van-tag>
|
||||
</van-cell>
|
||||
<van-cell :title="t('customPlainColor')">
|
||||
<van-tag color="#7232dd" plain>{{ t('tag') }}</van-tag>
|
||||
</van-cell>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
@ -68,35 +68,47 @@
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
type: '类型',
|
||||
mark: '标记样式',
|
||||
plain: '空心样式',
|
||||
round: '圆角样式',
|
||||
mark: '标记样式',
|
||||
tagStyle: '样式风格',
|
||||
closeable: '可关闭标签',
|
||||
customColor: '自定义颜色',
|
||||
smallSize: '小号标签',
|
||||
largeSize: '大号标签',
|
||||
mediumSize: '中号标签',
|
||||
customSize: '标签大小',
|
||||
customColor: '自定义颜色',
|
||||
customBgColor: '背景颜色',
|
||||
customTextColor: '文字颜色',
|
||||
customPlainColor: '空心颜色',
|
||||
},
|
||||
'en-US': {
|
||||
mark: 'Mark style',
|
||||
plain: 'Plain style',
|
||||
round: 'Round style',
|
||||
mark: 'Mark style',
|
||||
tagStyle: 'Tag Style',
|
||||
closeable: 'Closeable',
|
||||
smallSize: 'Small Size',
|
||||
largeSize: 'Large Size',
|
||||
mediumSize: 'Medium Size',
|
||||
customColor: 'Custom Color',
|
||||
customSize: 'Custom Size',
|
||||
customBgColor: 'Background Color',
|
||||
customTextColor: 'Text Color',
|
||||
customPlainColor: 'Plain Color',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
show: {
|
||||
primary: true,
|
||||
success: true,
|
||||
},
|
||||
show: true,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
close(tag) {
|
||||
this.show[tag] = false;
|
||||
close() {
|
||||
this.show = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -106,14 +118,6 @@ export default {
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-tag {
|
||||
background-color: @white;
|
||||
|
||||
.van-tag {
|
||||
&:first-of-type {
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
}
|
||||
|
||||
.van-tag + .van-tag {
|
||||
margin-left: @padding-xs;
|
||||
}
|
||||
|
||||
@ -2,16 +2,71 @@
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div><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--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--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--primary">标签</span> <span class="van-tag van-tag--plain van-tag--success">标签</span> <span class="van-tag van-tag--plain van-tag--danger">标签</span> <span class="van-tag van-tag--plain van-tag--warning">标签</span></div>
|
||||
<div><span class="van-tag van-tag--default" style="background-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" 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--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>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>primary 类型</span></div>
|
||||
<div class="van-cell__value"><span class="van-tag van-tag--primary">标签</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>success 类型</span></div>
|
||||
<div class="van-cell__value"><span class="van-tag van-tag--success">标签</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>danger 类型</span></div>
|
||||
<div class="van-cell__value"><span class="van-tag van-tag--danger">标签</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>warning 类型</span></div>
|
||||
<div class="van-cell__value"><span class="van-tag van-tag--warning">标签</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>空心样式</span></div>
|
||||
<div class="van-cell__value"><span class="van-tag van-tag--plain van-tag--primary">标签</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>圆角样式</span></div>
|
||||
<div class="van-cell__value"><span class="van-tag van-tag--round van-tag--primary">标签</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>标记样式</span></div>
|
||||
<div class="van-cell__value"><span class="van-tag van-tag--mark van-tag--primary">标签</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>可关闭标签</span></div>
|
||||
<div class="van-cell__value"><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></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>小号标签</span></div>
|
||||
<div class="van-cell__value"><span class="van-tag van-tag--primary">标签</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>中号标签</span></div>
|
||||
<div class="van-cell__value"><span class="van-tag van-tag--medium van-tag--primary">标签</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>大号标签</span></div>
|
||||
<div class="van-cell__value"><span class="van-tag van-tag--large van-tag--primary">标签</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-cell">
|
||||
<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>
|
||||
<div class="van-cell">
|
||||
<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>
|
||||
<div class="van-cell">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user