Advertisement
farnetani

Exemplo de Tabs com Vuejs

Nov 14th, 2017
108
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.   <div id="app">
  3.  
  4.       <!-- New Tab Button (Using tabs slot) -->
  5.       <a slot="tabs" @click.prevent="newTab('HelloWorld')" href="#">
  6.           Add Helloworld
  7.       </a>
  8.  
  9.         <a slot="tabs" @click.prevent="newTab('HelloWorld2')" href="#">
  10.           Add Helloworld 2
  11.         </a>
  12.  
  13.     <b-tabs small card v-model="tabIndex">
  14.       <!-- Render Tabs -->
  15.       <b-tab :title="`Tab Numero: ${i}`" v-for="i in tabs" :key="i">
  16.  
  17.         <component :is="comp[i]"></component>
  18.  
  19.         <b-btn size="sm" variant="danger" class="float-right" @click="()=>closeTab(i)">
  20.           Fechar
  21.         </b-btn>
  22.       </b-tab>
  23.  
  24.  
  25.  
  26.       <!-- Render this if no tabs -->
  27.       <div slot="empty" class="text-center text-muted">
  28.         There are no open tabs
  29.         <br> Open a new tab using + button.
  30.       </div>
  31.     </b-tabs>
  32.  
  33.     <!-- Control buttons-->
  34.     <div class="text-center">
  35.       <b-button-group class="mt-2">
  36.         <b-btn @click="tabIndex--">Previous</b-btn>
  37.         <b-btn @click="tabIndex++">Next</b-btn>
  38.       </b-button-group>
  39.       <br>
  40.       <span class="text-muted">Current Tab: {{tabIndex}}</span>
  41.     </div>
  42.  
  43.   </div>
  44. </template>
  45.  
  46. <script>
  47.   import HelloWorld from './components/HelloWorld'
  48.   import HelloWorld2 from './components/HelloWorld2'
  49.  
  50.  
  51.   export default {
  52.     name: 'app',
  53.     components: {
  54.       HelloWorld, HelloWorld2
  55.     },
  56.     data: function(){
  57.       return{
  58.         tabIndex: 0,
  59.         tabs: [],
  60.         comp: [],
  61.       tabCounter: 0
  62.       }
  63.     },
  64.     methods: {
  65.       closeTab(x) {
  66.         for (let i = 0; i < this.tabs.length; i++) {
  67.           if (this.tabs[i] === x) {
  68.             this.tabs.splice(i, 1);
  69.           }
  70.         }
  71.       },
  72.       newTab(comp) {
  73.         this.tabs.push(this.tabCounter++);
  74.         this.comp.push(comp)
  75.  
  76.         setTimeout(()=>{
  77.           this.tabIndex = this.tabs.length-1
  78.         },200)
  79.       }
  80.     }
  81.   }
  82. </script>
  83.  
  84. <style>
  85.   #app {
  86.     font-family: 'Avenir', Helvetica, Arial, sans-serif;
  87.     -webkit-font-smoothing: antialiased;
  88.     -moz-osx-font-smoothing: grayscale;
  89.     text-align: center;
  90.     color: #2c3e50;
  91.     margin-top: 60px;
  92.   }
  93. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement