Vue.js實現數字輸入框元件
阿新 • • 發佈：2019-01-08
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>數字輸入框元件</title> </head> <body> <div id="app"> <input-number v-model="value" :max="10" :min="0"></input-number> </div> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <script src="input-number.js"></script> <script src="index.js"></script> </body> </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: '\ <div>\ <input type="text" :value="currentValue" @change="handleChange" @keydown="handleKeydown" />\ <button @click="handleReduce" :disabled="currentValue <= min">-</button>\ <button @click="handleAdd" :disabled="currentValue >= max">+</button>\ </div>', props: { max: { type: Number, default: Infinity }, min: { type: Number, default: -Infinity }, value: { type: Number, default: 0 }, step: { type: Number, default: 1 } }, 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: { handleChange: function (event) { var val = event.target.value.trim(); if (isValueNumber(val)) { var max = this.max; var min = this.min; val = Number(val); this.currentValue = val; if (val > max) this.currentValue = max; if (val < min) this.currentValue = min; } else { event.target.value = this.currentValue; } }, handleKeydown: function (event) { if (event.keyCode == 38) { this.handleAdd(); } if (event.keyCode == 40) { this.handleReduce(); } }, handleAdd: function () { if (this.currentValue >= this.max) return; this.currentValue += this.step; }, handleReduce: function () { if (this.currentValue <= this.min) return; this.currentValue -= this.step; }, updateValue: function (val) { if (val > this.max) val = this.max; if (val < this.min) val = this.min; this.currentValue = val; } }, mounted: function () { this.updateValue(this.value); }, });