other / mew-iview

Commit 1c803cdfb06c4f423f7186615517f6801cebee4f

Authored by 梁灏
1 parent 79288d43

support Slider 

support Slider
Showing 3 changed files with 85 additions and 87 deletions   Show diff stats
Inline Side-by-side
src/components/base/popper.js
  Show/Hide comments   View file @1c803cd
... ... @@ -28,7 +28,7 @@ export default {
28 28 default () {
29 29 return {
30 30 gpuAcceleration: false,
31   - // boundariesElement: 'body' // todo 暂时注释，发现在 vue 2 里方向暂时可以自动识别了，待验证
  31 + boundariesElement: 'body' // todo 暂时注释，发现在 vue 2 里方向暂时可以自动识别了，待验证(还是有问题的)
32 32 };
33 33 }
34 34 },
... ...
src/components/slider/slider.vue
  Show/Hide comments   View file @1c803cd
... ... @@ -5,10 +5,10 @@
5 5 :min="min"
6 6 :max="max"
7 7 :step="step"
8   - :value="value"
  8 + :value="currentValue"
9 9 :disabled="disabled"
10 10 @on-change="handleInputChange"></Input-number>
11   - <div :class="[prefixCls + '-wrap']" v-el:slider @click.self="sliderClick">
  11 + <div :class="[prefixCls + '-wrap']" ref="slider" @click.self="sliderClick">
12 12 <template v-if="showStops">
13 13 <div :class="[prefixCls + '-stop']" v-for="item in stops" :style="{ 'left': item + '%' }" @click.self="sliderClick"></div>
14 14 </template>
... ... @@ -18,7 +18,7 @@
18 18 :class="[prefixCls + '-button-wrap']"
19 19 :style="{left: firstPosition + '%'}"
20 20 @mousedown="onFirstButtonDown">
21   - <Tooltip :controlled="firstDragging" placement="top" :content="tipFormat(value[0])" :disabled="tipDisabled" :always="showTip === 'always'" v-ref:tooltip>
  21 + <Tooltip :controlled="firstDragging" placement="top" :content="tipFormat(currentValue[0])" :disabled="tipDisabled" :always="showTip === 'always'" ref="tooltip">
22 22 <div :class="button1Classes"></div>
23 23 </Tooltip>
24 24 </div>
... ... @@ -26,7 +26,7 @@
26 26 :class="[prefixCls + '-button-wrap']"
27 27 :style="{left: secondPosition + '%'}"
28 28 @mousedown="onSecondButtonDown">
29   - <Tooltip :controlled="secondDragging" placement="top" :content="tipFormat(value[1])" :disabled="tipDisabled" :always="showTip === 'always'" v-ref:tooltip2>
  29 + <Tooltip :controlled="secondDragging" placement="top" :content="tipFormat(currentValue[1])" :disabled="tipDisabled" :always="showTip === 'always'" ref="tooltip2">
30 30 <div :class="button2Classes"></div>
31 31 </Tooltip>
32 32 </div>
... ... @@ -36,7 +36,7 @@
36 36 :class="[prefixCls + '-button-wrap']"
37 37 :style="{left: singlePosition + '%'}"
38 38 @mousedown="onSingleButtonDown">
39   - <Tooltip :controlled="dragging" placement="top" :content="tipFormat(value)" :disabled="tipDisabled" :always="showTip === 'always'" v-ref:tooltip>
  39 + <Tooltip :controlled="dragging" placement="top" :content="tipFormat(currentValue)" :disabled="tipDisabled" :always="showTip === 'always'" ref="tooltip">
40 40 <div :class="buttonClasses"></div>
41 41 </Tooltip>
42 42 </div>
... ... @@ -103,6 +103,7 @@
103 103 data () {
104 104 return {
105 105 prefixCls: prefixCls,
  106 + currentValue: this.value,
106 107 dragging: false,
107 108 firstDragging: false,
108 109 secondDragging: false,
... ... @@ -118,6 +119,22 @@
118 119 secondPosition: (this.value[1] - this.min) / (this.max - this.min) * 100
119 120 };
120 121 },
  122 + watch: {
  123 + value (val) {
  124 + this.currentValue = val;
  125 + },
  126 + currentValue (val) {
  127 + this.$nextTick(() => {
  128 + this.$refs.tooltip.updatePopper();
  129 + if (this.range) {
  130 + this.$refs.tooltip2.updatePopper();
  131 + }
  132 + });
  133 + this.updateValue(val);
  134 + this.$emit('input', val);
  135 + this.$emit('on-input', val);
  136 + }
  137 + },
