793 lines
26 KiB
HTML
793 lines
26 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<title>Code coverage report for packages/picker/src/picker-column.vue</title>
|
||
<meta charset="utf-8" />
|
||
<link rel="stylesheet" href="../../../prettify.css" />
|
||
<link rel="stylesheet" href="../../../base.css" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<style type='text/css'>
|
||
.coverage-summary .sorter {
|
||
background-image: url(../../../sort-arrow-sprite.png);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class='wrapper'>
|
||
<div class='pad1'>
|
||
<h1>
|
||
<a href="../../../index.html">all files</a> / <a href="index.html">packages/picker/src/</a> picker-column.vue
|
||
</h1>
|
||
<div class='clearfix'>
|
||
<div class='fl pad1y space-right2'>
|
||
<span class="strong">12% </span>
|
||
<span class="quiet">Statements</span>
|
||
<span class='fraction'>9/75</span>
|
||
</div>
|
||
<div class='fl pad1y space-right2'>
|
||
<span class="strong">22.22% </span>
|
||
<span class="quiet">Branches</span>
|
||
<span class='fraction'>4/18</span>
|
||
</div>
|
||
<div class='fl pad1y space-right2'>
|
||
<span class="strong">5.26% </span>
|
||
<span class="quiet">Functions</span>
|
||
<span class='fraction'>1/19</span>
|
||
</div>
|
||
<div class='fl pad1y space-right2'>
|
||
<span class="strong">5.71% </span>
|
||
<span class="quiet">Lines</span>
|
||
<span class='fraction'>4/70</span>
|
||
</div>
|
||
<div class='fl pad1y'>
|
||
<span class="strong">1 branch</span>
|
||
<span class="quiet">Ignored</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class='status-line low'></div>
|
||
<pre><table class="coverage">
|
||
<tr><td class="line-count quiet">1
|
||
2
|
||
3
|
||
4
|
||
5
|
||
6
|
||
7
|
||
8
|
||
9
|
||
10
|
||
11
|
||
12
|
||
13
|
||
14
|
||
15
|
||
16
|
||
17
|
||
18
|
||
19
|
||
20
|
||
21
|
||
22
|
||
23
|
||
24
|
||
25
|
||
26
|
||
27
|
||
28
|
||
29
|
||
30
|
||
31
|
||
32
|
||
33
|
||
34
|
||
35
|
||
36
|
||
37
|
||
38
|
||
39
|
||
40
|
||
41
|
||
42
|
||
43
|
||
44
|
||
45
|
||
46
|
||
47
|
||
48
|
||
49
|
||
50
|
||
51
|
||
52
|
||
53
|
||
54
|
||
55
|
||
56
|
||
57
|
||
58
|
||
59
|
||
60
|
||
61
|
||
62
|
||
63
|
||
64
|
||
65
|
||
66
|
||
67
|
||
68
|
||
69
|
||
70
|
||
71
|
||
72
|
||
73
|
||
74
|
||
75
|
||
76
|
||
77
|
||
78
|
||
79
|
||
80
|
||
81
|
||
82
|
||
83
|
||
84
|
||
85
|
||
86
|
||
87
|
||
88
|
||
89
|
||
90
|
||
91
|
||
92
|
||
93
|
||
94
|
||
95
|
||
96
|
||
97
|
||
98
|
||
99
|
||
100
|
||
101
|
||
102
|
||
103
|
||
104
|
||
105
|
||
106
|
||
107
|
||
108
|
||
109
|
||
110
|
||
111
|
||
112
|
||
113
|
||
114
|
||
115
|
||
116
|
||
117
|
||
118
|
||
119
|
||
120
|
||
121
|
||
122
|
||
123
|
||
124
|
||
125
|
||
126
|
||
127
|
||
128
|
||
129
|
||
130
|
||
131
|
||
132
|
||
133
|
||
134
|
||
135
|
||
136
|
||
137
|
||
138
|
||
139
|
||
140
|
||
141
|
||
142
|
||
143
|
||
144
|
||
145
|
||
146
|
||
147
|
||
148
|
||
149
|
||
150
|
||
151
|
||
152
|
||
153
|
||
154
|
||
155
|
||
156
|
||
157
|
||
158
|
||
159
|
||
160
|
||
161
|
||
162
|
||
163
|
||
164
|
||
165
|
||
166
|
||
167
|
||
168
|
||
169
|
||
170
|
||
171
|
||
172
|
||
173
|
||
174
|
||
175
|
||
176
|
||
177
|
||
178
|
||
179
|
||
180
|
||
181
|
||
182
|
||
183
|
||
184
|
||
185
|
||
186
|
||
187
|
||
188
|
||
189
|
||
190
|
||
191
|
||
192
|
||
193
|
||
194
|
||
195
|
||
196
|
||
197
|
||
198
|
||
199
|
||
200
|
||
201
|
||
202
|
||
203
|
||
204
|
||
205
|
||
206
|
||
207
|
||
208
|
||
209
|
||
210
|
||
211
|
||
212
|
||
213
|
||
214
|
||
215
|
||
216
|
||
217
|
||
218
|
||
219
|
||
220
|
||
221
|
||
222
|
||
223
|
||
224
|
||
225
|
||
226
|
||
227
|
||
228
|
||
229
|
||
230
|
||
231
|
||
232
|
||
233
|
||
234
|
||
235
|
||
236
|
||
237
|
||
238
|
||
239
|
||
240
|
||
241
|
||
242</td><td class="line-coverage quiet"><span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-yes">1×</span>
|
||
<span class="cline-any cline-yes">1×</span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-yes">1×</span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-no"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span>
|
||
<span class="cline-any cline-neutral"> </span></td><td class="text"><pre class="prettyprint lang-js">//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
|
||
import translateUtil from 'src/utils/transition';
|
||
import draggable from './draggable';
|
||
|
||
const DEFAULT_ITEM_HEIGHT = 44;
|
||
|
||
export default <span class="fstat-no" title="function not covered" ><span class="fstat-no" title="function not covered" >{</span></span>
|
||
name: 'zan-picker-column',
|
||
|
||
props: {
|
||
/**
|
||
* 每一列可见备选元素的个数
|
||
*/
|
||
visibileColumnCount: {
|
||
type: Number,
|
||
default: 5
|
||
},
|
||
/**
|
||
* 该列所有的可选值
|
||
*/
|
||
values: <span class="fstat-no" title="function not covered" >{</span>
|
||
type: Array,
|
||
default() {
|
||
<span class="cstat-no" title="statement not covered" > r</span>eturn [];
|
||
}
|
||
},
|
||
/**
|
||
* 每列添加额外的`className`
|
||
*/
|
||
className: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
/**
|
||
* 行高
|
||
*/
|
||
itemHeight: {
|
||
type: Number,
|
||
default: DEFAULT_ITEM_HEIGHT
|
||
},
|
||
value: {}
|
||
},
|
||
|
||
data() {
|
||
<span class="cstat-no" title="statement not covered" > r</span>eturn {
|
||
currentValue: this.value,
|
||
currentValues: this.values,
|
||
isDragging: false
|
||
};
|
||
},
|
||
|
||
watch: <span class="fstat-no" title="function not covered" ><span class="fstat-no" title="function not covered" ><span class="fstat-no" title="function not covered" >{</span></span></span>
|
||
values(val) {
|
||
<span class="cstat-no" title="statement not covered" > t</span>his.currentValues = val;
|
||
},
|
||
|
||
currentValues(val) {
|
||
<span class="cstat-no" title="statement not covered" > if (this.valueIndex === -1) {</span>
|
||
<span class="cstat-no" title="statement not covered" > t</span>his.currentValue = (val || [])[0];
|
||
}
|
||
},
|
||
|
||
currentValue(val) {
|
||
<span class="cstat-no" title="statement not covered" > t</span>his.doOnValueChange();
|
||
|
||
<span class="cstat-no" title="statement not covered" > t</span>his.$emit('change', this);
|
||
}
|
||
},
|
||
|
||
computed: <span class="fstat-no" title="function not covered" ><span class="fstat-no" title="function not covered" ><span class="fstat-no" title="function not covered" ><span class="fstat-no" title="function not covered" >{</span></span></span></span>
|
||
/**
|
||
* picker可见备选元素总高度
|
||
*/
|
||
visibleContentHeight() {
|
||
<span class="cstat-no" title="statement not covered" > r</span>eturn this.itemHeight * this.visibileColumnCount;
|
||
},
|
||
|
||
/**
|
||
* 当前选中值在`values`中的索引
|
||
*/
|
||
valueIndex() {
|
||
<span class="cstat-no" title="statement not covered" > r</span>eturn this.currentValues.indexOf(this.currentValue);
|
||
},
|
||
|
||
/**
|
||
* 计算picker的拖动范围
|
||
*/
|
||
dragRange() {
|
||
<span class="cstat-no" title="statement not covered" > v</span>ar values = this.currentValues;
|
||
<span class="cstat-no" title="statement not covered" > v</span>ar visibileColumnCount = this.visibileColumnCount;
|
||
<span class="cstat-no" title="statement not covered" > v</span>ar itemHeight = this.itemHeight;
|
||
|
||
<span class="cstat-no" title="statement not covered" > r</span>eturn [ -itemHeight * (values.length - Math.ceil(visibileColumnCount / 2)), itemHeight * Math.floor(visibileColumnCount / 2) ];
|
||
},
|
||
|
||
/**
|
||
* 计算`classNames`
|
||
*/
|
||
classNames() {
|
||
<span class="cstat-no" title="statement not covered" > r</span>eturn this.className.split(' ');
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
<span class="cstat-no" title="statement not covered" > t</span>his.initEvents();
|
||
<span class="cstat-no" title="statement not covered" > t</span>his.doOnValueChange();
|
||
},
|
||
|
||
methods: <span class="fstat-no" title="function not covered" ><span class="fstat-no" title="function not covered" ><span class="fstat-no" title="function not covered" ><span class="fstat-no" title="function not covered" >{</span></span></span></span>
|
||
/**
|
||
* 将当前`value`值转换成需要垂直方向需要`translate`的值
|
||
*/
|
||
value2Translate(value) {
|
||
<span class="cstat-no" title="statement not covered" > l</span>et values = this.currentValues;
|
||
<span class="cstat-no" title="statement not covered" > l</span>et valueIndex = values.indexOf(value);
|
||
<span class="cstat-no" title="statement not covered" > l</span>et offset = Math.floor(this.visibileColumnCount / 2);
|
||
<span class="cstat-no" title="statement not covered" > l</span>et itemHeight = this.itemHeight;
|
||
|
||
<span class="cstat-no" title="statement not covered" > if (valueIndex !== -1) {</span>
|
||
<span class="cstat-no" title="statement not covered" > r</span>eturn (valueIndex - offset) * (-itemHeight);
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 根据当前`translate`的值转换成当前选中的`value`
|
||
*/
|
||
translate2Value(translate) {
|
||
<span class="cstat-no" title="statement not covered" > l</span>et itemHeight = this.itemHeight;
|
||
<span class="cstat-no" title="statement not covered" > t</span>ranslate = Math.round(translate / itemHeight) * itemHeight;
|
||
|
||
<span class="cstat-no" title="statement not covered" > l</span>et index = -(translate - Math.floor(this.visibileColumnCount / 2) * itemHeight) / itemHeight;
|
||
|
||
<span class="cstat-no" title="statement not covered" > r</span>eturn this.currentValues[index];
|
||
},
|
||
|
||
/**
|
||
* 初始化拖动事件
|
||
*/
|
||
initEvents() <span class="cstat-no" title="statement not covered" >{</span>
|
||
<span class="cstat-no" title="statement not covered" > v</span>ar el = this.$refs.wrapper;
|
||
<span class="cstat-no" title="statement not covered" > v</span>ar dragState = {};
|
||
|
||
<span class="cstat-no" title="statement not covered" > v</span>ar velocityTranslate;
|
||
<span class="cstat-no" title="statement not covered" > v</span>ar prevTranslate;
|
||
<span class="cstat-no" title="statement not covered" > var pickerItems; // eslint-disable-line</span>
|
||
|
||
<span class="cstat-no" title="statement not covered" > d</span>raggable(el, {
|
||
start: <span class="fstat-no" title="function not covered" >(event) => {</span>
|
||
// 存储当前状态
|
||
<span class="cstat-no" title="statement not covered" > d</span>ragState = {
|
||
range: this.dragRange,
|
||
start: new Date(),
|
||
startLeft: event.pageX,
|
||
startTop: event.pageY,
|
||
startTranslateTop: translateUtil.getElementTranslate(el).top
|
||
};
|
||
<span class="cstat-no" title="statement not covered" > pickerItems = el.querySelectorAll('.zan-picker-item'); // eslint-disable-line</span>
|
||
},
|
||
|
||
drag: <span class="fstat-no" title="function not covered" >(event) => {</span>
|
||
<span class="cstat-no" title="statement not covered" > t</span>his.isDragging = true;
|
||
|
||
<span class="cstat-no" title="statement not covered" > d</span>ragState.left = event.pageX;
|
||
<span class="cstat-no" title="statement not covered" > d</span>ragState.top = event.pageY;
|
||
|
||
<span class="cstat-no" title="statement not covered" > l</span>et deltaY = dragState.top - dragState.startTop;
|
||
<span class="cstat-no" title="statement not covered" > l</span>et translate = dragState.startTranslateTop + deltaY;
|
||
|
||
<span class="cstat-no" title="statement not covered" > t</span>ranslateUtil.translateElement(el, null, translate);
|
||
|
||
<span class="cstat-no" title="statement not covered" > v</span>elocityTranslate = translate - prevTranslate || translate;
|
||
|
||
<span class="cstat-no" title="statement not covered" > p</span>revTranslate = translate;
|
||
},
|
||
|
||
end: <span class="fstat-no" title="function not covered" >() => {</span>
|
||
<span class="cstat-no" title="statement not covered" > if (this.isDragging) {</span>
|
||
<span class="cstat-no" title="statement not covered" > t</span>his.isDragging = false;
|
||
|
||
<span class="cstat-no" title="statement not covered" > v</span>ar momentumRatio = 7;
|
||
<span class="cstat-no" title="statement not covered" > v</span>ar currentTranslate = translateUtil.getElementTranslate(el).top;
|
||
<span class="cstat-no" title="statement not covered" > v</span>ar duration = new Date() - dragState.start;
|
||
|
||
<span class="cstat-no" title="statement not covered" > v</span>ar momentumTranslate;
|
||
<span class="cstat-no" title="statement not covered" > if (duration < 300) {</span>
|
||
<span class="cstat-no" title="statement not covered" > m</span>omentumTranslate = currentTranslate + velocityTranslate * momentumRatio;
|
||
}
|
||
|
||
<span class="cstat-no" title="statement not covered" > v</span>ar dragRange = dragState.range;
|
||
|
||
<span class="cstat-no" title="statement not covered" > t</span>his.$nextTick(<span class="fstat-no" title="function not covered" >() => {</span>
|
||
<span class="cstat-no" title="statement not covered" > v</span>ar translate;
|
||
<span class="cstat-no" title="statement not covered" > v</span>ar itemHeight = this.itemHeight;
|
||
|
||
<span class="cstat-no" title="statement not covered" > if (momentumTranslate) {</span>
|
||
<span class="cstat-no" title="statement not covered" > t</span>ranslate = Math.round(momentumTranslate / itemHeight) * itemHeight;
|
||
} else {
|
||
<span class="cstat-no" title="statement not covered" > t</span>ranslate = Math.round(currentTranslate / itemHeight) * itemHeight;
|
||
}
|
||
|
||
<span class="cstat-no" title="statement not covered" > t</span>ranslate = Math.max(Math.min(translate, dragRange[1]), dragRange[0]);
|
||
|
||
<span class="cstat-no" title="statement not covered" > t</span>ranslateUtil.translateElement(el, null, translate);
|
||
|
||
<span class="cstat-no" title="statement not covered" > t</span>his.currentValue = this.translate2Value(translate);
|
||
});
|
||
}
|
||
|
||
<span class="cstat-no" title="statement not covered" > d</span>ragState = {};
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* `value`改变时调用
|
||
*/
|
||
doOnValueChange() {
|
||
<span class="cstat-no" title="statement not covered" > l</span>et value = this.currentValue;
|
||
<span class="cstat-no" title="statement not covered" > l</span>et wrapper = this.$refs.wrapper;
|
||
|
||
<span class="cstat-no" title="statement not covered" > t</span>his.$emit('input', this.currentValue);
|
||
|
||
<span class="cstat-no" title="statement not covered" > t</span>ranslateUtil.translateElement(wrapper, null, this.value2Translate(value));
|
||
}
|
||
}
|
||
};
|
||
|
||
</pre></td></tr>
|
||
</table></pre>
|
||
<div class='push'></div><!-- for sticky footer -->
|
||
</div><!-- /wrapper -->
|
||
<div class='footer quiet pad2 space-top1 center small'>
|
||
Code coverage
|
||
generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Thu Mar 02 2017 17:21:26 GMT+0800 (CST)
|
||
</div>
|
||
</div>
|
||
<script src="../../../prettify.js"></script>
|
||
<script>
|
||
window.onload = function () {
|
||
if (typeof prettyPrint === 'function') {
|
||
prettyPrint();
|
||
}
|
||
};
|
||
</script>
|
||
<script src="../../../sorter.js"></script>
|
||
</body>
|
||
</html>
|