iview/examples/routers/slider.vue

34 lines
918 B
Vue
Raw Normal View History

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>
<Slider v-model="value9" :tip-format="format"></Slider>
<Slider v-model="value10" :tip-format="hideFormat"></Slider>
</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-21 18:44:07 +08:00
}
}
</script>