1
- import hover from '../behaviors/hover' ;
2
1
import eventUtil from '../core/utils/event-util' ;
3
2
4
3
Component ( {
5
- behaviors : [ hover ] ,
6
4
externalClasses : [
7
5
'l-class' ,
8
6
'l-symbol-class' ,
@@ -35,12 +33,11 @@ Component({
35
33
* 组件的初始数据
36
34
*/
37
35
data : {
38
- focus : false ,
39
- result : 1
36
+ focus : false
40
37
} ,
41
38
42
39
observers : {
43
- 'result ' : function ( count ) {
40
+ 'count ' : function ( count ) {
44
41
eventUtil . emit ( this , 'linchange' , { count } ) ;
45
42
} ,
46
43
'count,min,max' : function ( ) {
@@ -58,97 +55,75 @@ Component({
58
55
} ,
59
56
60
57
onCount ( ) {
61
- this . setData ( {
62
- focus : true
63
- } ) ;
58
+ this . setData ( { focus : true } ) ;
64
59
} ,
65
60
66
61
onBlur ( e ) {
67
- this . setData ( {
68
- focus : false
69
- } ) ;
70
62
let {
71
63
value
72
64
} = e . detail ;
73
65
setTimeout ( ( ) => {
74
66
this . blurCount ( Number ( value ) , ( ) => {
75
- this . data . count = this . data . result ;
76
- eventUtil . emit ( this , 'lintap' , { count : this . data . result , type : 'blur' } ) ;
67
+ eventUtil . emit ( this , 'lintap' , { count : this . data . count , type : 'blur' } ) ;
77
68
} ) ;
78
69
} , 50 ) ;
79
70
} ,
80
71
81
72
blurCount ( value , callback ) {
82
73
if ( value ) {
83
74
this . valueRange ( value ) ;
84
- } else {
85
- this . setData ( {
86
- result : this . properties . count
87
- } ) ;
88
75
}
89
76
callback && callback ( ) ;
90
77
} ,
91
78
92
79
valueRange ( value , way = 'input' ) {
93
- if ( value > this . properties . max ) {
94
- this . setData ( {
95
- result : this . properties . max
96
- } , ( ) => {
97
- eventUtil . emit ( this , 'linout' , { type : 'overflow_max' , way } ) ;
98
- } ) ;
99
- } else if ( value < this . properties . min ) {
100
- this . setData ( {
101
- result : this . properties . min
102
- } , ( ) => {
103
- eventUtil . emit ( this , 'linout' , { type : 'overflow_min' , way } ) ;
104
- } ) ;
105
- } else {
106
- this . setData ( {
107
- result : value
108
- } ) ;
109
- }
110
- } ,
80
+ const { count, min, max } = this . data ;
111
81
112
- reduceTap ( ) {
113
- let distance = this . data . count - this . properties . step ;
114
- if ( distance <= this . properties . min ) {
115
- this . data . count = this . properties . min ;
116
- } else {
117
- this . data . count -= this . properties . step ;
118
- }
119
- this . setData ( {
120
- result : this . data . count
121
- } ) ;
122
- this . triggerEvent ( 'lintap' , {
123
- count : this . data . result ,
124
- type : 'reduce'
125
- } , {
126
- bubbles : true ,
127
- composed : true
82
+ // 数据错误,显示警告
83
+ way === 'parameter' && value > max && console . error ( `Counter 组件:初始值 ${ count } 大于了最大值 ${ max } ,请注意修正` ) ;
84
+ way === 'parameter' && value < min && console . error ( `Counter 组件:初始值 ${ count } 小于了最小值 ${ min } ,请注意修正` ) ;
85
+
86
+ // 触发相应事件
87
+ value > max && eventUtil . emit ( this , 'linout' , { type : 'overflow_max' , way } ) ;
88
+ value < min && eventUtil . emit ( this , 'linout' , { type : 'overflow_min' , way } ) ;
89
+
90
+ // 如果 value 越界,则修正其值
91
+ value = value > max ? max : value ;
92
+ value = value < min ? min : value ;
93
+
94
+ // 更新页面显示数值
95
+ value === this . data . count && this . setData ( { focus : false } ) ;
96
+ value !== this . data . count && this . setData ( { count : value } , ( ) => {
97
+ this . setData ( { focus : false } ) ;
128
98
} ) ;
129
99
} ,
130
100
131
- addTap ( ) {
132
- let distance = this . data . count + this . properties . step ;
133
- if ( distance >= this . properties . max ) {
134
- this . data . count = this . properties . max ;
135
- } else {
136
- this . data . count += this . properties . step ;
101
+ /**
102
+ * 点击 +/- 改变数值的监听函数
103
+ *
104
+ * @param {Object } e 事件对象
105
+ */
106
+ onTapChange ( e ) {
107
+ const type = e . currentTarget . dataset . changeType ;
108
+ const { count, step, min, max } = this . data ;
109
+ let result ;
110
+
111
+ // 根据 +/- 做不同运算
112
+ if ( type === 'add' ) {
113
+ result = count + step > max ? max : count + step ;
114
+ } else if ( type === 'reduce' ) {
115
+ result = count - step < min ? min : count - step ;
137
116
}
138
- this . setData ( {
139
- result : this . data . count
140
- } ) ;
141
- this . triggerEvent ( 'lintap' , {
142
- count : this . data . result ,
143
- type : 'add'
144
- } , {
145
- bubbles : true ,
146
- composed : true
117
+
118
+ this . setData ( { count : result } ) ;
119
+ eventUtil . emit ( this , 'lintap' , {
120
+ count : this . data . count ,
121
+ type
147
122
} ) ;
148
123
} ,
149
124
150
- onInput ( e ) {
151
- eventUtil . emit ( this , 'lininput' , e . detail ) ;
125
+ onInput ( e ) {
126
+ eventUtil . emit ( this , 'lininput' , e . detail ) ;
152
127
}
153
128
}
154
129
} ) ;
0 commit comments