vue选项卡组件的实现方法
更新时间：2022年03月01日 12:02:36 作者：GlimmerL
这篇文章主要为大家详细介绍了vue选项卡组件的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue选项卡组件的实现代码，供大家参考，具体内容如下
主要功能：点击不同的选项，显示不同的内容
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
var app=new Vue({
el: "#app",
data: {
activeKey: '1'//被选择的选项
}
});
});
</script>
</head>
<body>
<div id="app" v-cloak>
<tabs v-model="activeKey">
<pane label="一" name="1">我是张三</pane>
<pane label="二" name="2">我是李四</pane>
<pane label="三" name="3">我是牛五</pane>
</tabs>
</div>
<script src="js/pane.js" type="text/javascript" charset="utf-8"></script>
<script src="js/tabs.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>pane.js
Vue.component('pane',{
name: 'pane',
template: '\
<div class="pane" v-show="show"> \
<slot></slot> \
</div>',
data: function(){
return {
show: true
}
},
props: {
name: {
type: String
},
label: {
type: String,
default: ''
}
},
methods: {
updateNav() {
this.$parent.updateNav();
}
},
watch: {
label(){
this.updateNav();
}
},
mounted() {
this.updateNav();
}
})tabs.js
Vue.component('tabs',{
template: '\
<div class="tabs">\
<div class="tabs-bar">\
<div \
:class="tabCls(item)" \
v-for="(item,index) in navList" \
@click="handleChange(index)"> \
{{item.label}} \
</div>\
</div> \
<div class="tabs-content"> \
<slot></slot> \
</div> \
</div>',
props: {
value: {
type: [String,Number]
}
},
data: function(){
return {
currentValue: this.value,
navList: []
}
},
methods: {
tabCls: function(item){
return [
'tabs-tab',
{
'tabs-tab-active': item.name===this.currentValue
}
]
},
//遍历所有为pane的子元素
getTabs(){
return this.$children.filter(function(item){
return item.$options.name==='pane';
});
},
//将pane子元素中label name放进navList数组
updateNav() {
this.navList=[];
var _this=this;
this.getTabs().forEach(function(pane,index){
_this.navList.push({
label: pane.label,
name: pane.name ||index
});
if(!pane.name) pane.name=index;
if(index===0){
if(!_this.currentValue){
_this.currentValue=pane.name || index;
}
}
});
this.updateStatus();
},
updateStatus(){
var tabs=this.getTabs();
var _this=this;
//显示当前正在选中的
tabs.forEach(function(tab){
return tab.show=tab.name===_this.currentValue;
})
},
handleChange: function(index){
var nav =this.navList[index];
var name=nav.name;
this.currentValue=name;
this.$emit('input',name);
this.$emit('on-click',name);
}
},
watch: {
value: function(val){
this.currentValue=val;
},
currentValue: function (){
this.updateStatus();
}
}
})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
.sync修饰符是Vue中用于实现子组件修改父组件传递的props值并更新到父组件的功能,它实际上是一个语法糖,将子组件的props绑定到一个名为update:propName的自定义事件上,本文给大家介绍了vue3中sync修饰符的使用,需要的朋友可以参考下2023-10-10
本文主要介绍了Vue组件文档生成工具库的方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
Composition API思想封装NProgress示例详解
这篇文章主要为大家介绍了Composition API思想封装NProgress示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
本篇文章给大家详细讲解了如何在权限管理模块中动态的加载VUE组件的过程，有这方面需求的朋友跟着学习下吧。2018-01-01
很多时候我们会在全局调用一些方法,本文主要介绍了vue全局方法plugins/utils的实现示例,具有一定的参考价值,感兴趣的可以了解一下2024-07-07
这篇文章主要为大家详细解析了Vue监听数组变化的源码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要为大家详细介绍了Vue中用JSON实现刷新界面不影响倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要介绍了vue项目首次打开时加载速度很慢的优化过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
为了解决加载组件中出现的报错、超时、状态展示等问题,可以使用 Vue 3 提供的异步组件（Async Components）,它对于加载过程做了更细致的控制,这篇文章主要介绍了Vue 3 进阶用法之异步组件,需要的朋友可以参考下2024-04-04
vue之使用echarts图表setOption多次很卡问题及解决
这篇文章主要介绍了vue之使用echarts图表setOption多次很卡问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
最新评论