Vue.js组件实现选项卡以及切换动画特效，供大家参考，具体内容如下
最近在学习Vue，当看梁灏大神写的《Vue.js实战》时看到了关于用组件实现选项卡功能，我也根据课后的练习加上自己的理解重新编写了一下。
组件分为pane.js和tabs.js两个部分，话不多说，直接上代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https://www.jb51.net/style.css" > <title>Document</title> </head> <body> <div> <tabs v-model="activeKey"> //transiton是Vue自带封装的，不懂的同学可以去找文档，主要是可以实现动画 <transition> <pane label="标签一"> 标签一的内容 </pane> </transition> <transition> <pane label=" 标签二"> 标签二的内容 </pane> </transition> <transition> <pane label="标签三"> 标签三的内容 </pane> </transition> </tabs> </div> <script src="https://www.jb51.net/vue/vue.js"></script> <script src="https://www.jb51.net/pane.js"></script> <script src="https://www.jb51.net/tabs.js"></script> <script src="https://www.jb51.net/text.js"></script> </body> </html>
//tabs.js Vue.component('tabs', { template: ` <div> <div> <div :class="tabCls(item)" v-for="(item, index) in navList" @click="handleChange(index)"> {{item.label}} </div> <button @click="removePane()"> 关闭/打开 </button> </div> <div> <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 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', }, })