feat(Tag): add prop effect. (ElemeFE#15725)

lzq4047 · May 22, 2020 · c133507 · c133507
1 parent 2f39485
commit c133507
Show file tree

Hide file tree

Showing 10 changed files with 352 additions and 120 deletions.
diff --git a/examples/demo-styles/tag.scss b/examples/demo-styles/tag.scss
@@ -2,16 +2,33 @@
   .el-tag + .el-tag {
     margin-left: 10px;
   }
+
   .button-new-tag {
     margin-left: 10px;
     height: 32px;
     line-height: 30px;
     padding-top: 0;
     padding-bottom: 0;
   }
+
   .input-new-tag {
     width: 90px;
     margin-left: 10px;
     vertical-align: bottom;
   }
+
+  .tag-group {
+    display: flex;
+    align-items: center;
+
+    &__title {
+      width: 45px;
+      font-size: 14px;
+      color: #606266;
+    }
+
+    &+.tag-group  {
+      margin-top: 10px;
+    }
+  }
 }
diff --git a/examples/docs/en-US/tag.md b/examples/docs/en-US/tag.md
@@ -7,11 +7,11 @@ Used for marking and selection.
 :::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.
 
 ```html
-<el-tag>Tag One</el-tag>
-<el-tag type="success">Tag Two</el-tag>
-<el-tag type="info">Tag Three</el-tag>
-<el-tag type="warning">Tag Four</el-tag>
-<el-tag type="danger">Tag Five</el-tag>
+<el-tag>Tag 1</el-tag>
+<el-tag type="success">Tag 2</el-tag>
+<el-tag type="info">Tag 3</el-tag>
+<el-tag type="warning">Tag 4</el-tag>
+<el-tag type="danger">Tag 5</el-tag>
 ```
 :::
 
@@ -139,19 +139,66 @@ Besides default size, Tag component provides three additional sizes for you to c
 ```
 :::
 
+
+### Theme
+
+Tag provide three different themes: `dark`、`light` and `plain`
+
+:::demo Using `effect` to change, default is `light`
+```html
+<div class="tag-group">
+  <span class="tag-group__title">Dark</span>
+  <el-tag
+    v-for="item in items"
+    :key="item.label"
+    :type="item.type"
+    effect="dark">
+    {{ item.label }}
+  </el-tag>
+</div>
+<div class="tag-group">
+  <span class="tag-group__title">Plain</span>
+  <el-tag
+    v-for="item in items"
+    :key="item.label"
+    :type="item.type"
+    effect="plain">
+    {{ item.label }}
+  </el-tag>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        items: [
+          { type: '', label: 'Tag 1' },
+          { type: 'success', label: 'Tag 2' },
+          { type: 'info', label: 'Tag 3' },
+          { type: 'danger', label: 'Tag 4' },
+          { type: 'warning', label: 'Tag 5' }
+        ]
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| type | theme | string | success/info/warning/danger | — |
+| type | component type | string | success/info/warning/danger | — |
 | closable | whether Tag can be removed | boolean | — | false |
 | disable-transitions | whether to disable animations | boolean | — | false |
 | hit | whether Tag has a highlighted border | boolean | — | false |
 | color | background color of the Tag | string | — | — |
 | size | tag size | string | medium / small / mini | — |
+| effect | component theme | string | dark / light / plain | light |
 
 
 ### Events
 | Event Name | Description | Parameters |
 |---------- |-------- |---------- |
 | click | triggers when Tag is clicked | — |
-| close | triggers when Tag is removed | — |
+| close | triggers when Tag is removed | — |
diff --git a/examples/docs/es/tag.md b/examples/docs/es/tag.md
@@ -7,11 +7,11 @@ Se utiliza para marcar y seleccionar.
 :::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.
 
 ```html
-<el-tag>Tag One</el-tag>
-<el-tag type="success">Tag Two</el-tag>
-<el-tag type="info">Tag Three</el-tag>
-<el-tag type="warning">Tag Four</el-tag>
-<el-tag type="danger">Tag Five</el-tag>
+<el-tag>Tag 1</el-tag>
+<el-tag type="success">Tag 2</el-tag>
+<el-tag type="info">Tag 3</el-tag>
+<el-tag type="warning">Tag 4</el-tag>
+<el-tag type="danger">Tag 5</el-tag>
 ```
 :::
 
