Vue.js--标签页组件

最新推荐文章于 2024-09-26 14:24:29 发布

吴声子夜歌

最新推荐文章于 2024-09-26 14:24:29 发布

阅读量612

点赞数 2

分类专栏： Vue.js 文章标签： Vue.js 标签页组件

本文链接：https://blog.csdn.net/cold___play/article/details/102615601

版权

Vue.js 专栏收录该内容

39 篇文章 4 订阅

订阅专栏

效果

在这里插入图片描述

入口页 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>标签页组件</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</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://unpkg.com/vue/dist/vue.js"></script>
    <script src="pane.js"></script>
    <script src="tabs.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                activeKey: '1'
            }
        });
    </script>
</body>
</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: '\
        <div class="tabs">\
            <div class="tabs-bar">\
                <!--标签页标题，这里要用v-for-->\
                <div \
                    :class="tabCls(item)"\
                    v-for="(item, index) in navList"\
                    @click="handleChange(index)">\
                    {{item.label}}\
                </div>\
            </div>\
            <div class="tabs-content">\
                <!--这里的slot就是嵌套的pane-->\
                <slot></slot>\
            </div>\
        </div>',
    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: '\
        <div class="pane" v-show="show">\
            <slot></slot>\
        </div>',
    data: function () {
        return {
            show: true
        }
    },
    props: {
        name: {
            type: String
        },
        label: {
            type: String,
            default: ''
        }
    },
    methods: {
        updateNav: function () {
            this.$parent.updateNav();
        }
    },
    watch: {
        label: function () {
            this.updateNav();
        }
    },
    mounted: function () {
        this.updateNav();
    }
});