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

查看全文

相关阅读:
Linnia学习记录
 漫漫考研路
 ENS的学习记录
 KnockoutJS 3.X API 第四章数据绑定(4) 控制流with绑定
 KnockoutJS 3.X API 第四章数据绑定(3) 控制流if绑定和ifnot绑定
 KnockoutJS 3.X API 第四章数据绑定(2) 控制流foreach绑定
 KnockoutJS 3.X API 第四章数据绑定(1) 文本及样式绑定
 KnockoutJS 3.X API 第三章计算监控属性(5) 参考手册
 KnockoutJS 3.X API 第三章计算监控属性(4)Pure computed observables
KnockoutJS 3.X API 第三章计算监控属性(3) KO如何实现依赖追踪

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