Vue.js标签页组件使用方法详解

本文实例为大家分享了Vue.js标签页组件使用的具体代码，供大家参考，具体内容如下

效果

入口页 index.html

 
 
 
 
 


 
 
 
 标签一的内容
 
 
 标签二的内容
 
 
 标签三的内容
 
 
 
 
 
 
 

样式表 style.css

[v-clock]{
 display: none;
}
.tabs{
 font-size: 14px;
 color: #657180
}
.tabs-bar:after{
 content: '';
 display: block;
 width: 100%;
 height: 1px;
 background: #d7dde4;
 margin-top: -1px;
}
.tabs-tab{
 display: inline-block;
 padding: 4px 16px;
 margin-right: 6px;
 background: #fff;
 border: 1px solid #d7dde4;
 cursor: pointer;
 position: relative;
}
.tabs-tab-active{
 color: #ee99ff;
 border-top: 1px solid #3399ff;
 border-bottom: 1px solid #fff;
}
.tabs-tab-active:befor{
 content: '';
 display: block;
 height: 1px;
 background: #3399ff;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
}
.tabs-content{
 padding: 8px 0;
}

标签页外层的组件tabs tabs.js

Vue.component('tabs',{
 template: '
 
 
 
 
 {{item.label}}
 
 
 
 
 
 
 ',
 props: {
 value: {
 type: [String, Number]
 }
 },
 data: function () {
 return {
 //用于渲染tabs的标题
 currentValue: this.value,
 navList: []
 }
 },
 methods: {
 tabCls(item){
 return [
 'tabs-tab',
 {
 'tabs-tab-active': item.name === this.currentValue
 }
 ]
 },
 getTabs(){
 //通过遍历子组件，得到所有的pane组件
 return this.$children.filter(function (item) {
 return item.$options.name === 'pane';
 });
 },
 updateNav(){
 this.navList = [];
 //设置对this的引用，在function回调里，this的指向的并不是Vue实例
 var _this = this;

 this.getTabs().forEach((pane, index) => {
 _this.navList.push({
 label: pane.label,
 name: pane.name || index
 });
 //如果没有给pane设置name，默认设置它的索引
 if(!pane.name)
 pane.name = index;
 //设置当前选中的tab的索引
 if(index === 0){
 if(!_this.currentValue){
 _this.currentValue = pane.name || index;
 }
 }
 });
 this.updateStatus();
 },
 updateStatus(){
 var tabs = this.getTabs();
 var _this = this;
 //显示当前选中的tab对应的pane组件，隐藏没有选中的
 tabs.forEach(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: val => {
 this.currentValue = val;
 },
 currentValue: function () {
 this.updateStatus();
 }
 }
});

标签页嵌套的组件pane pane.js

Vue.component('pane',{
 name: 'pane',
 template: '
 
 
 ',
 data: function () {
 return {
 show: true
 }
 },
 props: {
 name: String
 },
 label: {
 type: String,
 default: ''
 },
 methods: {
 updateNav: function () {
 this.$parent.updateNav();
 }
 },
 watch: {
 label: function () {
 this.updateNav();
 }
 },
 mounted: function () {
 this.updateNav();
 }
});

更多教程点击《Vue.js前端组件学习教程》，欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。