Vue.js组件——标签页组件

最新推荐文章于 2024-05-17 01:36:02 发布

伏枫Urie

最新推荐文章于 2024-05-17 01:36:02 发布

阅读量5.9k

点赞数 2

分类专栏：前端框架前端文章标签： vue-js 前端框架

本文链接：https://blog.csdn.net/weixin_39420106/article/details/78574787

版权

前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

前端框架

5 篇文章 0 订阅

订阅专栏

按照《Vue.js实战》的指导，制作了一个标签页的组件，并按照课后练习的要求，添加了一个小功能：
给pane组件新增一个prop:closable的布尔值，支持是否关闭这个pane，如果开启，tabs上会增加一个关闭按钮，可以关闭对应的标签。
做这个练习的时候，主要有两个关键点：

1）如何根据closable的值来动态显示/隐藏关闭按钮

解决第一个关键点时，我一开始使用了v-show，如下所示(下面的代码省略了其他不相关的代码)，结果不能成功：

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 }} \
                <span :v-show="isShown(item)" @click="deleteTab(index,event)">×</span>\
            </div>\
        </div>\
        <div class="tabs-content">\
            <slot></slot>\
        </div>\
    </div>',
    methods:{
        isShown:function(item){
            console.log(item.closable);
            var flag = item.closable == 'true';
            console.log("-------------------------");
            console.log(flag);
            return flag;
        }
    }
});

后来查阅书籍，发现v-show不能在template中使用。又考虑到这个关闭按钮只会在刚加载时需要渲染，后面都不会改变其显示/隐藏效果，于是决定用v-if，然后奏效了，代码如下（同样省略了不相关代码）：

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 }} \
                <span v-if="isShown(item)" @click="deleteTab(index,event)">×</span>\
            </div>\
        </div>\
        <div class="tabs-content">\
            <slot></slot>\
        </div>\
    </div>',
    methods:{
        isShown:function(item){
            console.log(item.closable);
            var flag = item.closable == 'true';
            console.log("-------------------------");
            console.log(flag);
            return flag;
        }
    }
});

2）如何实现关闭标签页的功能

鉴于Vue.js的核心思想是数据驱动DOM，实现关闭标签页的功能，只需要做到两点：
1、删除将navList中对应的元素（navList是标签页标题的集合）；
2、通过改变currentValue的值，隐藏标签页对应的内容。
关闭标签页的方法deleteTab的代码如下：

deleteTab:function(index,event){
            //添加关闭功能，即是将navList中对应的元素删除即可。
            //存在一个问题，当关闭了所有的tab后，tab-content中依然会显示内容
            //那么，我们不能仅仅只删除navList中对应的元素，还应该将pane中对应的内容也隐藏
            //可以通过改变currentValue的值来实现
            if(this.navList[index].name === this.currentValue){
                if(index > 0){
                    this.currentValue = this.navList[index - 1].name;
                    this.navList.splice(index,1);
                    event.stopPropagation();//阻止冒泡，避免触发handleChange(index)方法
                }
                else{
                    this.navList.splice(index,1);
                    event.stopPropagation();
                    if(this.navList.length > 0){
                       this.currentValue = this.navList[0].name;
                    }   
                    else{
                        this.currentValue = '';
                    }  
                }
            }
            else{
                this.navList.splice(index,1);
                event.stopPropagation();//阻止冒泡，避免触发handleChange(index)方法
                if(this.navList.length === 0){
                    this.currentValue = '';
                }
            }

        }

完整代码

最后，附上完整的代码。
这个组件总共包含如下四个文件：
1、index.html：入口页面；
2、style.csss：样式表；
3、tabs.js：标签页外层的组件tabs，其包含一个标签页标题，一个用于嵌套pane组件的slot；
4、pane.js：标签页嵌套的组件pane，这个组件的作用在于包含具体的标签页的内容。

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标签页组件</title>
        <link rel="stylesheet" type="text/css" href="../css/style.css">
    </head>
    <body>
        <h2>练习</h2>
        <p>给pane组件新增一个prop:closable的布尔值，支持是否关闭这个pane，如果开启，tabs上会增加一个关闭按钮，可以关闭对应的标签</p>
        <div id="app" v-cloak>
            <tabs v-model="activeKey" @on-click="doSomeThing">
                <pane label="标签一" name="1" closable=true>
                    标签一的内容
                </pane>
                <pane label="标签二" name="2" closable=true>
                    标签二的内容
                </pane>
                <pane label="标签三" name="3" closable=false>
                    标签三的内容
                </pane>
            </tabs>
        </div>

        <script src="../js/vue.min.js"></script>
        <script src="../js/pane.js"></script>
        <script src="../js/tabs.js"></script>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    activeKey:'1'
                },
                methods:{
                    doSomeThing:function(){
                        //console.log("Do something!");
                    }
                }
            });
        </script>
    </body>
