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.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,
