1.1.0 • Published 4 years ago
vue-lazy-input v1.1.0
vue-lazy-input
A Vue.js directive for lazily binding @input events (v-model)
<input type="range" v-model="val" v-lazy-input:debounce="700"/>
Table of contents
Installation
bundler
npm i --save vue-lazy-input
browser
<script src="https://unpkg.com/lodash/lodash.min.js"></script><!-- dependency -->
<script src="https://unpkg.com/vue-lazy-input"></script>
What it does
It wraps existing @input event listeners bound on a custom component or DOM element with either lodash debounce or throttle.
v-lazy-input must be coupled with either a v-model directive or an @input event listener, or both. On its own it does nothing.
Syntax
v-lazy-input:[type]="duration"
type is either debounce, throttle or sync (fires immediately), default is debounce.
duration is a number, default is 500.
Hence v-lazy-input
with no type nor duration is equivalent to v-lazy-input:debounce="500"
Example usage
<template>
<input type="range" v-model="val" v-lazy-input:debounce="700"/>
</template>
<!-- with global registration -->
<script>
import VueLazyInput from 'vue-lazy-input'
import Vue from 'vue'
Vue.use(VueLazyInput)
export default {
data(){
return {
val:42
}
}
}
</script>
<!-- with local registration -->
<script>
import {lazyInput} from 'vue-lazy-input'
import Vue from 'vue'
export default {
data(){
return {
val:42
}
},
directives:{
lazyInput
}
}
</script>