<template> <view class="listtopb flexc" > <block v-for="(ite,idx) in tablist" :key='idx'> <block v-if='ite.limt'> <view class="tit" :style="'height:'+height+'rpx'" :class="tabidx==ite.val?'act':''" @click="getTab(ite.val)" v-if="checkPermi([ite.limt])"> {{ite.tit}} </view> </block> <block v-else> <view class="tit" :style="'height:'+height+'rpx'" :class="tabidx==ite.val?'act':''" @click="getTab(ite.val)" > {{ite.tit}} </view> </block> </block> <!-- 切换按钮 --> <!-- <view :style="'height:'+height+'rpx'" class="chebox" @click="getroleFn" v-if="checkPermi(['register:teacher:list'])&&tabbtn"> <image :src="micone"></image> </view> --> </view> </template> <script> import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数 export default{ props:{ tablist:{ type: Array, default () { return [] } }, height:{ type: Number, default () { return 100 } }, tabbtn:{ type:Boolean, default () { return false } }, tabidx:{ type: [String,Number], default () { return '' } } }, data(){ return{ // :0, } }, mounted() { // this.tabidxs=this.tabidx }, methods:{ checkPermi, checkRole, getTab(idx){ // this.tabidxs=idx; this.$emit('getCheck',idx) }, getroleFn(){ this.$emit('getroleFn') }, } } </script> <style lang="scss"> .listtopb{ background-color:#00A9F0; .tit{flex: 1;display: flex;justify-content: center;position: relative;font-weight: 500;align-items: center; font-size: 26rpx; color: #FFFFFF; &.act{font-weight: bold;font-size: 30rpx; &::after{content: '';width: 30rpx;height: 10rpx;background:#FFFFFF;position: absolute;left: 50%;margin-left: -10rpx;bottom: 16rpx;border-radius: 4rpx;} } } } </style>