Skip to content

Commit c133507

Browse files
SimonaliaChenlzq4047
SimonaliaChen
authored and
lzq4047
committed
feat(Tag): add prop effect. (ElemeFE#15725)
1 parent 2f39485 commit c133507

File tree

10 files changed

+352
-120
lines changed

10 files changed

+352
-120
lines changed

‎examples/demo-styles/tag.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,33 @@
22
.el-tag + .el-tag {
33
margin-left: 10px;
44
}
5+
56
.button-new-tag {
67
margin-left: 10px;
78
height: 32px;
89
line-height: 30px;
910
padding-top: 0;
1011
padding-bottom: 0;
1112
}
13+
1214
.input-new-tag {
1315
width: 90px;
1416
margin-left: 10px;
1517
vertical-align: bottom;
1618
}
19+
20+
.tag-group {
21+
display: flex;
22+
align-items: center;
23+
24+
&__title {
25+
width: 45px;
26+
font-size: 14px;
27+
color: #606266;
28+
}
29+
30+
&+.tag-group {
31+
margin-top: 10px;
32+
}
33+
}
1734
}

‎examples/docs/en-US/tag.md

Lines changed: 54 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ Used for marking and selection.
77
:::demo Use the `type` attribute to define Tag's type. In addition, the `color` attribute can be used to set the background color of the Tag.
88

99
```html
10-
<el-tag>Tag One</el-tag>
11-
<el-tag type="success">Tag Two</el-tag>
12-
<el-tag type="info">Tag Three</el-tag>
13-
<el-tag type="warning">Tag Four</el-tag>
14-
<el-tag type="danger">Tag Five</el-tag>
10+
<el-tag>Tag 1</el-tag>
11+
<el-tag type="success">Tag 2</el-tag>
12+
<el-tag type="info">Tag 3</el-tag>
13+
<el-tag type="warning">Tag 4</el-tag>
14+
<el-tag type="danger">Tag 5</el-tag>
1515
```
1616
:::
1717

@@ -139,19 +139,66 @@ Besides default size, Tag component provides three additional sizes for you to c
139139
```
140140
:::
141141

142+
143+
### Theme
144+
145+
Tag provide three different themes: `dark`、`light` and `plain`
146+
147+
:::demo Using `effect` to change, default is `light`
148+
```html
149+
<div class="tag-group">
150+
<span class="tag-group__title">Dark</span>
151+
<el-tag
152+
v-for="item in items"
153+
:key="item.label"
154+
:type="item.type"
155+
effect="dark">
156+
{{ item.label }}
157+
</el-tag>
158+
</div>
159+
<div class="tag-group">
160+
<span class="tag-group__title">Plain</span>
161+
<el-tag
162+
v-for="item in items"
163+
:key="item.label"
164+
:type="item.type"
165+
effect="plain">
166+
{{ item.label }}
167+
</el-tag>
168+
</div>
169+
170+
<script>
171+
export default {
172+
data() {
173+
return {
174+
items: [
175+
{ type: '', label: 'Tag 1' },
176+
{ type: 'success', label: 'Tag 2' },
177+
{ type: 'info', label: 'Tag 3' },
178+
{ type: 'danger', label: 'Tag 4' },
179+
{ type: 'warning', label: 'Tag 5' }
180+
]
181+
}
182+
}
183+
}
184+
</script>
185+
```
186+
:::
187+
142188
### Attributes
143189
| Attribute | Description | Type | Accepted Values | Default |
144190
|---------- |-------------- |---------- |-------------------------------- |-------- |
145-
| type | theme | string | success/info/warning/danger | — |
191+
| type | component type | string | success/info/warning/danger | — |
146192
| closable | whether Tag can be removed | boolean | — | false |
147193
| disable-transitions | whether to disable animations | boolean | — | false |
148194
| hit | whether Tag has a highlighted border | boolean | — | false |
149195
| color | background color of the Tag | string | — | — |
150196
| size | tag size | string | medium / small / mini | — |
197+
| effect | component theme | string | dark / light / plain | light |
151198

152199

153200
### Events
154201
| Event Name | Description | Parameters |
155202
|---------- |-------- |---------- |
156203
| click | triggers when Tag is clicked | — |
157-
| close | triggers when Tag is removed | — |
204+
| close | triggers when Tag is removed | — |

‎examples/docs/es/tag.md

Lines changed: 53 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ Se utiliza para marcar y seleccionar.
77
:::demo Utilice el atributo `type` para definir el tipo de etiqueta. Además, el atributo `color` se puede utilizar para establecer el color de fondo de la etiqueta.
88

99
```html
10-
<el-tag>Tag One</el-tag>
11-
<el-tag type="success">Tag Two</el-tag>
12-
<el-tag type="info">Tag Three</el-tag>
13-
<el-tag type="warning">Tag Four</el-tag>
14-
<el-tag type="danger">Tag Five</el-tag>
10+
<el-tag>Tag 1</el-tag>
11+
<el-tag type="success">Tag 2</el-tag>
12+
<el-tag type="info">Tag 3</el-tag>
13+
<el-tag type="warning">Tag 4</el-tag>
14+
<el-tag type="danger">Tag 5</el-tag>
1515
```
1616
:::
1717

@@ -139,19 +139,65 @@ Además del tamaño predeterminado, el componente Tag proporciona tres tamaños
139139
```
140140
:::
141141

