VSlider API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| append-icon | ||
| Creates a v-icon component after default content in the append slot. | ||
| center-affix | ||
| Vertically align appendInner, prependInner, clearIcon and label in the center. | ||
| color | ||
| Applies specified color to the control - supports utility colors (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page . | ||
| density | ||
| 调整组件使用的垂直高度。 | ||
| direction | ||
| 改变输入方向. | ||
| disabled | ||
| 移除组件的单击或 target 功能。 | ||
| elevation | ||
| 组件的海拔可接受 0 到 24 之间的值。你可以在 elevation page 浏览更多信息。 | ||
| error | ||
| 将输入框设置为手动错误状态。 | ||
| error-messages | ||
| 将输入框置于错误状态，并传入自定义的错误信息。将与来自 rules 属性的任何验证相结合。这个字段不会触发验证。 | ||
| focused | ||
| 强制组件使用聚焦时的样式。 | ||
| hide-details | ||
| 隐藏提示和验证错误。当设置为 auto 并且只有在有信息（提示、错误信息、计数器值等）要显示时，才会显示信息。 | ||
| hide-spin-buttons | ||
| 当类型设置为 number 时，在 input 元素上隐藏旋转按钮。 | ||
| hint | ||
| Displays hint text below the input when focused. Force this always open with the persistent-hint property. | ||
| id | ||
| Sets the DOM id on the component. | ||
| label | ||
| Sets the text of the v-label or v-field-label component. | ||
| max | ||
| Sets the maximum allowed value. | ||
| max-errors | ||
| Control the maximum number of shown errors from validation. | ||
| max-width | ||
| 设定组件的最大宽度。 | ||
| messages | ||
| 显示消息列表或消息（如果使用字符串） | ||
| min | ||
| Sets the minimum allowed value. | ||
| min-width | ||
| 设定组件的最小宽度。 | ||
| model-value | ||
| 组件 v-mode 的值。如果组件支持多属性，默认为空数组。 | ||
| name | ||
| 设置组件的 name 属性. | ||
| persistent-hint | ||
| Forces hint to always be visible. | ||
| prepend-icon | ||
| Prepends an icon to the component, uses the same syntax as v-icon. | ||
| readonly | ||
| Puts input in readonly state. | ||
| reverse | ||
| Reverses the slider direction. | ||
| ripple | ||
| 应用 v-ripple 指令。 | ||
| rounded | ||
| Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page . | ||
| rules | ||
| Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) false or is a string. | ||
| show-ticks | ||
| 显示刻度线。如果 true ，使用滑块时将显示刻度线。如果设置为 'always' ，它总是显示刻度线。 | ||
| step | ||
| If greater than 0, sets step interval for ticks. | ||
| theme | ||
| Specify a theme for this component and all of its children. | ||
| thumb-color | ||
| Sets the thumb and thumb label color. | ||
| thumb-label | ||
| 显示拇指标签 | ||
| thumb-size | ||
| 控制缩略图标签的大小。 | ||
| tick-size | ||
| 控制 ticks 的大小 | ||
| ticks | ||
| 显示刻度线。如果 true ，使用滑块时将显示刻度线。如果设置为 'always' ，它总是显示刻度线。 | ||
| tile | ||
| Removes any applied border-radius from the component. | ||
| track-color | ||
| 设置刻度线颜色 | ||
| track-fill-color | ||
| 设置刻度线填充颜色 | ||
| track-size | ||
| Sets the track’s size (height). | ||
| validate-on | ||
| Change what type of event triggers validation to run. | ||
| validation-value | ||
| The value used when applying validation rules. | ||
| width | ||
| 设定组件的宽度。 | ||
事件
| 名称 | 类型 |
|---|---|
| click:append | |
| Emitted when appended icon is clicked. | |
| click:prepend | |
| Emitted when appended icon is clicked. | |
| end | |
| Slider value emitted at the end of slider movement. | |
| start | |
| Slider value emitted at start of slider movement. | |
| update:focused | |
| Event that is emitted when the component’s focus state changes. | |
| update:modelValue | |
| 当组件的 model-value 更改时引发的事件。 | |
插槽
| append |
| Adds an item inside the input and after input content. |
| default |
| 默认Vue 插槽。 |
| details |
| Slot for custom input details to modifying the display of messages. |
| label |
| The default slot of the v-label or v-field-label component. |
| message |
| Slot used to customize the message content. |
| prepend |
| Adds an item outside the input and before input content. |
| thumb-label |
| Slot for the thumb label. |
| tick-label |
| Slot for the tick label. |
SASS 变量
| 名称 | 默认值 |
|---|---|
| $slider-horizontal-end | |
| $slider-horizontal-min-height | |
| $slider-horizontal-start | |
| $slider-label-margin-end | |
| $slider-label-margin-start | |
| $slider-state-track-background-opacity | |
| $slider-thumb-border-radius | |
| $slider-thumb-focus-opacity | |
| $slider-thumb-focused-size-increase | |
| $slider-thumb-hover-opacity | |
| $slider-thumb-label-border-radius | |
| $slider-thumb-label-font-size | |
| $slider-thumb-label-height | |
| $slider-thumb-label-min-width | |
| $slider-thumb-label-offset | |
| $slider-thumb-label-padding | |
| $slider-thumb-label-transition | |
| $slider-thumb-label-wedge-size | |
| $slider-thumb-pressed-opacity | |
| $slider-thumb-touch-size | |
| $slider-tick-background | |
| $slider-tick-border-radius | |
| $slider-tick-label-margin-start | |
| $slider-tick-label-margin-top | |
| $slider-track-active-size | |
| $slider-track-active-size-offset | |
| $slider-track-border-radius | |
| $slider-transition | |
| $slider-vertical-margin-bottom | |
| $slider-vertical-margin-top | |
| $slider-vertical-min-height | |