63 lines
2.5 KiB
Markdown
63 lines
2.5 KiB
Markdown
|
---
|
|||
|
|
name: arco-vue-slider
|
|||
|
|
description: "Arco Design Vue 滑动输入条 Slider 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-slider>`、属性、事件、插槽、示例和实现细节。"
|
|||
|
|
user-invocable: false
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 滑动输入条 Slider
|
|||
|
|
|
|||
|
|
## 简介
|
|||
|
|
|
|||
|
|
滑动输入条的基本用法。
|
|||
|
|
|
|||
|
|
## 基本用法
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<template>
|
|||
|
|
<a-slider :default-value="50" :style="{ width: '200px' }" />
|
|||
|
|
</template>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## API
|
|||
|
|
|
|||
|
|
### `<slider>` 属性
|
|||
|
|
|
|||
|
|
|参数名|描述|类型|默认值|版本|
|
|||
|
|
|---|---|---|:---:|:---|
|
|||
|
|
|model-value **(v-model)**|绑定值|`number \| [number, number]`|`-`||
|
|||
|
|
|default-value|默认值（非受控状态）|`number \| [number, number]`|`0`||
|
|||
|
|
|step|滑动的步长|`number`|`1`||
|
|||
|
|
|min|滑动范围的最小值|`number`|`0`||
|
|||
|
|
|marks|设置显示的标签|`Record<number, string>`|`-`||
|
|||
|
|
|max|滑动范围的最大值|`number`|`100`||
|
|||
|
|
|direction|滑动输入条的方向|`Direction`|`'horizontal'`||
|
|||
|
|
|disabled|是否禁用|`boolean`|`false`||
|
|||
|
|
|show-ticks|是否显示刻度线|`boolean`|`false`||
|
|||
|
|
|show-input|是否显示输入框|`boolean`|`false`||
|
|||
|
|
|range|是否开启范围选择|`boolean`|`false`||
|
|||
|
|
|show-tooltip|是否显示tooltip|`boolean`|`true`|2.42.0|
|
|||
|
|
|
|||
|
|
### `<slider>` 事件
|
|||
|
|
|
|||
|
|
|事件名|描述|参数|
|
|||
|
|
|---|---|---|
|
|||
|
|
|change|值改变时触发|value: `number \| [number, number]`|
|
|||
|
|
|
|||
|
|
## 常用模式
|
|||
|
|
|
|||
|
|
- **禁用状态**：禁用滑动输入条。
|
|||
|
|
- **设置步长**：通过 `step` 设置步长，默认步长为 1。建议设置能够被 `max-min` 整除的值，否则会出现可选最大值小于 `max` 的情况。当设置 `show-ticks` 时，显示步长刻度线。
|
|||
|
|
- **添加文本标签**：通过设置 `marks` 可以添加文本标签。
|
|||
|
|
- **范围选择**：通过设置 `range` 可开启范围选择，此时 `modelValue` 为数组。
|
|||
|
|
- **显示输入框**：当设置 `show-input` 时，将显示输入框。
|
|||
|
|
- **竖直滑动条**：设置 `direction="vertical"` ，将会显示竖直的滑动条。
|
|||
|
|
- **自定义提示**：通过设置 `format-tooltip` 可以自定义提示文字。
|
|||
|
|
|
|||
|
|
## 最佳实践
|
|||
|
|
|
|||
|
|
- 新代码优先使用 Vue 3、Composition API 和 `<script setup lang="ts">`。
|
|||
|
|
- 模板属性使用 kebab-case，事件使用 `@event-name`，插槽使用 `#slot-name`。
|
|||
|
|
- 不要套用 React 专属 API，例如 JSX children、`Component.Sub` 或 `Form.useForm`。
|
|||
|
|
- 需要进入表单校验或提交流程的控件，优先放在 `a-form-item` 中并绑定明确的 `field`。
|
|||
|
|
- 输入值优先使用 `v-model`；范围、弹窗类状态使用组件文档中的命名 `v-model:*`。
|