142+
### Theme
143+
144+
Tag provide three different themes: `dark`、`light` and `plain`
145+
146+
:::demo Using `effect` to change, default is `light`
147+
```html
148+
<div class="tag-group">
149+
<span class="tag-group__title">Dark</span>
150+
<el-tag
151+
v-for="item in items"
152+
:key="item.label"
153+
:type="item.type"
154+
effect="dark">
155+
{{ item.label }}
156+
</el-tag>
157+
</div>
158+
<div class="tag-group">
159+
<span class="tag-group__title">Plain</span>
160+
<el-tag
161+
v-for="item in items"
162+
:key="item.label"
163+
:type="item.type"
164+
effect="plain">
165+
{{ item.label }}
166+
</el-tag>
167+
</div>
168+
169+
<script>
170+
export default {
171+
data() {
172+
return {
173+
items: [
174+
{ type: '', label: 'Tag 1' },
175+
{ type: 'success', label: 'Tag 2' },
176+
{ type: 'info', label: 'Tag 3' },
177+
{ type: 'danger', label: 'Tag 4' },
178+
{ type: 'warning', label: 'Tag 5' }
179+
]
180+
}
181+
}
182+
}
183+
</script>
184+
```
185+
:::
186+
142187
### Atributos
143188
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
144189
| ------------------- | ----------------------------------- | ------- | --------------------------- | ----------- |
145-
| type | tema | string | success/info/warning/danger | — |
190+
| type | component type | string | success/info/warning/danger | — |
146191
| closable | si el Tag puede ser removido | boolean | — | false |
147192
| disable-transitions | si se deshabilitan las animaciones | boolean | — | false |
148193
| hit | si el Tag tiene un borde resaltado | boolean | — | false |
149194
| color | color de fondo del Tag | string | — | — |
150195
| size | tamaño del Tag | string | medium / small / mini | — |
196+
| effect | component theme | string | dark / light / plain | light |
151197

152198

153199
### Eventos
154200
| Nombre | Descripción | Parametros |
155201
| ------ | ------------------------------------ | ---------- |
156202
| click | se dispara cuando el Tag es clic | — |
157-
| close | se dispara cuando el Tag es removido | — |
203+
| close | se dispara cuando el Tag es removido | — |

‎examples/docs/fr-FR/tag.md

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,51 @@ En plus de la taille par défaut, Tag fournit d'autres tailles pour vos composan
139139
```
140140
:::
141141

142+
### Theme
143+
144+
Tag provide three different themes: `dark`、`light` and `plain`
145+
146+
:::demo Using `effect` to change, default is `light`
147+
```html
148+
<div class="tag-group">
149+
<span class="tag-group__title">Dark</span>
150+
<el-tag
151+
v-for="item in items"
152+
:key="item.label"
153+
:type="item.type"
154+
effect="dark">
155+
{{ item.label }}
156+
</el-tag>
157+
</div>
158+
<div class="tag-group">
159+
<span class="tag-group__title">Plain</span>
160+
<el-tag
161+
v-for="item in items"
162+
:key="item.label"
163+
:type="item.type"
164+
effect="plain">
165+
{{ item.label }}
166+
</el-tag>
167+
</div>
168+
169+
<script>
170+
export default {
171+
data() {
172+
return {
173+
items: [
174+
{ type: '', label: 'Tag 1' },
175+
{ type: 'success', label: 'Tag 2' },
176+
{ type: 'info', label: 'Tag 3' },
177+
{ type: 'danger', label: 'Tag 4' },
178+
{ type: 'warning', label: 'Tag 5' }
179+
]
180+
}
181+
}
182+
}
183+
</script>
184+
```
185+
:::
186+
142187
### Attributs
143188

144189
| Attribut | Description | Type | Valeurs acceptées | Défaut |
@@ -149,6 +194,7 @@ En plus de la taille par défaut, Tag fournit d'autres tailles pour vos composan
149194
| hit | Si le tag à une bordure mise en valeur. | boolean | — | false |
150195
| color | Couleur de fond du tag. | string | — | — |
151196
| size | Taille du tag. | string | medium / small / mini | — |
197+
| effect | component theme | string | dark / light / plain | light |
152198

153199
### Évènements
154200

‎examples/docs/zh-CN/tag.md

Lines changed: 48 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -139,19 +139,65 @@ Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下
139139
```
140140
:::
141141