</html>

style.css

[v-cloak] {
    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: #ffffff;
    border: 1px solid #d7dde4;
    cursor: pointer;
    position: relative;
}

.tabs-tab-active {
    color: #3399ff;
    border-top: 1px solid #3399ff;
    border-bottom: 1px solid #ffffff;
}

.tabs-tab-active:before {
    content: '';
    display: block;
    height: 1px;
    background: #3399ff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.tabs-content {
    padding: 8px 0;
}

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 }} \
                <span v-if="isShown(item)" @click="deleteTab(index,event)">×</span>\
            </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
                }
            ];
        },
        getTabs:function(){
            return this.$children.filter(function(item){
                return item.$options.name === 'pane';
            });
        },
        updateNav:function(){
            this.navList = [];
            var _this = this;
            this.getTabs().forEach(function(pane,index){
                _this.navList.push({
                    label:pane.label,
                    name:pane.name || index,
                    closable:pane.closable
                });
                if(!pane.name){
                    pane.name = index;
                }
                if(index === 0){
                    if(!_this.currentValue){
                        _this.currentValue = pane.name || index;
                    }
                }
            });
            this.updateStatus();
        },
        updateStatus: function(){
            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);
        },
        deleteTab:function(index,event){
            //添加关闭功能，即是将navList中对应的元素删除即可。
            //存在一个问题，当关闭了所有的tab后，tab-content中依然会显示内容
            //那么，我们不能仅仅只删除navList中对应的元素，还应该将pane中对应的内容也隐藏
            //可以通过改变currentValue的值来实现
            if(this.navList[index].name === this.currentValue){
                if(index > 0){
                    this.currentValue = this.navList[index - 1].name;
                    this.navList.splice(index,1);
                    event.stopPropagation();//阻止冒泡，避免触发handleChange(index)方法
                }
                else{
                    this.navList.splice(index,1);
                    event.stopPropagation();
                    if(this.navList.length > 0){
                       this.currentValue = this.navList[0].name;
                    }   
                    else{
                        this.currentValue = '';
                    }  
                }
            }
            else{
                this.navList.splice(index,1);
                event.stopPropagation();//阻止冒泡，避免触发handleChange(index)方法
                if(this.navList.length === 0){
                    this.currentValue = '';
                }
            }

        },
        isShown:function(item){
            console.log(item.closable);
            var flag = item.closable == 'true';
            console.log("-------------------------");
            console.log(flag);
            return flag;
        }
    },
    watch:{
        value:function(val){
            this.currentValue = val;
        },
        currentValue:function(){
            this.updateStatus();
        }
    }
});

pane.js

Vue.component('pane',{
    name:'pane',
    template:'\
        <div class="pane" v-show="show">\
            <slot></slot>\
        </div>',
    props:{
        name:{
            type:String
        },
        label:{
            type:String,
            default:''
         },
         closable:{
              type:Boolean,
              default:true
         }
    },
    data:function(){
        return {
            show:true
        }
    },
    methods:{
        updateNav:function(){
            this.$parent.updateNav();
        }
    },
    watch:{
        label:function(){
            this.updateNav();
        }
    },
    mounted:function(){
        this.updateNav();
    }

});

伏枫Urie

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
Vue.js组件——标签页组件

按照《Vue.js实战》的指导，制作了一个标签页的组件，并按照课后练习的要求，添加了一个小功能：给pane组件新增一个prop:closable的布尔值，支持是否关闭这个pane，如果开启，tabs上会增加一个关闭按钮，可以关闭对应的标签。做这个练习的时候，主要有两个关键点：1）如何根据closable的值来动态显示/隐藏关闭按钮解决第一个关键点时，我一开始使用了v-show，如下所示(下面
复制链接

扫一扫