Vue.js组件实现选项卡以及切换动画特效

以你之姓@ 2022-03-21 05:38 349阅读 0赞

## Vue.js组件实现选项卡以及切换动画特效 ##

最近在学习Vue，当看梁灏大神写的《Vue.js实战》时看到了关于用组件实现选项卡功能，我也根据课后的练习加上自己的理解重新编写了一下。

组件分为`pane.js`和`tabs.js`两个部分，话不多说，直接上代码。

<!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">
        <link rel="stylesheet" href="style.css">
        <title>Document</title>
    </head>
    
    <body>
        <div id="app">
            <tabs v-model="activeKey">
             //transiton是Vue自带封装的，不懂的同学可以去找文档，主要是可以实现动画
                <transition name="slide-fade"> 
                    <pane label="标签一" name="1">
                        标签一的内容
                    </pane>
                </transition>
                <transition name="slide-fade">
                    <pane label=" 标签二" name="2">
                        标签二的内容
                    </pane>
                </transition>
                <transition name="slide-fade">
                    <pane label="标签三" name="3">
                        标签三的内容
                    </pane>
                </transition>
    
            </tabs>
        </div>
    
    
        <script src="vue/vue.js"></script>
        <script src="pane.js"></script>
        <script src="tabs.js"></script>
        <script src="text.js"></script>
    </body>
    
    </html>

//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> <button @click="removePane()"> 关闭/打开 </button> </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() { 
                return this.$children.filter(function (item) { 
                    return item.$options.name === 'pane';
                });
            },
            updateNav() { 
                this.navList = [];
                var _this = this;
    
                this.getTabs().forEach(function (pane, index) { 
                    _this.navList.push({ 
                        label: pane.label,
                        name: pane.name || index,
                        bool: pane.closable,
                    });
                    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);
            },
            removePane: function () { 
                var bool = this.navList[1].bool;
                console.log(bool);
                if (bool) { 
                    this.navList[1].bool = false;
                    this.currentValue = '0';
                }
                if (!bool) { 
                    this.navList[1].bool = true;
                    this.currentValue = '1';
                    this.$emit('input', '1');
                }
            },
        },
        watch: { 
            value: function (val) { 
                this.currentValue = val;
            },
            currentValue: function () { 
                console.log('demo');
                this.updateStatus();
            },
        },
    });

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

//style.css .tabs { 
      font-size: 14px;
      color: black;
    }
    
    .tabs-bar:after { 
      content: '';
      display: block;
      width: 100%;
      height: 1px;
      position: relative;
      background: rgba(78, 81, 128, 0.5);
    }
    
    .tabs-tab { 
      display: inline-block;
      padding: 4px 16px;
      margin-right: 6px;
      color: rgba(0, 0, 0, 0.6);
      background: rgba(134, 134, 131, 0.137);
      border: 1px solid rgba(154, 214, 248, 0.856);
      cursor: pointer;
      position: relative;
    }
    
    .tabs-tab-active { 
      background: rgb(252, 251, 251);
      color: rgba(0, 0, 0, 1);
      border-top: 1px solid rgba(154, 214, 248, 0.856);
      border-bottom: 1px solid white;
    }
    
    /* .tabs-tab-active:before { content: ''; display: block; height: 5px; background: grey; position: absolute; top: 0; left: 0; right: 0; } */
    
    .tabs-content { 
      position: relative;
      left: 10px;
      top: 30px;
      padding: 8px 0;
    }
    
    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active { 
      transition: all 1.3s ease;
    }
    
    .slide-fade-leave-active { 
      transition: all 1.8s cubic-bezier(1, 0.5, 0.8, 1);
    }
    
    .slide-fade-enter,
    .slide-fade-leave-to
    
    /* .slide-fade-leave-active for below version 2.1.8 */
     { 
      transform: translateY(30px);
      opacity: 0;
    }

//text.js
    var app = new Vue({ 
        el: '#app',
        data: { 
            activeKey: '1',
        },
    })