<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])"> <view class="f16 fw mb6 tits" >{{ite.tit}}</view> <view class="f500 f14 txt" v-if="ite.txt||ite.txt==0">{{ite.txt}}</view> <image :src="tapline" class="line"></image> </view> </block> <block v-else> <view class="tit" :style="'height:'+height+'rpx'" :class="tabidx==ite.val?'act':''" @click="getTab(ite.val)" > <view class="f16 fw mb6 tits" >{{ite.tit}}</view> <view class="f500 f14 txt" v-if="ite.txt||ite.txt==0">{{ite.txt}}</view> <image :src="tapline" class="line"></image> </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: Number, default () { return 0 } } }, data(){ return{ // :0, tapline:require("@/static/images/hline.png"), micone:require("@/static/images/micone.png"), } }, 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: #ffffff; .tit{flex: 1;display: flex;flex-direction: column;justify-content: center;position: relative; view{text-align: center;} .tits{color: #AAAAAA ;} .txt{color: #aaaaaa;} .line{width: 40rpx;height: 12rpx;position: absolute;left: 50%;margin-left: -20rpx;bottom: 6rpx;display: none;} &.act{ // &::after{content: '';width: 100rpx;height: 6rpx;background:#FE5706 ;position: absolute;left: 50%;margin-left: -50rpx;bottom: 0;} .tits{color: #161616;} .txt{color: #FE5706;} .line{display: block;} } } .chebox{width: 96rpx;background: #FFFFFF; box-shadow: -10rpx 0rpx 10rpx 0rpx rgba(196,191,191,0.22);display: flex;align-items: center;justify-content: center; image{width: 30rpx;height: 26rpx;} } } </style>