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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 6x 6x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <script setup lang="ts">
import { onMounted, Ref, ref } from 'vue';
import { PowerGlitch } from 'powerglitch';
import { GlitchedElementRef } from './GlitchedElementRef';
const props = defineProps({
/**
* Options passed to PowerGlitch.
* @remarks
* The only option which will be ignored is `createContainers`, as this component always set this value to false.
*/
options: {
type: Object,
required: false,
default: () => ({ }),
},
/**
* Whether this component's root div should behave as an inline block or as a block.
*/
inline: {
type: Boolean,
required: false,
default: false,
},
});
/**
* Placeholder functions to start/stop the glitch, set after actually glitching the element.
*/
let startGlitch: () => void = () => void 0;
let stopGlitch: () => void = () => void 0;
/**
* Wait for the app to be mounted.
*/
const glitched: Ref<HTMLDivElement | null> = ref(null);
onMounted(() => {
({ startGlitch, stopGlitch } = PowerGlitch.glitch(glitched.value as HTMLDivElement, { ...props.options, createContainers: false }));
});
/**
* Expose glitch controls.
*/
defineExpose<GlitchedElementRef>({
startGlitch: () => startGlitch(),
stopGlitch: () => stopGlitch(),
});
</script>
<template>
<div :style="{ display: inline ? 'inline-block' : 'block' }">
<div ref="glitched">
<div>
<slot />
</div>
</div>
</div>
</template>
|