94 lines
3.2 KiB
JavaScript
94 lines
3.2 KiB
JavaScript
const vueCleave = function () {
|
|
return {
|
|
name: 'cleave',
|
|
render(el) {
|
|
return el('input', {
|
|
attrs: {
|
|
type: 'text',
|
|
value: this.value// Cleave.js will set this as initial value
|
|
},
|
|
on: {
|
|
blur: this.onBlur
|
|
}
|
|
});
|
|
},
|
|
props: {
|
|
value: {
|
|
default: null,
|
|
required: true,
|
|
validator(value) {
|
|
return value === null || typeof value === 'string' || value instanceof String || typeof value === 'number';
|
|
}
|
|
},
|
|
// https://github.com/nosir/cleave.js/blob/master/doc/options.md
|
|
options: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
// Set this prop to false to emit masked value
|
|
raw: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
// cleave.js instance
|
|
cleave: null,
|
|
// callback backup
|
|
onValueChangedFn: null
|
|
};
|
|
},
|
|
mounted() {
|
|
if (this.cleave) return;
|
|
this.cleave = new Cleave(this.$el, this.getOptions(this.options));
|
|
},
|
|
methods: {
|
|
//Inject our method in config options
|
|
getOptions(options) {
|
|
// Preserve original callback
|
|
this.onValueChangedFn = options.onValueChanged;
|
|
return Object.assign({}, options, {
|
|
onValueChanged: this.onValueChanged
|
|
});
|
|
},
|
|
//Watch for value changed by cleave and notify parent component
|
|
onValueChanged(event) {
|
|
let value = this.raw ? event.target.rawValue : event.target.value;
|
|
this.$emit('input', value);
|
|
// Call original callback method
|
|
if (typeof this.onValueChangedFn === 'function') {
|
|
this.onValueChangedFn.call(this, event);
|
|
}
|
|
},
|
|
onBlur(event) {
|
|
this.$emit('blur', this.value);
|
|
}
|
|
},
|
|
watch: {
|
|
options: {
|
|
deep: true,
|
|
handler(newOptions) {
|
|
this.cleave.destroy();
|
|
this.cleave = new Cleave(this.$el, this.getOptions(newOptions));
|
|
this.cleave.setRawValue(this.value);
|
|
}
|
|
},
|
|
value(newValue) {
|
|
if (!this.cleave) return;
|
|
// when v-model is not masked (raw)
|
|
if (this.raw && newValue === this.cleave.getRawValue()) return;
|
|
// when v-model is masked (NOT raw)
|
|
if (!this.raw && newValue === this.$el.value) return;
|
|
// Lastly set newValue
|
|
this.cleave.setRawValue(newValue);
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
if (!this.cleave) return;
|
|
this.cleave.destroy();
|
|
this.cleave = null;
|
|
this.onValueChangedFn = null;
|
|
}
|
|
};
|
|
}; |