vue封裝tab切換
阿新 • • 發佈:2020-11-01
vue封裝tab切換
預覽:
第一種
通過父傳子標題,子傳父事件
子元件
<template> <div class='app'> <div class="tabs_header"> <div :class="['tabs_header_items',currentIndex==i?'active':'']" @click="itemsClick(i)" v-for="(v,i) in tabs_list" :key="v">{{v}}</div> </div> </div> </template> <script> export default { data() { return { currentIndex: 0 }; }, props: ['tabs_list'], methods: { itemsClick(i) { this.currentIndex = i this.$emit('tabshundle', i) } }, }; </script> <style scoped='scoped'> .tabs_header { display: flex; justify-content: center; align-items: center; text-align: center; } .tabs_header_items { flex: 1; padding: 10px; cursor: pointer; border-bottom: 1px solid transparent; } .active { color: red; border-bottom: 1px solid red; } </style>
父元件
<template> <div> <tabs :tabs_list="tabs_list.map((v,i)=>v.title)" @tabshundle="tabshundle"></tabs> <template v-if="currIndex==0"> <rec></rec> </template> <template v-else-if="currIndex==1"> <cate></cate> </template> <template v-else-if="currIndex==2"> <New></New> </template> <template v-else-if="currIndex==3"> <alb></alb> </template> </div> </template> <script> import tabs from '../../components/tabs/tabsfb' import alb from './alb.vue' import cate from './cate.vue' import New from './new.vue' import rec from './rec.vue' export default { name: 'app', data() { return { tabs_list: [{ title: '推薦' }, { title: '分類' }, { title: '最新' }, { title: '專輯' } ], currIndex: 0, }; }, methods: { tabshundle(e) { this.currIndex = e } }, components: { tabs,alb,cate,New,rec } }; </script> <style scoped='scoped'> /deep/.tabs_header { width: 60%; margin: 0 auto; } </style>