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,
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\',
},
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容