html选择数字组件,Vue: 数字输入框组件

index.html:

数字输入框组件

index.js:

var app = new Vue ({

el: '#app',

data: {

value: 5

}

});

input-number.js:

function isValueNumber (value) {

return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value + '');

}

Vue.component('input-number', {

template: '\

\

type="text"\

:value="currentValue"\

@change="handleChange">\

@click="handleDown"\

:disabled="currentValue <= min">-

\

@click="handleUp"\

:disabled="currentValue >= max">+

\

',

props: {

max: {

type: Number,

default: Infinity

},

min: {

type: Number,

default: -Infinity

},

value: {

type: Number,

default: 0

}

},

data: function () {

return {

currentValue: this.value

}

},

watch: {

currentValue: function (val) {

this.$emit('input', val);

this.$emit('on-change', val);

},

value: function (val) {

this.updateValue(val);

}

},

methods: {

handleDown: function () {

if (this.currentValue <= this.min) return;

this.currentValue -= 1;

},

handleUp: function () {

if (this.currentValue >= this.max) return;

this.currentValue += 1;

},

updateValue: function (val) {

if (val > this.max) val = this.max;

if (val < this.min) val = this.min;

this.currentValue = val;

},

handleChange: function (event) {

var val = event.target.value.trim();

var max = this.max;

var min = this.min;

if (isValueNumber(val)) {

val = Number(val);

this.currentValue = val;

if (val > max) {

this.currentValue = max;

} else if (val < min) {

this.currentValue = min;

}

} else {

event.target.value = this.currentValue;

}

}

},

mounted: function () {

this.updateValue(this.value);

}

});