Vue.jsでのカスタムディレクティブの作成とユースケース

app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

app.mount('#app');

app.directive('color', {
  mounted(el, binding) {
    el.style.color = binding.value;
  }
});

app.directive('resize', {
  mounted(el, binding) {
    if (binding.modifiers.debounce) {
      let timer;
      window.addEventListener('resize', () => {
        clearTimeout(timer);
        timer = setTimeout(() => binding.value(), 300);
      });
    }
  }
});

app.directive('example', {
  beforeMount(el) {
    console.log('beforeMount');
  },
  mounted(el) {
    console.log('mounted');
  },
  updated(el) {
    console.log('updated');
  },
  unmounted(el) {
    console.log('unmounted');
  }
});

app.directive('auto-focus', {
  mounted(el) {
    el.focus();
  }
});

app.directive('click-outside', {
  mounted(el, binding) {
    el.clickOutsideEvent = (event) => {
      if (!(el === event.target || el.contains(event.target))) {
        binding.value(event);
      }
    };
    document.addEventListener('click', el.clickOutsideEvent);
  },
  unmounted(el) {
    document.removeEventListener('click', el.clickOutsideEvent);
  }
});

app.directive('tooltip', {
  mounted(el, binding) {
    el.setAttribute('title', binding.value);
  }
});