vue tab切换组件（带动画）笔记

vue tab切换组件（带动画）

个人备份而已

<template>
    <div>
        <div class="risk-tab-top">
            <div
                class="risk-active-line"
                :class="[activeIndex == 0?'risk-active-line-f':'risk-active-line-r']"
            />
            <div
                v-for="(item,index) in tabList "
                :key="index"
                class="risk-tab-cont p-12"
                :class="[activeIndex == index?'risk-active':'']"
                @click="tabChange(index)"
            >
                {{ item }}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'IndexTab',
    components: {},
    mixins: [],
    props: {},
    data() {
        return {
            tabList: ['开票列表', '审核列表'],
            activeIndex: 0,
        };
    },
    methods: {
        tabChange(val) {
            this.activeIndex = val;
            this.$emit('switchTab',val);
        },
    },
};
</script>
<style lang="scss" scoped >
.risk-tab-top {
	color: rgba(138, 144, 155, 1);
	background: #f8f9fc;
	display: flex;
	flex-direction: row;
	width: 100%;
	position: relative;
	.risk-tab-cont {
		cursor: pointer;
		text-align: center;
		padding: 16px 32px;
		font-size: 16px;
		box-sizing: border-box;
	}
	.risk-active {
		color: #000;
		background: #fff;
	}
	.risk-active-line {
		width: 128px;
		height: 3px;
		background: rgba(76, 147, 255, 1);
		position: absolute;
		top:0px;
		transition: all 0.3s ease;
	}
	.risk-active-line-f {
		transform: translate3d(0px, 0, 0);
	}
	.risk-active-line-r {
		transform: translate3d(128px, 0, 0);
	}
}
.risk-cont {
	color: #000;
}
</style>