zheng_xie_ui/components/toptab/tab.vue

<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>