support tag color property

Sancho66 · Dec 13, 2016 · 8917704 · 8917704
1 parent 998dcce
commit 8917704
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 8 deletions.
diff --git a/examples/docs/en-US/tag.md b/examples/docs/en-US/tag.md
@@ -34,7 +34,7 @@ Used for marking and selection.
 
 ### Basic usage
 
-::: demo Use the `type` attribute to define Tag's type.
+::: 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>
@@ -93,6 +93,7 @@ Used for marking and selection.
 | closable | whether Tab can be removed | boolean | — | false |
 | close-transition | whether the removal animation is disabled | boolean | — | false |
 | hit | whether Tag has a highlighted border | boolean | — | false |
+| color | background color of the tag | string | — | — |
 
 
 ### Events

diff --git a/examples/docs/zh-CN/tag.md b/examples/docs/zh-CN/tag.md
@@ -34,7 +34,7 @@
 
 ### 基础用法
 
-:::demo 由`type`属性来定义，该属性可选填。
+:::demo 由`type`属性来选择tag的类型，也可以通过`color`属性来自定义背景色。
 
 ```html
 <el-tag>标签一</el-tag>
@@ -93,6 +93,7 @@
 | closable | 是否可关闭 | boolean | — | false |
 | close-transition | 是否禁用关闭时的渐变动画 | boolean | — | false |
 | hit | 是否有边框描边 | boolean | — | false |
+| color | 背景色 | string | — | — |
 
 
 ### Events

diff --git a/packages/tag/src/tag.vue b/packages/tag/src/tag.vue
@@ -2,7 +2,8 @@
   <transition :name="closeTransition ? '' : 'el-zoom-in-center'">
     <span
       class="el-tag"
-      :class="[type ? 'el-tag--' + type : '', {'is-hit': hit}]">
+      :class="[type ? 'el-tag--' + type : '', {'is-hit': hit}]"
+      :style="{backgroundColor: color}">
       <slot></slot>
       <i class="el-tag__close el-icon-close"
         v-if="closable"
@@ -18,7 +19,8 @@
       closable: Boolean,
       type: String,
       hit: Boolean,
-      closeTransition: Boolean
+      closeTransition: Boolean,
+      color: String
     },
     methods: {
       handleClose(event) {

diff --git a/packages/theme-default/src/common/var.css b/packages/theme-default/src/common/var.css
@@ -440,7 +440,6 @@
   -------------------------- */
   --tag-padding: 0 5px;
   --tag-fill: var(--border-color-hover);
-  --tag-border: var(--border-color-hover);
   --tag-color: var(--color-white);
   --tag-close-color: #666;
   --tag-font-size: 12px;

diff --git a/packages/theme-default/src/tag.css b/packages/theme-default/src/tag.css
@@ -7,12 +7,13 @@
     background-color: var(--tag-fill);
     display: inline-block;
     padding: var(--tag-padding);
-    height: 22px;
-    line-height: @height;
+    height: 24px;
+    line-height: calc(@height - 2);
     font-size: var(--tag-font-size);
     color: var(--tag-color);
     border-radius: var(--tag-border-radius);
-    border: 1px solid var(--tag-border);
+    box-sizing: border-box;
+    border: 1px solid transparent;
 
     & .el-icon-close {
       border-radius: 50%;

diff --git a/test/unit/specs/tag.spec.js b/test/unit/specs/tag.spec.js
@@ -78,4 +78,13 @@ describe('Tag', () => {
     }, true);
     expect(vm.$el.classList.contains('md-fade-center')).to.be.false;
   });
+
+  it('color', () => {
+    vm = createVue({
+      template: `
+      <el-tag color="rgb(0, 0, 0)"></el-tag>
+      `
+    }, true);
+    expect(vm.$el.style.backgroundColor).to.equal('rgb(0, 0, 0)');
+  });
 });