tab切換功能——vue
阿新 • • 發佈:2019-02-09
專案開發中,使用vue實現tab頁籤切換功能。具體例項如下:
(1)首先定義子元件,如下圖:
以select01.vue為例,子元件的原始碼如下:
<template>
<div slot='select01'>{{msg}}</div>
</template>
<script>
export default {
data(){
return{
msg:"select01"
}
}
}
</script>
<style lang="scss">
</style>
(2)在app.vue中將子元件引入,通過v-for實現tab頁籤,通過@click實現頁籤切換,通過:class實現綁定當前頁,tab切換主要依靠元件component實現,每個頁籤切換時,不想讓改變頁籤內容,可以用keep-alive實現。具體程式碼如下:(3)功能效果如下:<template> <div id="app"> <div class="radio-wrap"> <div class="radio-group" v-model="tabView"> <span v-for="(tab ,index) in tabs" :class="{cur:iscur==index}" @click="iscur=index,tabChange('select' + (index + 1))">{{tab.name}}</span> </div> <div style="margin:10px 0;"></div> <keep-alive> <component v-bind:is="tabView"></component> </keep-alive> </div> </div> </template> <script> import select1 from './components/select01.vue'; import select2 from './components/select02.vue'; import select3 from './components/select03.vue'; export default { name: 'app', data () { return { tabView: 'select1', tabs: [{name: "選項一"}, {name: "選項二"} ,{name: "選項三"}], iscur: 0 } }, components: { select1, select2, select3 }, methods: { tabChange:function(tab){ this.tabView = tab; } } } </script> <style> .radio-group{font-size:0;height: 26px;line-height:26px;} .radio-group>span{cursor:pointer;display:inline-block;font-size:16px;text-align:center;width:100px;} .cur{color:#fff;background-color: #20a0ff;} </style>