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:

    1. How to extend VOnsTabbar in my project(webpack.js).
    2. 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:
    0_1505975356305_스크린샷 2017-09-21 오후 3.26.42.png

    Please help me!!!
    Thank you.


  • Onsen UI

    @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'].


Log in to reply