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(); }, },});
新闻热点
疑难解答
图片精选
