fix(LinCmsUi): 修复 tag 组件默认情况下设置 effect无效

Author: liulu

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

@@ -681,7 +681,6 @@ $typeMap: (primary:#3963BC,
   color:rgba(255,255,255,1);
   border-radius: 12px;
   border: 1px solid #3963BC;
-
   .el-icon-close {
     border-radius: 50%;
     font-size: 12px;
@@ -701,7 +700,31 @@ $typeMap: (primary:#3963BC,
       color: #3963BC;
     }
   }
+  @include m(dark) {
+    background-color: #0a1949;
+    color: rgba(255,255,255,1);
+    .el-tag__close {
+      color:rgba(255,255,255,1);
+    }
+
+    .el-tag__close:hover {
+      color: #FFFFFF;
+      background-color: #0a1949;
+    }
+  }
 
+  @include m(plain) {
+    background-color: rgba(255,255,255,1);
+    color: #3963BC;
+    .el-tag__close {
+      color:#3963BC;
+    }
+
+    .el-tag__close:hover {
+      background-color:#3963BC;
+      color: rgba(255,255,255,1);
+    }
+  }
   @include m(info) {
     background-color: #8C98AE;
     border-color: #8C98AE;

src/config/stage/plugins.js

@@ -1,10 +1,7 @@
 // 本文件是自动生成, 请勿修改
-import LinCmsUi from '@/plugins/LinCmsUi/stage-config'
 import custom from '@/plugins/custom/stage-config'
+import LinCmsUi from '@/plugins/LinCmsUi/stage-config'
 
-const pluginsConfig = [
-  LinCmsUi,
-  custom,
-]
+const pluginsConfig = [custom, LinCmsUi]
 
 export default pluginsConfig

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

@@ -84,6 +84,34 @@
           </el-collapse-item>
         </el-collapse>
       </el-card>
+
+      <el-card style="margin-bottom:50px;">
+        <div slot="header"><span>不同主题,通过设置effect属性来改变主题，默认为 light</span></div>
+        <el-row>
+          <div class="block">
+            <span class="demonstration">Dark主题</span>
+            <div class="tag-group">
+              <el-tag v-for="item in items" :key="item.label" :type="item.type" effect="dark">
+                {{ item.label }}
+              </el-tag>
+            </div>
+          </div>
+          <div class="block">
+            <span class="demonstration">Plain主题</span>
+            <div class="tag-group">
+              <el-tag v-for="item in items" :key="item.label" :type="item.type" effect="plain">
+                {{ item.label }}
+              </el-tag>
+            </div>
+          </div>
+        </el-row>
+
+        <el-collapse>
+          <el-collapse-item title="查看代码" name="2">
+            <div style="white-space: pre-wrap;">{{ theme }}</div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
     </div>
   </div>
 </template>
@@ -94,6 +122,13 @@ export default {
   components: {},
   data() {
     return {
+      items: [
+        { type: '', label: '标签一' },
+        { type: 'success', label: '标签二' },
+        { type: 'info', label: '标签三' },
+        { type: 'danger', label: '标签四' },
+        { type: 'warning', label: '标签五' },
+      ],
       dynamicTags: ['标签一', '标签二', '标签三'],
       inputVisible: false,
       inputValue: '',
@@ -221,6 +256,42 @@ export default {
             <el-tag size="small" closable>小型标签</el-tag>
             <el-tag size="mini" closable>超小标签</el-tag>
             `,
+      theme: `<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>`,
     }
   },
   // 计算属性设置
@@ -259,6 +330,25 @@ export default {
 
 <style lang="scss" scoped>
 @import '../../../assets/style/container.scss';
+.block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: 1px solid #eff2f6;
+  display: inline-block;
+  width: 49%;
+  box-sizing: border-box;
+
+  &:last-child {
+    border-right: none;
+  }
+}
+
+.demonstration {
+  display: block;
+  color: #8492a6;
+  font-size: 14px;
+  margin-bottom: 20px;
+}
 .el-tag + .el-tag {
   margin-left: 10px;
 }