时间轴の插槽
hawk-X-man 5/23/2022
此部分为单独时间轴timeLine
插槽 的介绍
# 刻度条的插槽 : step
# 参数字段
- {number | string}
label
标签 - {number}
pos
在组件中的位置,按百分比计算 - {number | string}
value
滑块的值 - {boolean}
active
是否处于激活状态
# 用法
<template v-slot:step="{ obj }">
<div class="custom-step">{{ obj.value }}</div>
</template>
1
2
3
2
3
# 数字Label的插槽 : label
# 参数字段
- {number | string}
label
标签 - {number}
pos
在组件中的位置,按百分比计算 - {number | string}
value
滑块的值 - {boolean}
active
是否处于激活状态
# 用法
<template v-slot:label="{ obj }">
<div class="custom-label">{{ obj.value }}</div>
</template>
1
2
3
2
3
# 工具提示条的插槽 : tooltip
# 参数字段
- {number}
pos
在组件中的位置,按百分比计算 - {number}
index
滑块的索引 - {number | string}
value
滑块的值 - {boolean}
focus
是否处于焦点状态 - {boolean}
disabled
是否处于禁用状态
# 用法
<template v-slot:label="{ obj }">
<div class="custom-tooltip">{{ obj.value }}</div>
</template>
1
2
3
2
3
# 当前点的插槽 : dot
# 参数字段
- {number}
pos
在组件中的位置,按百分比计算 - {number}
index
滑块的索引 - {number | string}
value
滑块的值 - {boolean}
focus
是否处于焦点状态 - {boolean}
disabled
是否处于禁用状态
# 用法
<template v-slot:dot="{ obj }">
<div class="custom-label">{{ obj.value }}</div>
</template>
1
2
3
2
3