Slide 滑块

基础示例：

<lee-slide v-model="value" no-drag></lee-slide>

<script>
    export default {
        data() {
         return {
            value: 20           
        }        
       },
       mounted() {
         
       },
       methods: {
        
       }
    }
</script>

显示代码

风格：

<lee-slide v-model="value" theme="green"></lee-slide>

<script>
    export default {
        data() {
         return {
            value: 20           
        }        
       },
       mounted() {
         
       },
       methods: {
        
       }
    }
</script>

显示代码

尺寸：

<lee-slide v-model="value" size="s"></lee-slide>   

<script>
    export default {
        data() {
         return {
            value: 30           
        }        
       },
       mounted() {
         
       },
       methods: {
        
       }
    }
</script>

显示代码

滑动步伐：

<lee-slide v-model="value" :step="10"></lee-slide>   

<script>
    export default {
        data() {
         return {
            value: 40           
        }        
       },
       mounted() {
         
       },
       methods: {
        
       }
    }
</script>

显示代码

停顿点：

<lee-slide v-model="value" :step="10" show-stop></lee-slide>  

<script>
    export default {
        data() {
         return {
            value: 50           
        }        
       },
       mounted() {
         
       },
       methods: {
        
       }
    }
</script>

显示代码

范围选择：

<lee-slide v-model="value"></lee-slide>   

<script>
    export default {
        data() {
         return {
            value: [40, 80]           
        }        
       },
       mounted() {
         
       },
       methods: {
        
       }
    }
</script>

显示代码

Slide属性

参数	说明	类型	可选值	默认值
theme	风格	String	red,yellow,black,green,blue	blue
size	尺寸	String	s,m,l	m
v-model	初始值	Number,Array	--	0
show-tip	提示文字	Boolean	false,true	true
step	滑动步伐	Number	--	1
show-stop	停顿点	Boolean	false,true	false
no-drag	拖动点,v-model类型为Number时生效	Boolean	false,true	false