34 lines
		
	
	
		
			562 B
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			34 lines
		
	
	
		
			562 B
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | |
|   <div
 | |
|     class="tab-pane"
 | |
|     v-show="active"
 | |
|     :id="id || title"
 | |
|     :class="{ active: active }"
 | |
|     :aria-expanded="active"
 | |
|   >
 | |
|     <slot></slot>
 | |
|   </div>
 | |
| </template>
 | |
| <script>
 | |
| export default {
 | |
|   name: 'tab-pane',
 | |
|   props: ['title', 'id'],
 | |
|   inject: ['addTab', 'removeTab'],
 | |
|   data() {
 | |
|     return {
 | |
|       active: false
 | |
|     };
 | |
|   },
 | |
|   mounted() {
 | |
|     this.addTab(this);
 | |
|   },
 | |
|   destroyed() {
 | |
|     if (this.$el && this.$el.parentNode) {
 | |
|       this.$el.parentNode.removeChild(this.$el);
 | |
|     }
 | |
|     this.removeTab(this);
 | |
|   }
 | |
| };
 | |
| </script>
 | |
| <style></style>
 |