@@ -139,19 +139,65 @@ Además del tamaño predeterminado, el componente Tag proporciona tres tamaños
 ```
 :::
 
+### Theme
+
+Tag provide three different themes: `dark`、`light` and `plain`
+
+:::demo Using `effect` to change, default is `light`
+```html
+<div class="tag-group">
+  <span class="tag-group__title">Dark</span>
+  <el-tag
+    v-for="item in items"
+    :key="item.label"
+    :type="item.type"
+    effect="dark">
+    {{ item.label }}
+  </el-tag>
+</div>
+<div class="tag-group">
+  <span class="tag-group__title">Plain</span>
+  <el-tag
+    v-for="item in items"
+    :key="item.label"
+    :type="item.type"
+    effect="plain">
+    {{ item.label }}
+  </el-tag>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        items: [
+          { type: '', label: 'Tag 1' },
+          { type: 'success', label: 'Tag 2' },
+          { type: 'info', label: 'Tag 3' },
+          { type: 'danger', label: 'Tag 4' },
+          { type: 'warning', label: 'Tag 5' }
+        ]
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Atributos
 | Atributo            | Descripción                         | Tipo    | Valores aceptados           | Por defecto |
 | ------------------- | ----------------------------------- | ------- | --------------------------- | ----------- |
-| type                | tema                                | string  | success/info/warning/danger | —           |
+| type                | component type                      | string  | success/info/warning/danger | —           |
 | closable            | si el Tag puede ser removido        | boolean | —                           | false       |
 | disable-transitions | si se deshabilitan las animaciones  | boolean | —                           | false       |
 | hit                 | si el  Tag tiene un borde resaltado | boolean | —                           | false       |
 | color               | color de fondo del Tag              | string  | —                           | —           |
 | size                | tamaño del Tag                      | string  | medium / small / mini       | —           |
+| effect | component theme | string | dark / light / plain | light |
 
 
 ### Eventos
 | Nombre | Descripción                          | Parametros |
 | ------ | ------------------------------------ | ---------- |
 | click  | se dispara cuando el Tag es clic     | —          |
-| close  | se dispara cuando el Tag es removido | —          |
+| close  | se dispara cuando el Tag es removido | —          |
diff --git a/examples/docs/fr-FR/tag.md b/examples/docs/fr-FR/tag.md
@@ -139,6 +139,51 @@ En plus de la taille par défaut, Tag fournit d'autres tailles pour vos composan
 ```
 :::
 
+### Theme
+
+Tag provide three different themes: `dark`、`light` and `plain`
+
+:::demo Using `effect` to change, default is `light`
+```html
+<div class="tag-group">
+  <span class="tag-group__title">Dark</span>
+  <el-tag
+    v-for="item in items"
+    :key="item.label"
+    :type="item.type"
+    effect="dark">
+    {{ item.label }}
+  </el-tag>
+</div>
+<div class="tag-group">
+  <span class="tag-group__title">Plain</span>
+  <el-tag
+    v-for="item in items"
+    :key="item.label"
+    :type="item.type"
+    effect="plain">
+    {{ item.label }}
+  </el-tag>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        items: [
+          { type: '', label: 'Tag 1' },
+          { type: 'success', label: 'Tag 2' },
+          { type: 'info', label: 'Tag 3' },
+          { type: 'danger', label: 'Tag 4' },
+          { type: 'warning', label: 'Tag 5' }
+        ]
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Attributs
 
 | 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
 | hit | Si le tag à une bordure mise en valeur. | boolean | — | false |
 | color | Couleur de fond du tag. | string | — | — |
 | size | Taille du tag. | string | medium / small / mini | — |
