Vue

by khamer

HTML

<div id="app">
  <input type="text" v-nice:value="d">
  <br>
  {{ d }}
  <br>
  <input type="text" v-nice:value="d + d">
</div>

CSS

input {
  width: 90%;
}

Vue

Vue.directive('nice', {
    bind(el, {arg, value}) {
        el['$_v-nice'] = {
            focus: false,
            value: el[arg],
        };
        el.addEventListener('focus', () => {
            el['$_v-nice'] = { focus: true, initialValue: el[arg] };
        });
        el.addEventListener('blur', () => {
            if (el[arg] === el['$_v-nice'].initialValue && el['$_v-nice'].value) {
                el[arg] = el['$_v-nice'].value;
            }
            el['$_v-nice'] = { focus: false };
        });
        el[arg] = value;
    },
    update(el, {arg, value}) {
        if (el['$_v-nice'].focus) {
            el['$_v-nice'].value = value;
        } else {
            el[arg] = value;
        }
    },
});


new Vue({
  el: '#app',
  data: {
    d: new Date,
  },
  mounted() {
    setInterval(() => {
      this.d = new Date;
    }, 5000);
  }
})