You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.1 KiB
86 lines
2.1 KiB
4 years ago
|
<!--
|
||
|
* @Author: aBin
|
||
|
* @email: binbin0314@126.com
|
||
|
* @Date: 2021-07-19 10:52:05
|
||
|
* @LastEditors: aBin
|
||
|
* @LastEditTime: 2021-07-19 11:09:23
|
||
|
-->
|
||
|
<template>
|
||
|
<view class="wrap">
|
||
|
<view class="rolebar">
|
||
|
<view>
|
||
|
<view class="container u-skeleton" v-if="roles || roles.length">
|
||
|
<!-- <u-tag
|
||
|
:key="role.id"
|
||
|
:mode="currentRoleIndex === index ? 'dark' : 'light'"
|
||
|
:text="role.value"
|
||
|
:type="role.isMine === 1 ? 'warning' : role.isMine === 0 && currentRoleIndex === index ? 'primary' : ''"
|
||
|
@tap="handleClickRole(index)"
|
||
|
class="u-m-15"
|
||
|
shape="circle"
|
||
|
v-for="(role, index) in roles"
|
||
|
></u-tag>-->
|
||
|
|
||
|
<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"
|
||
|
:current="currentRoleIndex"
|
||
|
:list="roles"
|
||
|
@change="handleClickRole"
|
||
|
class="u-skeleton-rect"
|
||
|
ref="tabs"
|
||
|
>
|
||
|
<template v-slot:name>
|
||
|
<span :key="role.id" v-for="role in roles">{{ role.value }}</span>
|
||
|
</template>
|
||
|
</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: 0 },
|
||
|
{ id: 2, value: '运维', isMine: 0 },
|
||
|
{ id: 3, value: '导师一', isMine: 1 },
|
||
|
{ id: 4, value: '导师二', isMine: 1 },
|
||
|
{ id: 5, value: '导师三', isMine: 1 },
|
||
|
],
|
||
|
currentRoleIndex: 0,
|
||
|
barWidth: 80,
|
||
|
|
||
|
loading: true, // 是否显示骨架屏组件
|
||
|
};
|
||
|
},
|
||
|
|
||
|
methods: {
|
||
|
handleClickRole(index) {
|
||
|
console.log('index: ', index);
|
||
|
this.currentRoleIndex = index;
|
||
|
},
|
||
|
},
|
||
|
};
|
||
|
</script>
|
||
|
|
||
|
<style scoped lang="scss">
|
||
|
.container {
|
||
|
padding: 20rpx;
|
||
|
}
|
||
|
</style>
|