2016-09-21 18:44:07 +08:00
|
|
|
<template>
|
2016-11-11 15:08:12 +08:00
|
|
|
<div style="width: 400px;margin:100px;">
|
|
|
|
{{ value }}
|
|
|
|
<Slider @on-change="change" :step="10" show-stops></Slider>
|
2016-11-11 16:14:25 +08:00
|
|
|
<Slider :value.sync="value" show-input show-stops range @on-change="change" :step="13"></Slider>
|
2016-11-11 15:08:12 +08:00
|
|
|
<!--<Slider :max="10"></Slider>-->
|
|
|
|
<!--<Slider :step="13"></Slider>-->
|
|
|
|
<!--<Slider :step="13" :max="60"></Slider>-->
|
|
|
|
</div>
|
2016-09-21 18:44:07 +08:00
|
|
|
</template>
|
|
|
|
<script>
|
2016-10-28 17:35:28 +08:00
|
|
|
import { Slider } from 'iview';
|
2016-09-21 18:44:07 +08:00
|
|
|
export default {
|
2016-10-28 17:35:28 +08:00
|
|
|
components: { Slider },
|
|
|
|
data () {
|
|
|
|
return {
|
2016-11-11 15:08:12 +08:00
|
|
|
value: [20, 50]
|
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) {
|
|
|
|
return `进度:${val}%`
|
2016-11-11 15:08:12 +08:00
|
|
|
},
|
|
|
|
change (data) {
|
|
|
|
console.log(data)
|
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>
|