vue tab 切換動畫
阿新 • • 發佈:2021-07-31
效果如圖
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>