2016-09-21 18:44:07 +08:00
|
|
|
<template>
|
2017-03-03 15:52:19 +08:00
|
|
|
<div style="margin: 100px;">
|
|
|
|
<Slider v-model="value1" :step="5" show-input></Slider>
|
|
|
|
<Slider v-model="value2" range></Slider>
|
|
|
|
<Slider v-model="value3" range disabled></Slider>
|
|
|
|
{{ value1 }}{{value2}}
|
|
|
|
<div @click="value1 = 13">change value1</div>
|
|
|
|
<br>
|
2017-03-16 10:49:01 +08:00
|
|
|
<Slider v-model="value9" :tip-format="format"></Slider>
|
|
|
|
<Slider v-model="value10" :tip-format="hideFormat"></Slider>
|
2016-11-11 15:08:12 +08:00
|
|
|
</div>
|
2016-09-21 18:44:07 +08:00
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
2016-10-28 17:35:28 +08:00
|
|
|
data () {
|
|
|
|
return {
|
2017-03-03 15:52:19 +08:00
|
|
|
value1: 25,
|
|
|
|
value2: [20, 50],
|
|
|
|
value3: [20, 50],
|
|
|
|
value9: 25,
|
|
|
|
value10: 25
|
2016-10-28 17:35:28 +08:00
|
|
|
}
|
|
|
|
},
|
2016-09-21 18:44:07 +08:00
|
|
|
methods: {
|
2016-10-28 17:35:28 +08:00
|
|
|
format (val) {
|
2017-03-03 15:52:19 +08:00
|
|
|
return '进度' + val + '%';
|
2017-01-04 17:55:22 +08:00
|
|
|
},
|
2017-03-03 15:52:19 +08:00
|
|
|
hideFormat () {
|
|
|
|
return null;
|
2016-09-22 13:42:59 +08:00
|
|
|
}
|
2016-09-21 18:44:07 +08:00
|
|
|
}
|
|
|
|
}
|
2016-10-17 12:34:20 +08:00
|
|
|
</script>
|