prevent_drowning_app/components/tabs/index.vue

<template>
	<view class="listtopb flexc" >
		<block v-for="(ite,idx) in tablist" :key='idx'>
			<view class="tit" :style="'height:'+height+'rpx'" :class="tabval==ite.dictValue?'act':''" @click="getTab(ite.dictValue)" >
				{{ite.dictLabel}}
			</view>	
		</block>
	</view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	export default{
		props:{
			tablist:{
				type: Array,
				default () {
					return []
				}
			},
			height:{
				type: Number,
				default () {
					return 80
				}
			},
			tabval:{
				type: [String,Number],
				default () {
					return ''
				}
			}
		},
		data(){
			return{
				// :0,
			}
		},
		mounted() {
			
		},
		methods:{
			checkPermi, checkRole,
			getTab(val){
				this.$emit('getCheck',val)
			},
			getroleFn(){
				this.$emit('getroleFn')
			},
		}
	}
</script>

<style lang="scss">
	.listtopb{width: 100%;overflow: auto;
		 .tit{display: flex;justify-content: center;position: relative;align-items: center;
font-weight: 500;font-size: 30rpx;color: #626669;height: 80rpx;padding: 0 26rpx;
			&.act{font-weight: bold;font-size: 34rpx;color: #161A1E;
			 &::after{content: '';width: 36rpx;height: 6rpx;background: #0053FF;
border-radius: 4rpx;position: absolute;left: 50%;margin-left: -17rpx;bottom: 0rpx;}
			
			}
		 }
	}
</style>