Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <template>
- <div class="tab-panel"
- :class="{ 'is-hiding' : !show }"
- v-show="show"
- :transition="transiton"
- transition-mode="out-in">
- <slot></slot>
- </div>
- </template>
- <script>
- module.exports = {
- data () {
- return {
- show: false,
- index: 0
- }
- },
- props: {
- header: {
- type: String
- },
- disabled: {
- type: Boolean,
- default: false
- }
- },
- computed: {
- show () {
- return this.$parent.activeIndex === this.index
- },
- transiton () {
- return this.$parent.effect
- }
- },
- created () {
- this.$parent.tabs.push({
- header: this.header,
- disabled: this.disabled
- })
- this.index = this.$parent.tabs.length - 1
- }
- }
- </script>
- <style lang="stylus" scoped>
- .tab-panel {
- &.is-hiding {
- position: absolute;
- top: 0;
- left: 50%;
- transform: translate3d(-50%, 0, 0)
- width 100%
- }
- }
- </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement