zoukankan html css js c++ java

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 })

查看全文

相关阅读:
省选测试28
省选测试27
省选测试26
省选测试25
省选测试24
省选测试23
省选测试22
省选测试21
关于maven 导入依赖的最终处理问题
 Dubbo 2 之抽取公共接口

原文地址：https://www.cnblogs.com/1032473245jing/p/9238696.html