vue元件實現Tab切換功能
阿新 • • 發佈：2019-01-04
方法一：
http://www.jianshu.com/p/5757e2198304
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo</title> <script src="https://cdn.bootcss.com/vue/2.4.1/vue.min.js"></script> </head> <body> <div id="app"> <div :is="tabShow"></div> <button @click="tab('A')">tab1</button> <button @click="tab('B')">tab2</button> <button @click="tab('C')">tab3</button> <button @click="tab('D')">tab4</button> </div> <script> A = { template:`<h1>我是第一一一個tab</h1>` } B = { template:`<h1>我是第二二二個tab</h1>` } C = { template:`<h1>我是第三三三個tab</h1>` } D = { template:`<h1>我是第四四四個tab</h1>` } new Vue({ el:'#app', data(){ return { tabShow:'A' } }, components:{ 'A': A, 'B': B, 'C': C, 'D': D }, methods:{ tab(currentShowTab){ this.tabShow = currentShowTab; } } }) </script> </body> </html>方法二：
mint ui tabContainer的應用
<mt-navbarv-model="selectedVal"> <mt-tab-item id="1" @click.native.prevent="active = 'tab-container1'"> <img slot="icon" v-bind:src="wjxselIcon" v-if="addBrowseCountQues > 0" /> 問題 </mt-tab-item> <mt-tab-item id="2" @click.native.prevent="active = 'tab-container2'"> <img slot="icon" v-bind:src="wjxselIcon" v-if="addAns > 0" /> 回答 </mt-tab-item> <mt-tab-item id="3" @click.native.prevent="active = 'tab-container3'"> <img slot="icon" v-bind:src="wjxselIcon" v-if="addAtt > 0"/> 關注 </mt-tab-item><mt-tab-item id="4" @click.native.prevent="active = 'tab-container4'"> <img slot="icon" v-bind:src="wjxselIcon" v-if="addreplyCom > 0"/> 評論 </mt-tab-item> </mt-navbar> </div> <!--<div :is="tabShow" @swipeVal="selected"></div>--> <div class="page-tab-container" id="page-tab-container"> <mt-tab-container class="page-tabbar-tab-container" v-model="active" :swipeable="true" > <mt-tab-container-item id="tab-container1"> <myQuestions @swipeVal="selected"></myQuestions> </mt-tab-container-item> <mt-tab-container-item id="tab-container2"> <myAnswers @swipeVal="selected"></myAnswers> </mt-tab-container-item> <mt-tab-container-item id="tab-container3"> <myAttentions @swipeVal="selected"></myAttentions> </mt-tab-container-item> <mt-tab-container-item id="tab-container4"> <myComments @swipeVal="selected"></myComments> </mt-tab-container-item> </mt-tab-container> </div>
iniSelecVal: function () { if (localStorage.selectedVal) { this.selectedVal = localStorage.selectedVal } else { this.selectedVal = '1' localStorage.selectedVal = '1' } }, routeClick: function () { this.$router.push({'name': 'mainPage'}) localStorage.selectedVal = '1' }, selected: function (res) { this.selectedVal = res },
watch: { selectedVal: function (val, oldval) { var self = this localStorage.selectedVal = val if (val === '1') { self.active = 'tab-container1' // self.tabShow = 'myQuestions' } else if (val === '2') { self.active = 'tab-container2' // self.tabShow = 'myAnswers' } else if (val === '3') { self.active = 'tab-container3' // self.tabShow = 'myAttentions' } else if (val === '4') { self.active = 'tab-container4' // self.tabShow = 'myComments' } else if (val === 'undefined') { self.active = 'tab-container1' // self.tabShow = 'myQuestions' } } }