# 滑块 (Sliders)
v-slider
组件是一个更好的可视化数字输入工具。 它用于收集数字数据。
# 使用
滑块表示一根条上的一系列值,用户可以从中选择一个值。 滑块组件适用于调节音量、亮度,或者图像滤镜的强度。
# API
# 示例
# 属性
# 颜色
您可以使用 color、track-color 和 thumb-color 属性设置滑块的颜色。
# 禁用
您不能与 disabled 滑块交互。
# 离散的
离散滑块提供一个显示当前准确数量的标签。 您可以使用 step 属性让滑块只能选择部分值。
# 图标 (Icons)
您可以使用 append-icon 和 prepend-icon 属性添加图标到滑块。 您可以使用 @click:append
和 @click:prepend
绑定图标点击事件回调函数。
# 反向标签
带有 inverse-label 属性的 v-slider
的标签显示在末尾。
# 最小值和最大值
您可以通过 min 和 max 设置滑块的最小值和最大值。
# 只读
您不能与 readonly 滑块交互,但它们看起来与普通滑块一样。
# 步长
v-slider
可以有1以上的步长。 这对您需要更准确地调整值的应用程序可能有帮助。
# 缩略图标签
您可以使用 thumb-label 属性让滑块在滑动时始终显示缩略图标签。 可以通过 thumb-color 属性设置缩略图颜色,通过 thumb-size 属性设置大小。 使用 always-dirty 属性可使其颜色保持不变,即使在 min 值上也是如此。
# 刻度
刻度线决定了用户能将滑块移动到的预定值。
# 验证
Vuetify包括通过 规则 prop进行简单的验证。 prop 接受了各种类型 函数
, 布尔值
和 字符串
的组合。 当输入值发生变化时,数组中的每个元素将被验证。 函数传递当前的v-model 作为参数,必须返回 true
/ false
或 字符串
包含错误消息。
# 垂直滑块
您可以使用 vertical 属性将滑块切换为垂直方向。 如果您需要更改滑块的高度,请使用 CSS。
# 插槽
# 附加代码
使用 append
和 prepend
插槽来轻松自定义 v-slider
以便适应任何情况。
# 追加文本字段
滑块可以与它的 append
插槽中的其他组件合并,例如 v-text field
,以便为组件添加额外的功能。