Vue.js组件实现选项卡以及切换动画特效
Vue.js组件实现选项卡以及切换动画特效
最近在学习Vue，当看梁灏大神写的《Vue.js实战》时看到了关于用组件实现选项卡功能，我也根据课后的练习加上自己的理解重新编写了一下。
组件分为pane.js和tabs.js两个部分，话不多说，直接上代码。
<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">
<title>Documenttitle>
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: ` //pane.js
Vue.component('pane', {
name: 'pane',
template: ` `,
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',
},
})