JSFiddle - React, Tailwind, and code Playground

by Alex Babakhanov

HTML

<script src='https://unpkg.com/[email protected]/dist/vue.js'></script>

<div id='app'>
  <p v-highlight:background="'red'">a paragraph</p>
  <p v-highlight:background.delayed="'blue'">a paragraph</p>
  <p v-highlight:color="anotherColor">another paragraph</p>
  <p v-highlight:background.blink="{color1: 'red', color2: 'blue', delay: 500}">a paragraph</p>
  <input v-model='anotherColor'/>
</div>

JavaScript

function updateStyle (el, binding, vnode) {
  let delay = 0;
  if (binding.modifiers.blink) {
    var currentColor = binding.value.color1;
    setInterval(() => {
      el.style.backgroundColor = currentColor;
      currentColor = currentColor === binding.value.color1 ? binding.value.color2 : binding.value.color1;
    }, binding.value.delay)
  }else{
    if (binding.modifiers.delayed) {
      delay = 2500;
    }
    setTimeout(() => {
      if (binding.arg === 'background') {
        el.style.backgroundColor = binding.value;
      }else if (binding.arg === 'color') {
        el.style.color = binding.value;
      }
    }, delay);
  }
}

Vue.directive('highlight', {
  bind: updateStyle,
  update: updateStyle
});

new Vue({
  el: '#app',
  data: {
    anotherColor: 'green'
  }
})