Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | 7x 7x 7x 7x 7x | <template> <transition :name="animation"> <div :class="$style.root" v-show="!!selected" :animation="animation"> <div :class="$style.body"> <slot></slot> <span vusion-slot-name="item"> <slot name="item" :item="node"></slot> <s-empty v-if="!$slots.item && $env.VUE_APP_DESIGNER && ($attrs['vusion-node-path'] || $attrs.designer)" :class="$style.empty"></s-empty> </span> </div> </div> </transition> </template> <script> import { MSinglexItem } from '../m-singlex.vue'; import SEmpty from '../s-empty.vue'; export default { name: 'u-carousel-item', parentName: 'u-carousel', extends: MSinglexItem, props: { title: String, node: Object, }, components: { SEmpty, }, computed: { animation() { return this.parentVM && this.parentVM.animation; }, selected() { if (this.parentVM) return this.parentVM.router ? this.active : this.parentVM.selectedVM === this; else return undefined; }, }, methods: { designerControl() { this.parentVM.select(this); }, onAnimationStart() { this.parentVM.animating = true; }, onAnimationEnd() { this.parentVM.animating = false; }, }, }; </script> <style module> .root { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition-duration: var(--carousel-transition-duration); /* display: none; */ } .body { width: 100%; height: 100%; } .body > * { width: 100%; height: 100%; } /* .root[selected] { display: block; } */ /* .root[animation="fade"] { display: block; transition: all 0.5s ease-out; opacity: 0; } .root[selcted][animation="fade"] { opacity: 1; } */ .root .empty { height: 100%; } .empty:not(:only-child){ display: none; } .root .empty:after { font-size: 60px } .root[dataSource][designer] .body { overflow: auto; } </style> |