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 | 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x | <template> <span :class="$style.root"><slot></slot></span> </template> <script> export default { name: 'e-ripple', props: { reference: { type: [String], default: 'parent' } }, data() { return { referenceEl: undefined }; }, mounted() { this.referenceEl = this.$el.parentElement; const computedStyle = window.getComputedStyle(this.referenceEl); if (computedStyle.overflow !== 'hidden') this.referenceEl.style.overflow = 'hidden'; if (computedStyle.position === 'static') this.referenceEl.style.position = 'relative'; this.referenceEl.addEventListener('click', this.onClick); }, destroyed() { this.referenceEl.removeEventListener('click', this.onClick); }, methods: { onClick(e) { this.$el.removeAttribute('animated'); const pos = this.referenceEl.getBoundingClientRect(); this.$el.style.left = e.clientX - pos.left + 'px'; this.$el.style.top = e.clientY - pos.top + 'px'; this.$el.setAttribute('animated', 'animated'); }, }, }; </script> <style module> .root { display: block; position: absolute; z-index: 9000; background-color: var(--ripple-background); border-radius: 100%; width: var(--ripple-size); height: var(--ripple-size); margin-left: calc(var(--ripple-size) / -2); margin-top: calc(var(--ripple-size) / -2); transform: scale(0); cursor: var(--cursor-pointer); pointer-events: none; } .root[color="light"] { background-color: var(--ripple-background-light); } .root[animated] { transition: var(--ripple-transition); transform: scale(12); background-color: transparent; } .reference { position: relative !important; overflow: hidden !important; } </style> |