diff --git a/docs/src/pages/components/Input.vue b/docs/src/pages/components/Input.vue
index 8bc3c70..f3e3d97 100644
--- a/docs/src/pages/components/Input.vue
+++ b/docs/src/pages/components/Input.vue
@@ -71,6 +71,12 @@
Sets the type. Default text
+
+ debounce
+ Number
+ Debounce the change and input events emission. Default 300ms
+
+
disabled
Boolean
@@ -115,6 +121,12 @@
A required model object to bind the value.
+
+ debounce
+ Number
+ Debounce the change and input events emission. Default 300ms
+
+
disabled
Boolean
diff --git a/src/components/mdInputContainer/common.js b/src/components/mdInputContainer/common.js
index 4cf4800..c82fe60 100644
--- a/src/components/mdInputContainer/common.js
+++ b/src/components/mdInputContainer/common.js
@@ -1,11 +1,21 @@
export default {
props: {
value: [String, Number],
+ debounce: {
+ type: Number,
+ default: 3E2
+ },
disabled: Boolean,
required: Boolean,
maxlength: [Number, String],
+ name: String,
placeholder: String
},
+ data() {
+ return {
+ timeout: 0
+ };
+ },
watch: {
value(value) {
this.setParentValue(value);
@@ -29,6 +39,15 @@ export default {
this.parentContainer.enableCounter = this.maxlength > 0;
this.parentContainer.counterLength = this.maxlength;
},
+ lazyEventEmitter() {
+ if (this.timeout) {
+ window.clearTimeout(this.timeout);
+ }
+ this.timeout = window.setTimeout(() => {
+ this.$emit('change', this.$el.value);
+ this.$emit('input', this.$el.value);
+ }, this.debounce);
+ },
setParentValue(value) {
this.parentContainer.setValue(value || this.$el.value);
},
@@ -58,8 +77,7 @@ export default {
},
onInput() {
this.updateValues();
- this.$emit('change', this.$el.value);
- this.$emit('input', this.$el.value);
+ this.lazyEventEmitter();
}
}
};