<template>
	<view class="content">
		<view class="">菜单栏样式1：type值为slider时</view>
		<view style="height: 20rpx;"></view>
		<zzx-tabs :menus="['菜单1', '菜单2', '菜单3']" type="slider"
			@change="handleTabChange">
		</zzx-tabs>
		<view style="height: 40rpx;"></view>
		<view class="">菜单栏样式2：type值为underline时；使用activeColor可定义选中的字体颜色</view>
		<view style="height: 20rpx;"></view>
		<zzx-tabs :menus="['菜单1', '菜单2', '菜单3']" type="underline" activeColor="#6cb3f0"
			:disabled="[false, false, false]" @change="handleTabChange">
		</zzx-tabs>
			<view class="toggle-window" style="background-color:#00557f;" v-if="toggle===0">
				1111111111
			</view>
			<view class="toggle-window" style="background-color: #aaaa00;" v-else-if="toggle===1">
				2222222222
			</view>
			<view class="toggle-window" style="background-color: #55557f;" v-else>
				3333333333
			</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import zzxTabs from '@/components/zzx-tabs/zzx-tabs.vue';
	const toggle = ref(0);
	const handleTabChange = (index : any) => {
		toggle.value = index
		console.log('当前选中:', index);
	};
</script>

<style lang="less" scoped>
	.toggle-window {
		margin-top: 20rpx;
		border-radius: 10rpx;
		height: 500rpx;
		width: 100%;
		text-align: center;
		line-height: 500rpx;
		transition: all 1s ease;
	}
</style>