Vue.js組件實現(xiàn)選項卡以及切換動畫特效,供大家參考,具體內(nèi)容如下
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù),包含不限于做網(wǎng)站、成都網(wǎng)站建設(shè)、阿瓦提網(wǎng)絡(luò)推廣、小程序制作、阿瓦提網(wǎng)絡(luò)營銷、阿瓦提企業(yè)策劃、阿瓦提品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等,從售前售中售后,我們都將竭誠為您服務(wù),您的肯定,是我們最大的嘉獎;創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供阿瓦提建站搭建服務(wù),24小時服務(wù)熱線:18980820575,官方網(wǎng)址:muchs.cn
最近在學(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í)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
本文題目:Vue.js組件實現(xiàn)選項卡以及切換特效
當(dāng)前路徑:http://muchs.cn/article16/jpiggg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、服務(wù)器托管、品牌網(wǎng)站制作、手機(jī)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)