feat: 标题栏变化

CHANGELOG.md

@@ -4,6 +4,8 @@
 范围|描述|commitId
 --|--|--
  - | 标题栏角色栏全局任务组件新建 | [0500cb4](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/0500cb4)
+ - | 角色栏实现 | [94cd671](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/94cd671)
+ - | 时间轴界面 | [33927e9](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/33927e9)
  - | 提交到本地 | [9cbe411](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/9cbe411)
  - | db store | [6414c4f](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/6414c4f)
  - | indexedDB | [687394e](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/687394e)
@@ -14,6 +16,8 @@
 ### 🎨 代码样式
 范围|描述|commitId
 --|--|--
+ - | 更新代码 | [1f40a76](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/1f40a76)
+ - | 无基本变化 | [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">
@@ -30,7 +30,6 @@
             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 +44,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>