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

主要功能:点击不同的选项,显示不同的内容

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="https://www.atool.online/article/css/style.css" />
        <script src="https://www.atool.online/article/js/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script src="https://www.atool.online/article/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="https://www.atool.online/article/js/pane.js" type="text/javascript" charset="utf-8"></script>
        <script src="https://www.atool.online/article/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();
        }
    }
    
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。

点赞(0)

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部