vue 数字输入组件

index.html

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>数字输入组件</title>
 6     </head>
 7     <body>
 8         <div id="app">
 9             <input-number v-model="value" :max="10" :min="0"><input-number>
10         </div>
11         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
12         <script src="input-number.js"></script>
13         <script src="index.js"></script>
14     </body>
15 </html>

index.js

1 var app = new Vue({
2     el: '#app',
3     data: {
4         value: 5
5     }
6 })

input-number.js

 1 function isValueNumber(value) {
 2     return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value + '');
 3 }
 4 
 5 Vue.component('input-number', {
 6     template:'\
 7             <div class="input-number">\
 8                 <input\
 9                     type="text"\
10                     :value="currentValue"\
11                     @change="handleChange">\
12                 <button\
13                     @click="handleDown"\
14                     :disabled="currentValue <= min">-</button>\
15                 <button\
16                     @click="handleUp"\
17                     :disabled="currentValue >= max">+</button>\
18             </div>',
19     props: {
20         max: {
21             type: Number,
22             default: Infinity
23         },
24         min: {
25             type: Number,
26             default:　-Infinity
27         },
28         value: {
29             type: Number,
30             default: 0
31         }
32     },
33     data: function() {
34         return {
35             currentValue: this.value
36         }
37     },
38     watch: {
39         currentValue: function(val) {
40             this.$emit('input', val);
41             this.$emit('on-change', val);
42         },
43         value: function(val) {            
44             this.updateValue(val);
45         }
46     },
47     methods:　{
48         updateValue: function(val) {
49             if(val > this.max) val = this.max;
50             if(val < this.min) val = this.min;
51             this.currentValue = val;
52         },
53         handleDown: function() {
54             if(this.currentValue <= this.min) return;
55             this.currentValue -= 1;
56         },
57         handleUp: function() {
58             if(this.currentValue >= this.max) return;
59             this.currentValue += 1;
60         },
61         handleChange: function(event) {
62             var val = event.target.value.trim();
63             var max = this.max;
64             var min = this.min;
65             
66             if(isValueNumber(val)) {
67                 val = Number(val);
68                 this.currentValue = val;
69                 
70                 if(val > max) {
71                     this.currentValue = max;
72                 }else {
73                     console.log(event);
74                     event.target.value = this.currentValue;
75                 }
76             }
77         }
78         
79     },
80     mounted: function() {
81         this.updateValue(this.value);
82     }
83     
84 })

猜你喜欢