vue里的tab标签


<template>
<div class="Test2">
<div class="tabs_wrap" v-model="mytabActive">
<div class="tabs_line"></div>
<div class="tab" name="0" @click="changeTab(0)">目录</div>
<div class="tab" name="1" @click="changeTab(1)">简介</div>
<div class="tab" name="2" @click="changeTab(2)">评论</div>
<div class="tab" name="3" @click="changeTab(3)">相关课程</div>
</div>
<div class="tabContent">
<div class="tab_pane">11111111</div>
<div class="tab_pane">222222</div>
<div class="tab_pane">3333333333</div>
<div class="tab_pane">4444444444</div>
</div>
</div>
</template>
<script>
import { conf } from "../assets/js/main"export default {
name: 'Test2',
components: { },
data() {
return {
mytabActive: 0
}
},
created() { },
mounted() {
conf.setTitle('登录');
this.tabStyle();
},
beforeDestroy() {}, methods: {
tabStyle() {
var tabWidth = $('.tab').eq(0).width();
$('.tab').eq(this.mytabActive).css('color','#323232')
$('.tabs_line').css('width', tabWidth * 0.6 + 'px');
$('.tabs_line').css("transform", "translateX(" + tabWidth * 0.2 + "px)");
$('.tabs_pane').eq(this.mytabActive).show(); },
changeTab(index) {
var tabWidth = $('.tab').eq(index).width();
$('.tabs_line').css('width', tabWidth * 0.6 + 'px');
var num = tabWidth * index + tabWidth * 0.2;
$('.tabs_line').css({ "transform": "translateX(" + num + "px)"});
$('.tab_pane').hide().eq(index).show();
},
//提示
tips(text) {
conf.toast(text)
}
} //end enthods
}</script>
<style lang="less" scoped>
.tabs_wrap {
.width100();
display: flex;
user-select: none;
position: relative;
background-color: #fff;
position: relative;
height: 44px; .tab {
flex: 1;
text-align: center;
color:#7d7e80;
font-size: 28/75rem;
}
}.tab_pane {
display: none;
}.tabs_line {
z-index: 1;
left: 0;
bottom: 15px;
height: 2px;
position: absolute;
border-radius: 2px;
background-color: #f44;
transition-duration: 0.3s;
}</style>