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" rel="external nofollow" > <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.jsVue.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.jsVue.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.jsvar app = new Vue({ el: '#app', data: { activeKey: '1', },})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。
新闻热点
疑难解答
