Vue.js組件實現(xiàn)選項卡以及切換特效
更新時間：2019年07月24日 09:49:17 作者：逐魚
這篇文章主要為大家詳細(xì)介紹了Vue.js組件實現(xiàn)選項卡以及切換特效，具有一定的參考價值，感興趣的小伙伴們可以參考一下
Vue.js組件實現(xiàn)選項卡以及切換動畫特效，供大家參考，具體內(nèi)容如下
最近在學(xué)習(xí)Vue，當(dāng)看梁灝大神寫的《Vue.js實戰(zhàn)》時看到了關(guān)于用組件實現(xiàn)選項卡功能，我也根據(jù)課后的練習(xí)加上自己的理解重新編寫了一下。
組件分為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自帶封裝的，不懂的同學(xué)可以去找文檔，主要是可以實現(xiàn)動畫
<transition name="slide-fade">
<pane label="標(biāo)簽一" name="1">
標(biāo)簽一的內(nèi)容
</pane>
</transition>
<transition name="slide-fade">
<pane label=" 標(biāo)簽二" name="2">
標(biāo)簽二的內(nèi)容
</pane>
</transition>
<transition name="slide-fade">
<pane label="標(biāo)簽三" name="3">
標(biāo)簽三的內(nèi)容
</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()"> 關(guān)閉/打開 </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;
}
/* 可以設(shè)置不同的進(jìn)入和離開動畫 */
/* 設(shè)置持續(xù)時間和動畫函數(shù) */
.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',
},
})
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue組件之間相互傳值的方式，對vue感興趣的同學(xué)，可以參考下2021-05-05
vue-cli結(jié)合Element-ui基于cropper.js封裝vue實現(xiàn)圖片裁剪組件功能
這篇文章主要介紹了vue-cli結(jié)合Element-ui基于cropper.js封裝vue實現(xiàn)圖片裁剪組件功能,本文圖文并茂給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-03-03
這篇文章主要介紹了Vue的自定義組件不能使用click方法的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了如何為vue的項目添加單元測試，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
VUE是通過傳遞一些配置給Vue對象和頁面中引用插值表達(dá)式來操作DOM的,下面這篇文章主要給大家介紹了關(guān)于Vue3中操作dom的四種方式總結(jié),文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
基于elementUI實現(xiàn)圖片預(yù)覽組件的示例代碼
這篇文章主要介紹了基于elementUI實現(xiàn)圖片預(yù)覽組件的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
SpringBoot實現(xiàn)全局和局部跨域的兩種方式
本文主要介紹了SpringBoot實現(xiàn)全局和局部跨域的兩種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了基于vue實現(xiàn)分頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
vscode開發(fā)vue非常好用,因為有很多的插件,可以補(bǔ)全語法,或者高亮便于檢查錯誤,但我最近發(fā)現(xiàn)我的vscode卻沒有了代碼提示,這篇文章主要給大家介紹了關(guān)于VSCode中書寫Vue無代碼提示該如何解決的相關(guān)資料,需要的朋友可以參考下2022-12-12
在vue中路由使用this.$router.go(-1)返回兩次問題
這篇文章主要介紹了在vue中路由使用this.$router.go(-1)返回兩次問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12