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

Merge branch 'dev' into next

Browse Source
This commit is contained in:
chenjiahan 2020-08-19 17:20:53 +08:00
commit e5368ed2f9
4 changed files with 199 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/tag/README.md
View File

@ -20,69 +20,28 @@ Vue.use(Tag);
<van-tag type="warning">Tag</van-tag> <van-tag type="warning">Tag</van-tag>
``` ```
### Plain style
```html
<van-tag plain type="primary">Tag</van-tag>
```
### Round style ### Round style
```html ```html
<van-tag round type="primary">Tag</van-tag> <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 ### Mark style
```html ```html
<van-tag mark type="primary">Tag</van-tag> <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 ### Closeable
```html ```html
<van-tag <van-tag :show="show" closeable size="medium" type="primary" @close="close">
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')"
>
Tag Tag
</van-tag> </van-tag>
``` ```
@ -91,20 +50,33 @@ Vue.use(Tag);
export default { export default {
data() { data() {
return { return {
show: { show: true,
primary: true,
success: true,
},
}; };
}, },
methods: { methods: {
close(type) { close() {
this.show[type] = false; 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 ## API
### Props ### Props

88
src/tag/README.zh-CN.md
View File

@ -22,15 +22,20 @@ Vue.use(Tag);
<van-tag type="warning">标签</van-tag> <van-tag type="warning">标签</van-tag>
``` ```
### 空心样式
设置 `plain` 属性设置为空心样式。
```html
<van-tag plain type="primary">标签</van-tag>
```
### 圆角样式 ### 圆角样式
通过 `round` 设置为圆角样式。 通过 `round` 设置为圆角样式。
```html ```html
<van-tag round type="primary">标签</van-tag> <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 ```html
<van-tag mark type="primary">标签</van-tag> <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` 事件中可以执行隐藏标签的逻辑。 添加 `closeable` 属性表示标签是可关闭的，关闭标签时会触发 `close` 事件，在 `close` 事件中可以执行隐藏标签的逻辑。
```html ```html
<van-tag <van-tag :show="show" closeable size="medium" type="primary" @close="close">
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> </van-tag>
``` ```
@ -101,20 +60,37 @@ Vue.use(Tag);
export default { export default {
data() { data() {
return { return {
show: { show: true,
primary: true,
success: true,
},
}; };
}, },
methods: { methods: {
close(type) { close() {
this.show[type] = false; 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 ## API
### Props ### Props

146
src/tag/demo/index.vue
View File

@ -1,65 +1,65 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="t('basicUsage')"> <demo-block card :title="t('basicUsage')">
<van-tag type="primary">{{ t('tag') }}</van-tag> <van-cell :title="`primary ${t('type')}`">
<van-tag type="success">{{ t('tag') }}</van-tag> <van-tag type="primary">{{ t('tag') }}</van-tag>
<van-tag type="danger">{{ t('tag') }}</van-tag> </van-cell>
<van-tag type="warning">{{ t('tag') }}</van-tag> <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>
<demo-block :title="t('round')"> <demo-block card :title="t('tagStyle')">
<van-tag round type="primary">{{ t('tag') }}</van-tag> <van-cell :title="t('plain')">
<van-tag round type="success">{{ t('tag') }}</van-tag> <van-tag plain type="primary">{{ t('tag') }}</van-tag>
<van-tag round type="danger">{{ t('tag') }}</van-tag> </van-cell>
<van-tag round type="warning">{{ t('tag') }}</van-tag> <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>
<demo-block :title="t('mark')"> <demo-block card :title="t('customSize')">
<van-tag mark type="primary">{{ t('tag') }}</van-tag> <van-cell :title="t('smallSize')">
<van-tag mark type="success">{{ t('tag') }}</van-tag> <van-tag type="primary">{{ t('tag') }}</van-tag>
<van-tag mark type="danger">{{ t('tag') }}</van-tag> </van-cell>
<van-tag mark type="warning">{{ t('tag') }}</van-tag> <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>
<demo-block :title="t('plain')"> <demo-block card :title="t('customColor')">
<van-tag plain type="primary">{{ t('tag') }}</van-tag> <van-cell :title="t('customBgColor')">
<van-tag plain type="success">{{ t('tag') }}</van-tag> <van-tag color="#7232dd">{{ t('tag') }}</van-tag>
<van-tag plain type="danger">{{ t('tag') }}</van-tag> </van-cell>
<van-tag plain type="warning">{{ t('tag') }}</van-tag> <van-cell :title="t('customTextColor')">
</demo-block> <van-tag color="#ffe1e1" text-color="#ad0000">{{ t('tag') }}</van-tag>
</van-cell>
<demo-block :title="t('customColor')"> <van-cell :title="t('customPlainColor')">
<van-tag color="#f2826a">{{ t('tag') }}</van-tag> <van-tag color="#7232dd" plain>{{ t('tag') }}</van-tag>
<van-tag color="#7232dd">{{ t('tag') }}</van-tag> </van-cell>
<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> </demo-block>
</demo-section> </demo-section>
</template> </template>
@ -68,35 +68,47 @@
export default { export default {
i18n: { i18n: {
'zh-CN': { 'zh-CN': {
type: '类型',
mark: '标记样式',
plain: '空心样式', plain: '空心样式',
round: '圆角样式', round: '圆角样式',
mark: '标记样式', tagStyle: '样式风格',
closeable: '可关闭标签', closeable: '可关闭标签',
customColor: '自定义颜色', smallSize: '小号标签',
largeSize: '大号标签',
mediumSize: '中号标签',
customSize: '标签大小', customSize: '标签大小',
customColor: '自定义颜色',
customBgColor: '背景颜色',
customTextColor: '文字颜色',
customPlainColor: '空心颜色',
}, },
'en-US': { 'en-US': {
mark: 'Mark style',
plain: 'Plain style', plain: 'Plain style',
round: 'Round style', round: 'Round style',
mark: 'Mark style', tagStyle: 'Tag Style',
closeable: 'Closeable', closeable: 'Closeable',
smallSize: 'Small Size',
largeSize: 'Large Size',
mediumSize: 'Medium Size',
customColor: 'Custom Color', customColor: 'Custom Color',
customSize: 'Custom Size', customSize: 'Custom Size',
customBgColor: 'Background Color',
customTextColor: 'Text Color',
customPlainColor: 'Plain Color',
}, },
}, },
data() { data() {
return { return {
show: { show: true,
primary: true,
success: true,
},
}; };
}, },
methods: { methods: {
close(tag) { close() {
this.show[tag] = false; this.show = false;
}, },
}, },
}; };
@ -106,14 +118,6 @@ export default {
@import '../../style/var'; @import '../../style/var';
.demo-tag { .demo-tag {
background-color: @white;
.van-tag {
&:first-of-type {
margin-left: @padding-md;
}
}
.van-tag + .van-tag { .van-tag + .van-tag {
margin-left: @padding-xs; margin-left: @padding-xs;
} }

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

@ -2,16 +2,71 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <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>
<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 class="van-cell">
<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 class="van-cell__title"><span>primary 类型</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 class="van-cell__value"><span class="van-tag van-tag--primary">标签</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>
<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 class="van-cell">
<div><span class="van-tag van-tag--medium van-tag--primary" name="van-fade"> <div class="van-cell__title"><span>success 类型</span></div>
标签 <div class="van-cell__value"><span class="van-tag van-tag--success">标签</span></div>
<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"> </div>
标签 <div class="van-cell">
<i class="van-icon van-icon-cross van-tag__close"><!----></i></span></div> <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> </div>
`; `;