Skip to content

Instantly share code, notes, and snippets.

@599316527
Last active August 29, 2020 19:42
Show Gist options
  • Save 599316527/7a75ad55be5a764f1a00 to your computer and use it in GitHub Desktop.
Save 599316527/7a75ad55be5a764f1a00 to your computer and use it in GitHub Desktop.
Vue.js directive: delay execute
var Vue = require('vue');
Vue.directive('delay-execute', {
acceptStatement: true,
bind: function () {
this._delayRunTimeout = parseInt(this.arg, 10) || 1000;
},
update: function (handle) {
this.reset();
this._delayRunTimer = setTimeout(handle, this._delayRunTimeout);
},
reset: function () {
clearTimeout(this._delayRunTimer);
},
unbind: function () {
this.reset();
}
});
<template>
<!-- This demo shows you an easy way to delay 5 seconds to hide the message. -->
<!-- Timer will start when message is shown, aka. `this.message` is assigned. -->
<div v-if="message" v-delay-execute:5000="close">
<button type="button" @click="close">x</button>
{{ message }}
</div>
</template>
<script>
module.exports = {
data: function () {
return {
message: null
};
}
methods: {
close: function () {
this.message = null;
},
show: function (msg) {
this.message = msg;
}
}
};
</script>
@bajki
Copy link

bajki commented Aug 20, 2018

TypeError: Cannot read property 'arg' of undefined

@hitrik
Copy link

hitrik commented Aug 29, 2020

bind: function (el, binding) {
        this._delayRunTimeout = parseInt(binding.arg, 10) || 1000;
    }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment