vue-input

Repository

https://github.com/livelybone/vue-input

Example

Code


See README

var vueInput = new Vue({
el: '#module',
template: '<div>' +
' <vue-input v-model="value" :config="config" @check="log" ref="input"/>' +
' <div class="value">value: {{value}}</div>' +
' <div v-if="!valid" class="error-text">value `{{value}}` is invalid</div>' +
' <button class="btn-turn" @click="turn">Turn to {{type}}</button>\n' +
'</div>',
data: function () {
var reg = /^-?/
return {
value: '',
valid: true,
config: {
inputType: 'text',
placeholder: '',
validator: function (val) {
return /^-/.test(val)
},
/*['pre','suf'], timing of validator*/
validateType: 'pre',
/*Formatting when inputting*/
preFormatter: function (val) {
console.log('preFormatter', val)
return val.replace(reg, '-')
},
/*Formatting at the end of inputting*/
sufFormatter: function (val) {
console.log('sufFormatter', val)
return val.replace(reg, '')
},
maxlength: null,
readonly: false,
/*Fixed unexpected action of auto-fill in chrome and firefox
by setting `autocomplete` to 'off' to disabled auto-fill*/
autocomplete: 'off',
autofocus: false,
disabled: false
}
}
},
computed: {
type: function () {
return this.config.inputType === 'text' ? 'textarea' : 'text'
}
},
methods: {
log: function (ev) {
console.log('check', ev)
this.valid = ev.valid
},
turn: function () {
this.config.inputType = this.type
}
},
components: { 'vue-input': VueInput }
})