chenhaodong / mew-iview

Commit 11036a4724035b69f8c4f6a191ff364f0a887831

Authored by Sergio Crisostomo
1 parent 2b87ffa9

extend slider dev page

Showing 1 changed file with 27 additions and 7 deletions   Show diff stats
Inline Side-by-side
examples/routers/slider.vue
  Show/Hide comments   View file @11036a4
1 <template> 1 <template>
2 <div style="margin: 0 400px;"> 2 <div style="margin: 0 400px;">
3 - <Slider v-model="value" range></Slider>  
4 - <Button @click="change">change</Button> 3 + <Slider v-model="valueSingle" @on-change="updateSingleDisplayValue"></Slider>
  4 + <Button @click="randomSingle">change</Button> {{singleDisplayValue}}
  5 +
  6 + <Slider v-model="valueRange" range @on-change="updateRangeDisplayValue"></Slider>
  7 + <Button @click="randomRange">change</Button> {{rangeDisplayValue}}
5 </div> 8 </div>
6 </template> 9 </template>
7 <script> 10 <script>
8 export default { 11 export default {
9 data () { 12 data () {
10 return { 13 return {
11 - value: [20, 50]  
12 - } 14 + valueSingle: 10,
  15 + valueRange: [20, 50],
  16 + singleDisplayValue: 10,
  17 + rangeDisplayValue: [20, 50]
  18 + };
13 }, 19 },
14 methods: { 20 methods: {
15 - change () {  
16 - this.value = [30, 80]; 21 + updateSingleDisplayValue (val){
  22 + console.log('updateSingleDisplayValue', val);
  23 + this.singleDisplayValue = val;
  24 + },
  25 + updateRangeDisplayValue (val){
  26 + console.log('updateRangeDisplayValue', val);
  27 + this.rangeDisplayValue = val.join(' - ');
  28 + },
  29 + randomSingle () {
  30 + this.valueSingle = this.random(0, 100);
  31 + },
  32 + randomRange () {
  33 + this.valueRange = [this.random(0, 50), this.random(50, 100)];
  34 + },
  35 + random (min, max){
  36 + return Math.round(Math.random() * (max - min)) + min;
17 } 37 }
18 } 38 }
19 - } 39 + };
20 </script> 40 </script>