combination-tall/src/components/Roles/Roles.vue

<!--
 * @Author: aBin
 * @email: binbin0314@126.com
 * @Date: 2021-07-19 10:52:05
 * @LastEditors: aBin
 * @LastEditTime: 2021-07-19 18:42:51
-->
<template>
  <view class="wrap">
    <view class="rolebar">
      <view>
        <view class="container" v-if="roles || roles.length">
          <!-- <u-tabs
            :bar-width="barWidth"
            :current="currentRoleIndex"
            :list="roles"
            @change="handleClickRole"
            class="u-skeleton-rect"
            name="value"
            ref="tabs"
          ></u-tabs>-->

          <u-tabs
            :bar-width="barWidth"
            :class="'isMine' ? '#f00' : ''"
            :current="currentRoleIndex"
            :list="roles"
            @change="handleClickRole"
            class="u-skeleton-rect"
            name="value"
            ref="tabs"
          >
          </u-tabs>
        </view>
        <u-skeleton :animation="true" :loading="loading" bgcolor="#fff" v-else></u-skeleton>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Roles',
  data() {
    return {
      roles: [
        { 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>

<style scoped lang="scss">
.container {
  padding: 20rpx;
}
</style>