vue選項卡組件的實現方法

Posted on by

本文實例為大傢分享瞭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();
        }
    }
    
})

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：