ant-design-vue/components/slider/index.zh-CN.md
tangjinzhou 2ee3d43534
Feat css var (#5327)
* style: affix & util

* feat(alert): add customIcon slot

* feat(anchor): ts type

* style: auto-complete

* feat: avatar add crossOrigin & maxPopoverTrigger

* style(backTop): v-show instead v-if

* style: badge

* style: breadcrumb

* feat: button add global size

* feat: update i18n

* feat: picker add disabledTime

* test: update snap

* doc: update img url

* style: fix Card tabs of left position

* doc: update cascader doc

* feat: collapse

* style: comment

* style: configprovider

* feat: date-picker add soem icon slot

* style: update descriptions style

* feat: add divider orientationMargin

* doc: update drawer

* feat: dropdown add destroyPopupOnHide & loading

* style: update empty

* feat: form add labelWrap

* style: update grid

* test: update grid snap

* fix: image ts error

* fix: mentions cannot select, close #5233

* doc: update pagination change info, close #5293

* fix: table dynamic expand error, close #5295

* style: remove not use

* release 3.0.0-beta.11

* doc: update typo

* feat: input add showCount

* feat: inputNumber add prefix slot

* style: update layout

* style: update list

* feat: add locale i18

* style: update locale ts

* style: update mentions

* feat: menu divider add dashed

* perf: menu

* perf: menu animate

* feat: modal method add wrapClassName

* style: update pageheader

* feat: update pagination ts

* feat: confirm add showCancel & promise

* doc: update popover

* style: update progress

* style: radio

* style: update rate、result、row

* feat: select add fieldNames

* feat: add skeleton button & input

* feat: spin tip support slot

* style: slider & space

* stype: update steps ts type

* style: update switch

* feat: table add tree filter

* test: update input sanp

* feat: table add filterMode...

* fix: tree autoExpandParent bug

* test: update input snap

* doc: tabs add destroyInactiveTabPane

* style: update tag

* style: update timeline & time-picker

* fix: Tooltip arrowPointAtCenter 1px shift bug

* feat: typography add enterEnterIcon triggerType

* doc: update tree-select

* fix: deps and TypeScript types

* style: udpate transfer

* style: update style

* doc: add colorScheme

* chore: add css var builg

* doc: sort api

* style: lint code

* doc: add css var

* test: update snap

* chore: add pre script

* chore: update lint

* perf: collapse animate

* perf: collapse tree

* perf: typography shaking when edit

* doc: update auto-complete demo

* fix: table tree not have animate

* feat: deprecated dropdown center placement

* feat: deprecated dropdown center placement

* test: update snap
2022-03-12 09:56:32 +08:00

50 lines
2.7 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
category: Components
subtitle: 滑动输入条
type: 数据录入
title: Slider
cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
---
滑动型输入器,展示当前值和可选范围。
## 何时使用
当用户需要在数值区间/自定义区间内进行选择时,可为连续或离散值。
## API
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| autofocus | 自动获取焦点 | boolean | false | |
| disabled | 值为 `true` 时,滑块为禁用状态 | boolean | false | |
| dots | 是否只能拖拽到刻度上 | boolean | false | |
| getTooltipPopupContainer | Tooltip 渲染父节点,默认渲染到 body 上。 | Function | () => document.body | 1.5.0 |
| included | `marks` 不为空对象时有效,值为 true 时表示值为包含关系false 表示并列 | boolean | true | |
| mark | 自定义刻度标记 | v-slot:mark | { point: number, label: any } | 3.0 |
| marks | 刻度标记key 的类型必须为 `number` 且取值在闭区间 \[min, max] 内,每个标签可以单独设置样式 | object | { number: string\|VNode } or { number: { style: object, label: string\|VNode } } or { number: () => VNode } | |
| max | 最大值 | number | 100 | |
| min | 最小值 | number | 0 | |
| range | 双滑块模式 | boolean | false | |
| reverse | 反向坐标轴 | boolean | false | 1.5.0 |
| step | 步长,取值必须大于 0并且可被 (max - min) 整除。当 `marks` 不为空对象时,可以设置 `step``null`,此时 Slider 的可选值仅有 marks 标出来的部分。 | number\|null | 1 | |
| tipFormatter | Slider 会把当前值传给 `tipFormatter`,并在 Tooltip 中显示 `tipFormatter` 的返回值,若为 null则隐藏 Tooltip。 | Function\|null | IDENTITY | |
| tooltipPlacement | 设置 Tooltip 展示位置。参考 [`Tooltip`](/components/tooltip/)。 | string | | 1.5.0 |
| tooltipVisible | 值为`true`时Tooltip 将会始终显示;否则始终不显示,哪怕在拖拽及移入时。 | Boolean | | |
| value(v-model) | 设置当前取值。当 `range``false` 时,使用 `number`,否则用 `[number, number]` | number\|number\[] | | |
| vertical | 值为 `true`Slider 为垂直方向 | Boolean | false | |
### 事件
| 事件名称 | 说明 | 回调参数 | |
| --- | --- | --- | --- |
| change | 当 Slider 的值发生改变时,会触发 change 事件,并把改变后的值作为参数传入。 | Function(value) | NOOP |
| afterChange | 与 `mouseup` 触发时机一致,把当前值作为参数传入。 | Function(value) | NOOP |
## 方法
| 名称 | 描述 |
| ------- | -------- |
| blur() | 移除焦点 |
| focus() | 获取焦点 |