perf: 角色栏文字颜色修改

CHANGELOG.md

@@ -15,6 +15,7 @@
 ### 🎨 代码样式
 范围|描述|commitId
 --|--|--
+ - | 无基本变化 | [21ac4bb](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/21ac4bb)
  - | 组件新建 | [89c0035](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/89c0035)
 
 

src/components/Roles/Roles.vue

@@ -3,7 +3,7 @@
  * @email: binbin0314@126.com
  * @Date: 2021-07-19 10:52:05
  * @LastEditors: aBin
- * @LastEditTime: 2021-07-19 18:02:10
+ * @LastEditTime: 2021-07-19 18:42:51
 -->
 <template>
   <view class="wrap">
@@ -26,11 +26,9 @@
             :list="roles"
             @change="handleClickRole"
             class="u-skeleton-rect"
-            :class="'isMine' ? '#f00' : ''"
             name="value"
             ref="tabs"
           >
-            <template slot="name">+++</template>
           </u-tabs>
         </view>
         <u-skeleton :animation="true" :loading="loading" bgcolor="#fff" v-else></u-skeleton>
@@ -45,23 +43,38 @@ export default {
   data() {
     return {
       roles: [
-        { id: 1, value: '项目经理', isMine: 0 },
-        { id: 2, value: '运维', isMine: 0 },
-        { id: 3, value: '导师一', isMine: 1 },
-        { id: 4, value: '导师二', isMine: 1 },
-        { id: 5, value: '导师三', isMine: 1 },
+        { id: 1, value: '项目经理', isMine: false },
+        { id: 2, value: '运维', isMine: true },
+        { id: 3, value: '导师一', isMine: false },
+        { id: 4, value: '导师二', isMine: true },
+        { id: 5, value: '导师三', isMine: true },
       ],
       currentRoleIndex: 0,
       barWidth: 80,
-
       loading: false, // 是否显示骨架屏组件
     };
   },
+  mounted() {
+    this.getItem();
+  },
   methods: {
     handleClickRole(index) {
+      this.getItem();
       console.log('index: ', index);
       this.currentRoleIndex = index;
     },
+    getItem() {
+      var dom = document.getElementsByClassName('u-tab-item');
+      for (let i = 0; i < dom.length; i++) {
+        let id = dom[i].id;
+        for (let k = 0; k < this.roles.length; k++) {
+          let item = this.roles[k];
+          if (dom[i].textContent === item.value && item.isMine) {
+            document.getElementById(`${id}`).style.color = 'red';
+          }
+        }
+      }
+    },
   },
 };
 </script>