vue实现标签页切换【详细】
在vue中实现标签页切换有如下2种方式:
① 使用动态组件
② 使用路由
当然你可以使用第三方ui来实现,比如Element Plus。不过自己试着实现一下会更好。
这里讲一下第一和第二种方式,以组件实现为重点,那么就先讲一下使用路由的方式。
使用路由实现 Tab切换
首先,在router文件夹的index.js文件中,配置子页面的路由
{
path: '/Profile',
name: 'Profile',
meta:{
showHead:true,
path:'个人中心'
},
component: () => import('../views/ProfileView.vue'),
children:[
{
path:'article',
name:'article',
component: () => import('../components/Article.vue')
},
{
path:'picture',
name:'picture',
component: () => import('../components/Picture.vue')
}
]
},
以防万一你不知道,path使用‘/xx’的是根路径,使用’xxx‘会自动拼接。
<div class="column">
<router-link to="/profile/article" name="article">文章</router-link>
<router-link to="/profile/picture" name="picture">图片</router-link>
</div>
<div class="content">
<router-view></router-view>
</div>
使用 component 动态组件实现 Tab切换
大概的思路是这样的:首先,每一个tab都有一个panel。
其次,我们希望tab和他的panel能够关联起来,那么他们之间最好有什么相同的特征,所以我们就想到了id。我们可以给每组的男嘉宾和女嘉宾都用上相同的编号,这样我们只需要看编号就知道谁对应谁啦!
最后,大家都知道,约会是一对一的。因此,我们男一(mtab-1)和女一(panel-1)约会的时候,其他的女嘉宾是不能出场的。
控制组件的显示隐藏可以用v–if/v–show。
用isShow来记录当前出场的男嘉宾(mtab)。
用数组panelShowList来记录每位女嘉宾(panel)是否出场的。
大概的框架是这样的:
<div class="column">
<button class="mtab" id="mtab-0" @click="clickTab">0</button>
<button class="mtab" id="mtab-1" @click="clickTab">1</button>
<button class="mtab" id="mtab-2" @click="clickTab">文章</button>
</div>
<div class="content">
<div class="panel" id="panel-0" v-if="panelShowList[0]">
我是内容
</div>
<div class="panel" id="panel-1" v-if="panelShowList[1]">
我是内容1
</div>
<div class="panel" id="panel-2" v-if="panelShowList[2]">
我是内容2
</div>
</div>
不要忘记isShow和panelShowList是有初始值的。开场男女嘉宾,安排!
data(){
return{
isShow:0,
panelShowList:[1,0,0]
}
}
差点忘了要给出场男嘉宾一个特写,给被选中的tab增加一些醒目的样式。
<div class="column">
<button class="mtab" id="mtab-0" @click="clickTab" :class="{highlightTab:panelShowList[0]}">0</button>
<button class="mtab" id="mtab-1" @click="clickTab" :class="{highlightTab:panelShowList[1]}">1</button>
<button class="mtab" id="mtab-2" @click="clickTab" :class="{highlightTab:panelShowList[2]}">文章</button>
</div>
ps: panelShowList存储了女嘉宾们的出场状态,数组下标为男女嘉宾相同的编号。
接着,我们开始思考怎么样才能让tab和panel这两边的嘉宾能够成双成对的出现呢?
答:那当然得让他们相互牵手成功!
首先,获取男方的id,不对,是tab的id。
clickTab(e){
console.log('我的编号是',e.srcElement.id.charAt(5))
this.isShow = e.srcElement.id.charAt(5)
接着我们需要主持人来呼唤女嘉宾出场,不是。是利用watch侦听器对isShow属性的监听。只要isShow改变就代表当前出场的男嘉宾改变了,因此立马通知前一位女嘉宾退场,对应的女嘉宾出场。
watch:{
isShow(newValue,oldValue){
this.panelShowList[oldValue]=0
this.panelShowList[newValue]=1
}
}
watch 默认是浅层的:被侦听的属性,仅在被赋新值时,才会触发回调函数——而嵌套属性的变化不会触发。如果想侦听所有嵌套的变更,你需要深层侦听器:
原文地址:https://blog.csdn.net/XL_0502/article/details/129999851
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_38440.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!