Evokerslider #
滑动选择器。
Props #
| 参数 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| value | number | 0 | 否 | 当前取值（支持 v-model:value） |
| min | number | 0 | 否 | 最小值 |
| max | number | 100 | 否 | 最大值 |
| step | number | 1 | 否 | 步长，取值必须大于 0，并且可被(max - min)整除 |
| disabled | boolean | false | 否 | 是否禁用 |
| active-color | color | #1989fa | 否 | 已选择的颜色 |
| background-color | color | #e5e5e5 | 否 | 背景条的颜色 |
| block-size | number | 28 | 否 | 滑块的大小 |
| block-color | color | #ffffff | 否 | 滑块的颜色 |
| show-value | boolean | false | 否 | 是否显示当前 value |
Events #
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 完成一次拖动后触发 | { value: number } |
| changing | 拖动过程中触发 | { value: number } |
Example #
vue
<template>
<slider v-model:value="value1" :step="10"></slider>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value1 = ref(50)
</script>