vue#Directive TypeScript Examples

The following examples show how to use vue#Directive. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: v-click-away.ts    From elenext with MIT License 6 votes vote down vote up 
vClickAway: Directive = {
  beforeMount() {
    console.log('beforeMount')
  },
  mounted(el, { value }) {
    el.__el__vClickAway = (event: any) => {
      if (el.contains(event.target)) {
        return
      }
      value(event)
    }
    console.log(el)

    document.addEventListener(defaultEvent, el.__el__vClickAway)
  },
  beforeUnmount(el) {
    console.log(el)
    document.removeEventListener(defaultEvent, el.__el__vClickAway)
  }
}
Example #2
Source File: permission.ts    From vite-vue3-ts with MIT License 5 votes vote down vote up 
authDirective: Directive = {
  mounted,
}
Example #3
Source File: role.ts    From vite-vue3-ts with MIT License 5 votes vote down vote up 
authDirective: Directive = {
  mounted,
}
Example #4
Source File: index.ts    From v-wave with MIT License 5 votes vote down vote up 
createDirective = (
  globalUserOptions: Partial<IVWaveDirectiveOptions> = {},
  app: App | 'vue2' | 'vue3' = 'vue3'
): DirectiveList => {
  const globalOptions = { ...DEFAULT_PLUGIN_OPTIONS, ...globalUserOptions }

  const hooks = getHooks(app)

  const handleTrigger = (event: PointerEvent) => {
    const trigger = (event.currentTarget as HTMLElement).dataset.vWaveTrigger

    const associatedElements = document.querySelectorAll(
      `[data-v-wave-boundary="${trigger}"]`
    ) as NodeListOf<HTMLElement>

    associatedElements.forEach((el) => wave(event, el, { ...globalOptions, ...optionMap.get(el) }))
  }

  const waveDirective: Directive = {
    [hooks.mounted](el: HTMLElement, { value = {} }: DirectiveBinding<Partial<IVWaveDirectiveOptions> | false>) {
      optionMap.set(el, value)

      markWaveBoundary(el, (value && value.trigger) ?? globalOptions.trigger)

      el.addEventListener('pointerdown', (event) => {
        if (optionMap.get(el) === false) return

        const options = { ...globalOptions, ...optionMap.get(el)! }

        if (options.trigger === false) return wave(event, el, options)

        if (triggerIsID(options.trigger)) return
        const trigger = el.querySelector('[data-v-wave-trigger="true"]')
        if (!trigger && options.trigger === true) return
        if (trigger && !event.composedPath().includes(trigger)) return

        wave(event, el, options)
      })
    },
    [hooks.updated](el: HTMLElement, { value = {} }: DirectiveBinding<Partial<IVWaveDirectiveOptions> | false>) {
      optionMap.set(el, value)
      markWaveBoundary(el, (value && value.trigger) ?? globalOptions.trigger)
    }
  }

  const triggerDirective: Directive = {
    [hooks.mounted](el: HTMLElement, { arg: trigger = 'true' }: DirectiveBinding) {
      el.dataset.vWaveTrigger = trigger

      if (trigger !== 'true') el.addEventListener('pointerdown', handleTrigger)
    },

    [hooks.updated](el: HTMLElement, { arg: trigger = 'true' }: DirectiveBinding) {
      el.dataset.vWaveTrigger = trigger

      if (trigger === 'true') el.removeEventListener('pointerdown', handleTrigger)
      else el.addEventListener('pointerdown', handleTrigger)
    }
  }

  return {
    wave: waveDirective,
    vWave: waveDirective,
    waveTrigger: triggerDirective,
    vWaveTrigger: triggerDirective
  }
}