vue之tab切换
2019-05-16 本文已影响0人
众生皆似尘埃啊
1.定义子组件(就只示列一个组件的代码)
<template>
<!-- 公司简介 -->
<div id="select_four">
<div class="cont_list">
<div class="this_name">
<i></i>公司简介
</div>
<div class="this_cont">
<div class="no_certification">
<p class="p_ps">* 填写完成相应内容后,公司运营人员会在8小时内完成核查,核查通过后可以上传产品</p>
<div class="no_kong">
<i class="img_sprites"></i>
<p>您还未认证请快速认证</p>
<a href>企业认证</a>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "select_four"
};
</script>
<style lang="scss" scoped>
.img_sprites {
background: url("../../../static/img/css_sprites.png") no-repeat center;
background-size: 178px 144px;
display: inline-block;
}
#select_four {
.cont_list {
padding-right: 16px;
.this_name {
height: 56px;
line-height: 56px;
color: #333333;
font-size: 16px;
border-bottom: 1px solid #e6e6e6;
i {
background: #2590ff;
width: 3px;
height: 16px;
display: inline-block;
vertical-align: text-top;
margin: 2px 8px 0 0;
}
}
.this_cont {
.no_certification {
.p_ps {
color: #7d7d7d;
font-size: 12px;
line-height: 12px;
padding: 17px 0 0;
}
.no_kong {
text-align: center;
font-size: 12px;
padding: 114px 0 0;
i {
width: 145px;
height: 110px;
background-position: -5px -5px;
}
p {
color: #7d7d7d;
line-height: 12px;
padding: 20px 0 12px;
}
a {
border: 1px solid #2590ff;
color: #2590ff;
height: 36px;
padding: 0 33px;
line-height: 36px;
border-radius: 1px;
display: inline-block;
text-decoration: none;
opacity: .8;
}
a:hover{
opacity: 1;
}
}
}
}
}
}
</style>
（2）在你写tab切换的页面中将子组件引入，通过@click给每个要点击的按钮添加tabChange事件，通过:class实现绑定当前页，tab切换主要依靠组件component实现，每个页签切换时，不想让改变页签内容，可以用keep-alive实现。ps(‘active_dd 是页签高亮显示类名’)具体代码如下：
<template>
<!-- 个人中心 -->
<div id="personalCenter">
<!-- 导航栏 -->
<headers></headers>
<div class="auto_1200 clearfloat">
<div class="left_max">
<div class="top_name">基本服务</div>
<dl class="slect_list">
<dt>
<i class="img_sprites icon_a"></i>
<span>我的店面</span>
</dt>
<dd :class="{active_dd:iscur== 0}" @click="iscur=0,tabChange('select_zero')">店面设置</dd>
<dt>
<i class="img_sprites icon_b"></i>
<span>我的产品</span>
</dt>
<dd :class="{active_dd:iscur== 1}" @click="iscur=1,tabChange('select_one')">添加新产品</dd>
<dd :class="{active_dd:iscur== 2}" @click="iscur=2,tabChange('select_two')">管理产品</dd>
<dd :class="{active_dd:iscur== 3}" @click="iscur=3,tabChange('select_three')">管理分组</dd>
<dt>
<i class="img_sprites icon_c"></i>
<span>我的账户</span>
</dt>
<dd :class="{active_dd:iscur== 4}" @click="iscur=4,tabChange('select_four')">公司简介</dd>
<dd :class="{active_dd:iscur== 5}" @click="iscur=5,tabChange('select_five')">收款记录</dd>
<dd :class="{active_dd:iscur== 6}" @click="iscur=6,tabChange('select_six')">更改密码</dd>
<dt>
<i class="img_sprites icon_d"></i>
<span>通知</span>
</dt>
<dd :class="{active_dd:iscur== 7}" @click="iscur=7,tabChange('select_seven')">通知</dd>
<dt>
<i class="img_sprites icon_e"></i>
<span>我的订单</span>
</dt>
<dd :class="{active_dd:iscur== 8}" @click="iscur=8,tabChange('select_eight')">接单</dd>
<dd :class="{active_dd:iscur== 9}" @click="iscur=9,tabChange('select_nine')">已接订单</dd>
</dl>
</div>
<div class="right_max">
<keep-alive>
<component v-bind:is="tabView"></component>
</keep-alive>
</div>
</div>
<footers></footers>
</div>
</template>
<script>
import headers from "@/views/headers";
import footers from "@/views/footers";
import select_zero from "../../components/personalCenter_wj/select_zero";
import select_one from "../../components/personalCenter_wj/select_one";
import select_two from "../../components/personalCenter_wj/select_two";
import select_three from "../../components/personalCenter_wj/select_three";
import select_four from "../../components/personalCenter_wj/select_four";
import select_five from "../../components/personalCenter_wj/select_five";
import select_six from "../../components/personalCenter_wj/select_six";
import select_seven from "../../components/personalCenter_wj/select_seven";
import select_eight from "../../components/personalCenter_wj/select_eight";
import select_nine from "../../components/personalCenter_wj/select_nine";
export default {
name: "personalCenter",
data() {
return {
iscur: 4, //默认显示组件的下标
tabView: "select_four" //默认显示公司简介组件
};
},
components: {
headers,
footers,
select_zero,
select_one,
select_two,
select_three,
select_four,
select_five,
select_six,
select_seven,
select_eight,
select_nine
},
methods: {
//tab切换
tabChange: function(tab) {
this.tabView = tab;
}
}
};
</script>
<style lang="scss" scoped>
#personalCenter {
.auto_1200 {
padding: 12px 0 124px;
.left_max {
float: left;
background: #f7f7f7;
width: 217px;
height: 548px;
border-radius: 2px;
.top_name {
color: #333333;
font-size: 16px;
text-align: center;
height: 44px;
line-height: 44px;
border-bottom: 1px solid #e6e6e6;
}
.slect_list {
dt {
box-sizing: border-box;
padding: 16px 12px 8px 28px;
font-size: 14px;
line-height: 14px;
display: flex;
align-items: center;
span {
color: #333333;
}
.icon_a {
background-position: -5px -125px;
width: 15px;
height: 14px;
margin-right: 8px;
}
.icon_b {
background-position: -29px -125px;
width: 13px;
height: 14px;
margin-right: 8px;
}
.icon_c {
background-position: -160px -5px;
width: 13px;
height: 14px;
margin-right: 8px;
}
.icon_d {
background-position: -52px -125px;
width: 14px;
height: 13px;
margin-right: 5px;
}
.icon_e {
background-position: -160px -29px;
width: 11px;
height: 13px;
margin-right: 8px;
}
}
dd {
color: #7d7d7d;
font-size: 12px;
line-height: 12px;
padding: 8px 12px 8px 51px;
box-sizing: border-box;
cursor: pointer;
}
dd:hover {
background: white;
color: #2590ff;
padding-left: 48px;
border-left: 3px solid #2590ff;
}
.active_dd {
background: white;
color: #2590ff;
padding-left: 48px;
border-left: 3px solid #2590ff;
}
}
}
.right_max {
float: right;
width: 956px;
}
}
}
</style>
效果图:
image.png
