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 | 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 2x | import { Directive } from 'vue';
import { PowerGlitch, RecursivePartial, PowerGlitchOptions } from 'powerglitch';
/**
* Custom directive to glitch any DOM element. Should not be used on components.
* @remarks
* This directive is NOT compatible with v-if. If you are using v-if and v-glitch on the same component, you will encounter issues.
* Use GlitchedElement if you need to glitch an element which glitches.
* @example
* Use v-glitch on any DOM element (span, div, img, ..)
* ```html
* This will <span v-glitch>glitch</span>
* ```
* @example
* NEVER use v-glitch on an element with v-if
* ```html
* <!-- Do NOT do this -->
* This will NOT <span v-glitch v-if="...">glitch</span> correctly
* ```
*/
export const vGlitch: Directive<HTMLElement, RecursivePartial<PowerGlitchOptions> | undefined> = {
/**
* The element will be glitched once mounted
*/
mounted: (el, binding) => {
PowerGlitch.glitch(el, binding.value);
},
};
|