效果如图
code
<template>
<div>
<Card>
<div class="risk-tab-top">
<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
class="risk-active-line" :class="[ activeIndex == 0 ? 'risk-active-line-f' : 'risk-active-line-r']"
/>
</div>
</Card>
</div>
</template>
<script>
export default {
name: "Computational-Index",
components: {},
data() {
return {
tabList: ["开票列表", "审核列表"],
activeIndex: 0,
};
},
methods: {
tabChange(val) {
this.activeIndex = val;
this.$router.push({ //新增一个参数
query:{tabsid:val}
});
},
},
created() {
if (this.$route.query.tabsid) {
this.activeIndex = this.$route.query.tabsid;
}
},
};
</script>
<style lang="scss" scoped >
.risk-tab-top {
color: rgba(138, 144, 155, 1);
display: flex;
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;
bottom: 0px;
transition: all 0.3s ease;
}
.risk-active-line-f {
transform: translate3d(0px, 0, 0);
}
.risk-active-line-r {
transform: translate3d(128px, 0, 0);
}
}
</style>
原文如下,再此基础上进行了路由值调整,这样刷新了也还能保存tab记录
https://blog.csdn.net/qq_37807767/article/details/114698542