【Nuxt.js】カスタムディレクティブ基礎編：とりあえず使ってみよう！

前置き

Vue.jsのカスタムディレクティブをNuxt.jsで！
ローカルverとグローバルverで、
どちらでも使いやすく簡単な例で紹介。
今回は背景色を変えるだけです。

…とはいえfilterはよく使われますが
実際こちらはなかなか見かけませんね。
カスタムディレクティブの良い使い方があれば
教えていただけると嬉しいです…😀

※併用する場合
同じディレクティブ名にしてしまうと
ローカルに記載された方が優先されます。
名前は分けましょう！

ローカルver

) pages

directivesで命名した物を
v-{{ name }}で記載するだけ！
今回はdiv全体に背景色をつけるため
divにv-bgを指定しております。

<template>
  <div v-bg>
    <p>divで囲った部分の背景が変わる</p>
  </div>
</template>

<script>
export default {
 directives: {
   'bg': {
     bind(el, binding, vnode) {
       el.style.backgroundColor = 'lightgreen';
     }
   }
 },
}
</script>

<p>divで囲った部分の背景が変わる</p>

</div>

</template>

export default {

directives: {

'bg': {

bind(el, binding, vnode) {

el.style.backgroundColor = 'lightgreen';

}

</script>

グローバルver

directory

pages/
--| index.vue

plugins/
--| bg.js

nuxt.config.js

パターン1

・/pluginsにjsファイルを追加
・nuxt.config.jsのpluginsに記載
・template内にv-{{ name }}を書くだけ！

) file

import Vue from 'vue'

Vue.directive('bg', {
 bind(el, binding, vnode) {
   el.style.backgroundColor = 'lightgreen';
 }
})

import Vue from 'vue'

Vue.directive('bg', {

bind(el, binding, vnode) {

el.style.backgroundColor = 'lightgreen';

}

})

plugins: [
   '~plugins/background.js'
 ],

plugins: [

'~plugins/background.js'

) pages

<template>
  <div v-bg>
    <p>divで囲った部分の背景が変わる</p>
  </div>
</template>

<p>divで囲った部分の背景が変わる</p>

</div>

</template>

パターン2-1

jsで直接値の指定はせず、
使用箇所で好きな値を指定できます。

) file

// 変更前
el.style.backgroundColor = 'green';

// 変更後
el.style.backgroundColor = binding.value;

// 変更前

el.style.backgroundColor = 'green';

// 変更後

el.style.backgroundColor = binding.value;

) pages

// 変更前
<div v-bg>

// 変更後
<div v-bg="'green'">

// 変更前

// 変更後

パターン2-2

argを使用した場合です。
argはpropsのようなイメージですね。
いくつもデータを渡せます♪
https://jp.vuejs.org/v2/guide/custom-directive.html#ディレクティブフック引数

) file

import Vue from 'vue'

Vue.directive('bg', {
 bind(el, binding, vnode) {
   // バインドされたargが文字列backgroundだった場合の処理
   if (binding.arg === 'background') {
     el.style.backgroundColor = binding.value;
   // そうでない場合の処理
   } else {
     el.style.color = binding.value;
   }
 }
})

import Vue from 'vue'

Vue.directive('bg', {

bind(el, binding, vnode) {

// バインドされたargが文字列backgroundだった場合の処理

if (binding.arg === 'background') {

el.style.backgroundColor = binding.value;

// そうでない場合の処理

} else {

el.style.color = binding.value;

}

})

) pages

<template>
  <div>
    // argは:background部分
    <div v-bg:background="'lightgreen'">
      <p>背景が変わる</p>
    </div>
    <div v-bg:color="'green'">
      <p>文字色が変わる</p>
    </div>
  </div>
</template>

<div>

// argは:background部分

<p>背景が変わる</p>

</div>

<p>文字色が変わる</p>

</div>

</template>

modifiersを使ってみる

時間で色を変えてます🌟

<template>
  <div class="page">
    <div v-bg:background.delayed="'green'">
      <p>背景が変わる</p>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  directives: {
    'bg': {
      bind(el, binding, vnode) {
        var delay = 0;
        // 修飾子(modifiers)が文字列delayedなら以下の処理
        if (binding.modifiers['delayed']) {
          delay = 3000;
        }
        setTimeout(() => {
          if (binding.arg == 'background') {
            el.style.backgroundColor = binding.value;
          } else {
            el.style.color = binding.value;
          }
        }, delay);
      }
    }
  },
  }
</script>

<p>背景が変わる</p>

</div>

</template>

import Vue from 'vue'

export default {

directives: {

'bg': {

bind(el, binding, vnode) {

var delay = 0;

// 修飾子(modifiers)が文字列delayedなら以下の処理

if (binding.modifiers['delayed']) {

delay = 3000;

}

setTimeout(() => {

if (binding.arg == 'background') {

el.style.backgroundColor = binding.value;

} else {

el.style.color = binding.value;

}

}, delay);

}

</script>