121 138 computed: {
122 139 classes () {
123 140 return [
... ... @@ -158,12 +175,12 @@
158 175  
159 176 if (this.range) {
160 177 style = {
161   - width: (this.value[1] - this.value[0]) / (this.max - this.min) * 100 + '%',
162   - left: (this.value[0] - this.min) / (this.max - this.min) * 100 + '%'
  178 + width: (this.currentValue[1] - this.currentValue[0]) / (this.max - this.min) * 100 + '%',
  179 + left: (this.currentValue[0] - this.min) / (this.max - this.min) * 100 + '%'
163 180 };
164 181 } else {
165 182 style = {
166   - width: (this.value - this.min) / (this.max - this.min) * 100 + '%'
  183 + width: (this.currentValue - this.min) / (this.max - this.min) * 100 + '%'
167 184 };
168 185 }
169 186  
... ... @@ -179,22 +196,10 @@
179 196 return result;
180 197 },
181 198 sliderWidth () {
182   - return parseInt(getStyle(this.$els.slider, 'width'), 10);
  199 + return parseInt(getStyle(this.$refs.slider, 'width'), 10);
183 200 },
184 201 tipDisabled () {
185   - return this.tipFormat(this.value[0]) === null || this.showTip === 'never';
186   - }
187   - },
188   - watch: {
189   - value (val) {
190   - this.$nextTick(() => {
191   - this.$refs.tooltip.updatePopper();
192   - if (this.range) {
193   - this.$refs.tooltip2.updatePopper();
194   - }
195   - });
196   - this.updateValue(val);
197   - this.$emit('on-input', this.value);
  202 + return this.tipFormat(this.currentValue[0]) === null || this.showTip === 'never';
198 203 }
199 204 },
200 205 methods: {
... ... @@ -224,23 +229,23 @@
224 229 }
225 230 if (this.value[0] === value[0] && this.value[1] === value[1]) return;
226 231  
227   - this.value = value;
228   - this.setFirstPosition(this.value[0]);
229   - this.setSecondPosition(this.value[1]);
  232 + this.currentValue = value;
  233 + this.setFirstPosition(this.currentValue[0]);
  234 + this.setSecondPosition(this.currentValue[1]);
230 235 } else {
231 236 if (val < this.min) {
232   - this.value = this.min;
  237 + this.currentValue = this.min;
233 238 }
234 239 if (val > this.max) {
235   - this.value = this.max;
  240 + this.currentValue = this.max;
236 241 }
237   - this.setSinglePosition(this.value);
  242 + this.setSinglePosition(this.currentValue);
238 243 }
239 244 },
240 245 sliderClick (event) {
241 246 if (this.disabled) return;
242 247 const currentX = event.clientX;
243   - const sliderOffsetLeft = this.$els.slider.getBoundingClientRect().left;
  248 + const sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left;
244 249 const newPos = (currentX - sliderOffsetLeft) / this.sliderWidth * 100;
245 250  
246 251 if (this.range) {
... ... @@ -297,13 +302,14 @@
297 302 const lengthPerStep = 100 / ((this.max - this.min) / this.step);
298 303 const steps = Math.round(newPos / lengthPerStep);
299 304  
300   - this.value = Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min);
301   - this.setSinglePosition(this.value);
  305 + this.currentValue = Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min);
  306 + this.setSinglePosition(this.currentValue);
302 307 if (!this.dragging) {
303   - if (this.value !== this.oldSingleValue) {
304   - this.$emit('on-change', this.value);
305   - this.$dispatch('on-form-change', this.value);
306   - this.oldSingleValue = this.value;
  308 + if (this.currentValue !== this.oldSingleValue) {
  309 + this.$emit('on-change', this.currentValue);
  310 + // todo 事件
  311 +// this.$dispatch('on-form-change', this.currentValue);
  312 + this.oldSingleValue = this.currentValue;
307 313 }
308 314 }
309 315 }
... ... @@ -312,10 +318,11 @@
312 318 this.singlePosition = (val - this.min) / (this.max - this.min) * 100;
313 319 },
314 320 handleInputChange (val) {
315   - this.value = val;
  321 + this.currentValue = val;
316 322 this.setSinglePosition(val);
317   - this.$emit('on-change', this.value);
318   - this.$dispatch('on-form-change', this.value);
  323 + this.$emit('on-change', this.currentValue);
  324 + // todo 事件
  325 +// this.$dispatch('on-form-change', this.currentValue);
319 326 },
320 327 // for range use first
321 328 onFirstButtonDown (event) {
... ... @@ -353,13 +360,14 @@
353 360 const lengthPerStep = 100 / ((this.max - this.min) / this.step);
354 361 const steps = Math.round(newPos / lengthPerStep);
355 362  
356   - this.value = [Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min), this.value[1]];
357   - this.setFirstPosition(this.value[0]);
  363 + this.currentValue = [Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min), this.currentValue[1]];
  364 + this.setFirstPosition(this.currentValue[0]);
