vue选项卡组件的实现方法

本文实例为大家分享了vue选项卡组件的实现代码，供大家参考，具体内容如下

主要功能：点击不同的选项，显示不同的内容

html

    
        
        
        
        
        
        
    
    
        

            
                我是张三
                我是李四
                我是牛五
            
        
        
        
    

pane.js

Vue.component('pane',{
    name: 'pane',
    template: '\
        
 \
             \
        
',
    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: '\
        
\
            
\
                
 \
                    {{item.label}} \
                
\
            
 \
            
 \
                 \
            
 \
        
',
    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();
        }
    }
    
})

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