slider.vue
2.23 KB
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
<!--<template>-->
<!--<div style="margin: 0 400px;">-->
<!--<Slider v-model="valueSingle" @on-change="updateSingleDisplayValue"></Slider>-->
<!--<Button @click="randomSingle">change</Button> {{singleDisplayValue}}-->
<!--<Slider v-model="valueRange" range @on-change="updateRangeDisplayValue"></Slider>-->
<!--<Button @click="randomRange">change</Button> {{rangeDisplayValue}}-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--valueSingle: 10,-->
<!--valueRange: [20, 50],-->
<!--singleDisplayValue: 10,-->
<!--rangeDisplayValue: [20, 50]-->
<!--};-->
<!--},-->
<!--methods: {-->
<!--updateSingleDisplayValue (val){-->
<!--console.log('updateSingleDisplayValue', val);-->
<!--this.singleDisplayValue = val;-->
<!--},-->
<!--updateRangeDisplayValue (val){-->
<!--console.log('updateRangeDisplayValue', val);-->
<!--this.rangeDisplayValue = val.join(' - ');-->
<!--},-->
<!--randomSingle () {-->
<!--this.valueSingle = this.random(0, 100);-->
<!--},-->
<!--randomRange () {-->
<!--this.valueRange = [this.random(0, 50), this.random(50, 100)];-->
<!--},-->
<!--random (min, max){-->
<!--return Math.round(Math.random() * (max - min)) + min;-->
<!--}-->
<!--}-->
<!--};-->
<!--</script>-->
<template>
<div>
<Button type="primary" @click="modal1 = true">Display dialog box</Button>
<Modal v-model="modal1">
<Slider v-model="value2" range show-tip="always"></Slider>
</Modal>
</div>
</template>
<script>
export default {
data () {
return {
modal1: false,
value2: [20, 50],
}
},
methods: {
ok () {
this.$Message.info('Clicked ok');
},
cancel () {
this.$Message.info('Clicked cancel');
}
}
}
</script>