142+
### 不同主题
143+
144+
Tag 组件提供了三个不同的主题：`dark`、`light` 和 `plain`
145+
146+
:::demo 通过设置`effect`属性来改变主题，默认为 `light`
147+
```html
148+
<div class="tag-group">
149+
<span class="tag-group__title">Dark</span>
150+
<el-tag
151+
v-for="item in items"
152+
:key="item.label"
153+
:type="item.type"
154+
effect="dark">
155+
{{ item.label }}
156+
</el-tag>
157+
</div>
158+
<div class="tag-group">
159+
<span class="tag-group__title">Plain</span>
160+
<el-tag
161+
v-for="item in items"
162+
:key="item.label"
163+
:type="item.type"
164+
effect="plain">
165+
{{ item.label }}
166+
</el-tag>
167+
</div>
168+
169+
<script>
170+
export default {
171+
data() {
172+
return {
173+
items: [
174+
{ type: '', label: '标签一' },
175+
{ type: 'success', label: '标签二' },
176+
{ type: 'info', label: '标签三' },
177+
{ type: 'danger', label: '标签四' },
178+
{ type: 'warning', label: '标签五' }
179+
]
180+
}
181+
}
182+
}
183+
</script>
184+
```
185+
:::
186+
142187
### Attributes
143188
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
144189
|---------- |-------------- |---------- |-------------------------------- |-------- |
145-
| type | 主题 | string | success/info/warning/danger | — |
190+
| type | 类型 | string | success/info/warning/danger | — |
146191
| closable | 是否可关闭 | boolean | — | false |
147192
| disable-transitions | 是否禁用渐变动画 | boolean | — | false |
148193
| hit | 是否有边框描边 | boolean | — | false |
149194
| color | 背景色 | string | — | — |
150195
| size | 尺寸 | string | medium / small / mini | — |
196+
| effect | 主题 | string | dark / light / plain | light |
151197

152198

153199
### Events
154200
| 事件名称 | 说明 | 回调参数 |
155201
|---------- |-------- |---------- |
156202
| click | 点击 Tag 时触发的事件 | — |
157-
| close | 关闭 Tag 时触发的事件 | — |
203+
| close | 关闭 Tag 时触发的事件 | — |

‎packages/tag/src/tag.vue

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,14 @@
88
hit: Boolean,
99
disableTransitions: Boolean,
1010
color: String,
11-
size: String
11+
size: String,
12+
effect: {
13+
type: String,
14+
default: 'light',
15+
validator(val) {
16+
return ['dark', 'light', 'plain'].includes(val);
17+
}
18+
}
1219
},
1320
methods: {
1421
handleClose(event) {
@@ -26,16 +33,25 @@
2633
}
2734
},
2835
render(h) {
29-
const classes = [ 'el-tag', this.type ? `el-tag--${this.type}` : '',
30-
this.tagSize ? `el-tag--${this.tagSize}` : '',
31-
{'is-hit': this.hit}
36+
const { type, tagSize, hit, effect } = this;
37+
const classes = [
38+
'el-tag',
39+
type ? `el-tag--${type}` : '',
40+
tagSize ? `el-tag--${tagSize}` : '',
41+
effect ? `el-tag--${effect}` : '',
42+
hit && 'is-hit'
3243
];
33-
const tagEl = (<span class={classes} style={{backgroundColor: this.color}} on-click={this.handleClick}>
34-
{ this.$slots.default }
35-
{
36-
this.closable && <i class="el-tag__close el-icon-close" on-click={this.handleClose}></i>
37-
}
38-
</span>);
44+
const tagEl = (
45+
<span
46+
class={ classes }
47+
style={{ backgroundColor: this.color }}
48+
on-click={ this.handleClick }>
49+
{ this.$slots.default }
50+
{
51+
this.closable && <i class="el-tag__close el-icon-close" on-click={ this.handleClose }></i>
52+
}
53+
</span>
54+
);
3955
4056
return this.disableTransitions ? tagEl : <transition name="el-zoom-in-center">{ tagEl }</transition>;
4157
}

0 commit comments

Comments
 (0)