+| effect | component theme | string | dark / light / plain | light |
 
 ### Évènements
 

diff --git a/examples/docs/zh-CN/tag.md b/examples/docs/zh-CN/tag.md
@@ -139,19 +139,65 @@ Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下
 ```
 :::
 
+### 不同主题
+
+Tag 组件提供了三个不同的主题：`dark`、`light` 和 `plain`
+
+:::demo 通过设置`effect`属性来改变主题，默认为 `light`
+```html
+<div class="tag-group">
+  <span class="tag-group__title">Dark</span>
+  <el-tag
+    v-for="item in items"
+    :key="item.label"
+    :type="item.type"
+    effect="dark">
+    {{ item.label }}
+  </el-tag>
+</div>
+<div class="tag-group">
+  <span class="tag-group__title">Plain</span>
+  <el-tag
+    v-for="item in items"
+    :key="item.label"
+    :type="item.type"
+    effect="plain">
+    {{ item.label }}
+  </el-tag>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        items: [
+          { type: '', label: '标签一' },
+          { type: 'success', label: '标签二' },
+          { type: 'info', label: '标签三' },
+          { type: 'danger', label: '标签四' },
+          { type: 'warning', label: '标签五' }
+        ]
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| type | 主题 | string | success/info/warning/danger | — |
+| type | 类型 | string | success/info/warning/danger | — |
 | closable | 是否可关闭 | boolean | — | false |
 | disable-transitions | 是否禁用渐变动画 | boolean | — | false |
 | hit | 是否有边框描边 | boolean | — | false |
 | color | 背景色 | string | — | — |
 | size | 尺寸 | string | medium / small / mini | — |
+| effect | 主题 | string | dark / light / plain | light |
 
 
 ### Events
 | 事件名称 | 说明 | 回调参数 |
 |---------- |-------- |---------- |
 | click | 点击 Tag 时触发的事件 | — |
-| close | 关闭 Tag 时触发的事件 | — |
+| close | 关闭 Tag 时触发的事件 | — |
diff --git a/packages/tag/src/tag.vue b/packages/tag/src/tag.vue
@@ -8,7 +8,14 @@
       hit: Boolean,
       disableTransitions: Boolean,
       color: String,
-      size: String
+      size: String,
+      effect: {
+        type: String,
+        default: 'light',
+        validator(val) {
+          return ['dark', 'light', 'plain'].includes(val);
+        }
+      }
     },
     methods: {
       handleClose(event) {
@@ -26,16 +33,25 @@
       }
     },
     render(h) {
-      const classes = [ 'el-tag', this.type ? `el-tag--${this.type}` : '',
-        this.tagSize ? `el-tag--${this.tagSize}` : '',
-        {'is-hit': this.hit}
+      const { type, tagSize, hit, effect } = this;
+      const classes = [
+        'el-tag',
+        type ? `el-tag--${type}` : '',
+        tagSize ? `el-tag--${tagSize}` : '',
+        effect ? `el-tag--${effect}` : '',
+        hit && 'is-hit'
       ];
-      const tagEl = (<span class={classes} style={{backgroundColor: this.color}} on-click={this.handleClick}>
-        { this.$slots.default }
-        {
-          this.closable && <i class="el-tag__close el-icon-close" on-click={this.handleClose}></i>
-        }
-      </span>);
+      const tagEl = (
+        <span
+          class={ classes }
+          style={{ backgroundColor: this.color }}
+          on-click={ this.handleClick }>
+          { this.$slots.default }
+          {
+            this.closable && <i class="el-tag__close el-icon-close" on-click={ this.handleClose }></i>
+          }
+        </span>
+      );
 
       return this.disableTransitions ? tagEl : <transition name="el-zoom-in-center">{ tagEl }</transition>;
     }