Custom v-ons-tabbar
-
Hello,
I want to custom tabbar.
For example, I have three tabs(home,myprofile.setting), and the other not-tabbed-page not belong to tabs. Sometime I show the content on not-tabbed-page.I have a question:
- How to extend VOnsTabbar in my project(webpack.js).
- How to display the other not-tabbed page(ons-page).
1 <template> 2 <ons-tabbar 3 :on-swipe.prop="onSwipe" 4 :activeIndex="index" 5 @postchange.self="$emit('update:index', $event.index)" 6 v-on="unrecognizedListeners" 7 > 8 <div class="tabbar__content"> 9 <div><slot>Here Custom Data</slot></div> 10 <div> 11 <slot name="pages"> 12 <component v-for="tab in tabs" v-bind="tab.props" :is="tab.page" :key="(tab.page.key || tab.page.name || _tabKey(tab))" v-on="unrecognizedListeners"></component> 13 </slot> 14 </div> 15 </div> 16 <div class="tabbar"> 17 <slot> 18 <v-ons-tab v-for="tab in tabs" v-bind="tab" :key="_tabKey(tab)"></v-ons-tab> 19 </slot> 20 <div class="tabbar__border"></div> 21 </div> 22 </ons-tabbar> 23 </template> 24 25 <script> 26 import { VOnsTabbar } from 'vue-onsenui'; 27 export default { 28 extends: VOnsTabbar, 29 }; 30 </script>
I have got error messages if extending:
Please help me!!!
Thank you.
-
@Hyeokjune-Jeon I don’t think
import { VOnsTabbar } from 'vue-onsenui';
is exactly importing what you think.vue-onsen
does not export components, only an installable plugin. You can try to get the component from Vue’s installed components:Vue.options.components['v-ons-tabbar']
.