Feature/lin cms ui (#168)

* feat(linCmsUi): 增加linCmsUi tag 样式组件

增加linCmsUi tag 样式组件

* style(LinCmsUi): 修改Tga组件样式

修改Info主题色为灰色，为可移除标签添加close事件，new tag 按钮更换成 UI 上的 图标按钮

Author: jonflow

src/assets/styles/realize/element-variables.scss

@@ -698,9 +698,9 @@ $typeMap: (primary:#3963BC,
   .el-icon-close {
     border-radius: 50%;
     font-size: 12px;
-    height: 12px;
-    width: 12px;
-    line-height: 12px;
+    height: 14px;
+    width: 14px;
+    line-height: 14px;
     top: -1px;
     right: -5px;
     color:#FFFFFF;
@@ -716,12 +716,12 @@ $typeMap: (primary:#3963BC,
   }
 
   @include m(info) {
-    background-color: #716ACA;
-    border-color: #716ACA;
+    background-color: #8C98AE;
+    border-color: #8C98AE;
     color: rgba(255,255,255,1);
 
     @include when(hit) {
-      border-color: #716ACA;
+      border-color: #8C98AE;
     }
 
     .el-tag__close {
@@ -730,7 +730,7 @@ $typeMap: (primary:#3963BC,
 
     .el-tag__close:hover {
       background-color:rgba(255,255,255,1);
-      color: #716ACA;
+      color: #8C98AE;
     }
   }
 

src/plugins/LinCmsUi/views/tag/Tag.vue

@@ -31,6 +31,7 @@
             v-for="tag in tags"
             :key="tag.name"
             closable
+            @close="handleCloseTag(tag)"
             :type="tag.type">
             {{tag.name}}
             </el-tag>
@@ -58,15 +59,16 @@
           </el-tag>
           <el-input
             class="input-new-tag"
-            v-if="inputVisible"
             v-model="inputValue"
+            v-if="inputVisible"
             ref="saveTagInput"
             size="small"
             @keyup.enter.native="handleInputConfirm"
             @blur="handleInputConfirm"
           >
           </el-input>
-          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
+          <i v-else class="el-icon-circle-plus button-new-tag" @click="showInput" ></i>
+          <!-- <el-button  class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button> -->
         </div>
         </el-row>
         <el-collapse class="test" style="color:red;">
@@ -127,6 +129,7 @@ export default {
         v-for="tag in tags"
         :key="tag.name"
         closable
+        @close="handleCloseTag(tag)"
         :type="tag.type">
         {{tag.name}}
       </el-tag>
@@ -143,6 +146,10 @@ export default {
                 { name: '标签五', type: 'danger' }
               ]
             };
+          methods: {
+            handleCloseTag(tag) {
+              this.tags.splice(this.tags.indexOf(tag), 1);
+            },
           }
         }
       <\/script>`,
@@ -183,6 +190,9 @@ export default {
               margin-left: 10px;
               vertical-align: bottom;
             }
+            .input-new-tag /deep/ .el-input__inner {
+              height: 24px;
+            }
           </style>
 
           <script>
@@ -233,6 +243,17 @@ export default {
     this.init()
   },
   methods: {
+    handleInputConfirm() {
+      let inputValue = this.inputValue;
+      if (inputValue) {
+        this.dynamicTags.push(inputValue);
+      }
+      this.inputVisible = false;
+      this.inputValue = '';
+    },
+    handleCloseTag(tag) {
+      this.tags.splice(this.tags.indexOf(tag), 1)
+    },
     handleClose(tag) {
       this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
     },
@@ -254,15 +275,20 @@ export default {
   margin-left: 10px;
 }
 .button-new-tag {
+  cursor: pointer;
+  vertical-align: middle;
+  color: #3963BC;
   margin-left: 10px;
-  height: 32px;
-  line-height: 30px;
-  padding-top: 0;
-  padding-bottom: 0;
+  font-size: 24px;
+  height: 24px;
+  line-height: 24px;
 }
 .input-new-tag {
   width: 90px;
   margin-left: 10px;
   vertical-align: bottom;
 }
+.input-new-tag /deep/ .el-input__inner {
+  height: 24px;
+}
 </style>