358 365 if (!this.firstDragging) {
359   - if (this.value[0] !== this.oldFirstValue) {
360   - this.$emit('on-change', this.value);
361   - this.$dispatch('on-form-change', this.value);
362   - this.oldFirstValue = this.value[0];
  366 + if (this.currentValue[0] !== this.oldFirstValue) {
  367 + this.$emit('on-change', this.currentValue);
  368 + // todo 事件
  369 +// this.$dispatch('on-form-change', this.currentValue);
  370 + this.oldFirstValue = this.currentValue[0];
363 371 }
364 372 }
365 373 }
... ... @@ -403,13 +411,14 @@
403 411 const lengthPerStep = 100 / ((this.max - this.min) / this.step);
404 412 const steps = Math.round(newPos / lengthPerStep);
405 413  
406   - this.value = [this.value[0], Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min)];
407   - this.setSecondPosition(this.value[1]);
  414 + this.currentValue = [this.currentValue[0], Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min)];
  415 + this.setSecondPosition(this.currentValue[1]);
408 416 if (!this.secondDragging) {
409   - if (this.value[1] !== this.oldSecondValue) {
410   - this.$emit('on-change', this.value);
411   - this.$dispatch('on-form-change', this.value);
412   - this.oldSecondValue = this.value[1];
  417 + if (this.currentValue[1] !== this.oldSecondValue) {
  418 + this.$emit('on-change', this.currentValue);
  419 + // todo 事件
  420 +// this.$dispatch('on-form-change', this.currentValue);
  421 + this.oldSecondValue = this.currentValue[1];
413 422 }
414 423 }
415 424 }
... ... @@ -418,19 +427,19 @@
418 427 this.secondPosition = (val - this.min) / (this.max - this.min) * 100;
419 428 }
420 429 },
421   - ready () {
  430 + mounted () {
422 431 if (this.range) {
423   - const isArray = Array.isArray(this.value);
424   - if (!isArray || (isArray && this.value.length != 2) || (isArray && (isNaN(this.value[0]) || isNaN(this.value[1])))) {
425   - this.value = [this.min, this.max];
  432 + const isArray = Array.isArray(this.currentValue);
  433 + if (!isArray || (isArray && this.currentValue.length != 2) || (isArray && (isNaN(this.currentValue[0]) || isNaN(this.currentValue[1])))) {
  434 + this.currentValue = [this.min, this.max];
426 435 } else {
427   - this.updateValue(this.value, true);
  436 + this.updateValue(this.currentValue, true);
428 437 }
429 438 } else {
430   - if (typeof this.value !== 'number') {
431   - this.value = this.min;
  439 + if (typeof this.currentValue !== 'number') {
  440 + this.currentValue = this.min;
432 441 }
433   - this.updateValue(this.value);
  442 + this.updateValue(this.currentValue);
434 443 }
435 444 }
436 445 };
... ...
test/routers/slider.vue
  Show/Hide comments   View file @1c803cd
1 1 <template>
2   - <div style="width: 140px;margin:100px;">
3   - {{ value }}
4   - <Slider @on-change="change" @on-input="input" :step="15"></Slider>
5   - <Slider :value="40" :tip-format="format"></Slider>
6   - <Slider :value.sync="value" show-input show-stops range @on-change="change" @on-input="input" :step="13"></Slider>
7   - <Slider :max="10"></Slider>
8   - <Slider :step="13"></Slider>
9   - <Slider :step="13" :max="60"></Slider>
10   - <Icon type="checkmark-circled" size="40" color="#f60"></Icon>
11   - <p>附近的首付款是东方红看就是</p>
12   - <div class="ivu-article">
13   - <a href="http://www.iviewui.com" target="_blank">iView</a>
14   - </div>
15   - <Slider :value="75"></Slider>
16   - <Slider :value="[20, 50]" range></Slider>
17   - <Slider :value="[20, 50]" show-tip="always"></Slider>
18   - <Slider :value="[20, 50]" show-tip="hover"></Slider>
19   - <Slider :value="[20, 50]" show-tip="never"></Slider>
  2 + <div style="margin: 100px;">
  3 + <Slider v-model="value1" :step="5" show-input></Slider>
  4 + <Slider v-model="value2" range></Slider>
  5 + <Slider v-model="value3" range disabled></Slider>
  6 + {{ value1 }}{{value2}}
  7 + <div @click="value1 = 13">change value1</div>
  8 + <br>
  9 + <Slider :value="value9" :tip-format="format"></Slider>
  10 + <Slider :value="value10" :tip-format="hideFormat"></Slider>
20 11 </div>
21 12 </template>
22 13 <script>
23   - import { Slider, Icon } from 'iview';
24 14 export default {
25   - components: { Slider, Icon },
26 15 data () {
27 16 return {
28   - value: [20, 50]
  17 + value1: 25,
  18 + value2: [20, 50],
  19 + value3: [20, 50],
  20 + value9: 25,
  21 + value10: 25
29 22 }
30 23 },
31 24 methods: {
32 25 format (val) {
33   - return null;
34   - return `进度：${val}%`
35   - },
36   - change (data) {
37   - console.log(data)
  26 + return '进度' + val + '%';
38 27 },
39   - input (value) {
40   - console.log(value)
  28 + hideFormat () {
  29 + return null;
41 30 }
42 31 }
43 32 }
... ...