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 1 <template>
2 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 8 </div>
6 9 </template>
7 10 <script>
8 11 export default {
9 12 data () {
10 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 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 40 </script>
... ...