Directive Hooks — argumenty, modyfikatory, wartości

W Centrum Dowodzenia NOVA LAB każdy system wymaga precyzyjnych parametrów. Dyrektywy Vue oferują bogaty zestaw danych przez obiekt

binding

Obiekt binding

Każdy hook dyrektywy otrzymuje dwa główne parametry:

el

binding

1app.directive('demo', {
2  mounted(el, binding) {
3    // binding.value    — wartość przekazana: v-demo="123" => 123
4    // binding.arg      — argument: v-demo:color => 'color'
5    // binding.modifiers — modyfikatory: v-demo.bold => { bold: true }
6    // binding.oldValue — poprzednia wartość (w updated)
7  }
8})

Wartość dyrektywy: binding.value

Wartość to wyrażenie JavaScript przekazane po

=

1<template>
2  <div v-color="'#00ff88'">Zielony tekst</div>
3  <div v-color="themeColor">Dynamiczny kolor</div>
4  <div v-color="{ bg: '#0a0e27', text: '#00ff88' }">Obiekt</div>
5</template>

1app.directive('color', (el, binding) => {
2  if (typeof binding.value === 'string') {
3    el.style.color = binding.value
4  } else {
5    el.style.backgroundColor = binding.value.bg
6    el.style.color = binding.value.text
7  }
8})

Argumenty: binding.arg

Argument to część po dwukropku — pozwala określić, co dyrektywa ma modyfikować:

1<template>
2  <div v-style:color="'#00ff88'">Kolor tekstu</div>
3  <div v-style:backgroundColor="'#0a0e27'">Kolor tła</div>
4  <div v-style:fontSize="'20px'">Rozmiar czcionki</div>
5</template>

1app.directive('style', (el, binding) => {
2  if (binding.arg) {
3    el.style[binding.arg] = binding.value
4  }
5})

Dynamiczne argumenty

Argument może być dynamiczny — użyj nawiasów kwadratowych:

1<script setup>
2import { ref } from 'vue'
3const prop = ref('color')
4</script>
5
6<template>
7  <div v-style:[prop]="'#00ff88'">Dynamiczny atrybut</div>
8</template>

Modyfikatory: binding.modifiers

Modyfikatory to flagi boolowskie po kropce:

1<template>
2  <p v-format.bold.uppercase>stacja nova lab</p>
3</template>

1app.directive('format', (el, binding) => {
2  if (binding.modifiers.bold) {
3    el.style.fontWeight = 'bold'
4  }
5  if (binding.modifiers.uppercase) {
6    el.textContent = el.textContent.toUpperCase()
7  }
8  if (binding.modifiers.italic) {
9    el.style.fontStyle = 'italic'
10  }
11})

Łączenie wszystkiego razem

Pełna składnia dyrektywy:

1v-nazwa:argument.modyfikator1.modyfikator2="wartosc"

Przykład:

1<div v-tooltip:top.slow="'Informacja o stacji'">
2  Najedz na mnie
3</div>

Gdzie:

• tooltip

  — nazwa dyrektywy

• top

  — argument (pozycja)

• slow

  — modyfikator (animacja)

• 'Informacja o stacji'

  — wartość (tekst)