91 lines
2.5 KiB
Markdown
91 lines
2.5 KiB
Markdown
|
# Slider 滑块
|
|||
|
|
|
|||
|
|
支持单向滑块和双向滑块。
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 基本用法
|
|||
|
|
|
|||
|
|
`v-model` 为绑定值。如果为 number 类型则显示一个滑块，如果为 array 类型则显示两个滑块。
|
|||
|
|
```html
|
|||
|
|
<wd-slider v-model="value"/>
|
|||
|
|
```
|
|||
|
|
```typescript
|
|||
|
|
const value = ref<number>(30)
|
|||
|
|
```
|
|||
|
|
## 双滑块
|
|||
|
|
|
|||
|
|
双滑块模式下 `value` 为 `二元数组` 类型。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-slider v-model="value" />
|
|||
|
|
```
|
|||
|
|
```typescript
|
|||
|
|
const value = ref<number[]>([10, 30])
|
|||
|
|
```
|
|||
|
|
## 最大值最小值
|
|||
|
|
|
|||
|
|
设置 `min` 最小值，`min` 最大值。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-slider v-model="value" :min="4" :max="1000" />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 隐藏文案
|
|||
|
|
|
|||
|
|
设置 `hide-label` 隐藏滑块当前值。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-slider v-model="value" hide-label/>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
设置 `hide-min-max` 隐藏最大最小值。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-slider v-model="value" hide-min-max />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 禁用
|
|||
|
|
|
|||
|
|
设置 `disabled` 属性。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-slider v-model="value" disabled />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Attributes
|
|||
|
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
|||
|
|
|-----|---------------------------|-----|-------|-------|-------|
|
|||
|
|
| v-model | 滑块值，如果为array，则为双向滑块 | number / array | - | - | - |
|
|||
|
|
| hide-min-max | 是否显示左右的最大最小值 | boolean | - | false | - |
|
|||
|
|
| hide-label | 是否显示当前滑块值 | boolean | - | false | - |
|
|||
|
|
| disabled | 是否禁用 | boolean | - | false | - |
|
|||
|
|
| max | 最大值 | number | - | 100 | - |
|
|||
|
|
| min | 最小值，允许负数`(1.2.19)` | number | - | 0 | - |
|
|||
|
|
| step | 步进值 | number | - | 1 | `1.2.19` |
|
|||
|
|
| active-color | 进度条激活背景颜色 | string | - | linear-gradient(315deg, rgba(81,124,240,1) 0%,rgba(118,158,245,1) 100%) | - |
|
|||
|
|
| inactive-color | 进度条未激活背景颜色 | string | - | #e5e5e5 | - |
|
|||
|
|
|
|||
|
|
## Events
|
|||
|
|
|
|||
|
|
| 事件名称 | 说明 | 参数 | 最低版本 |
|
|||
|
|
|---------|-----|-----|---------|
|
|||
|
|
| dragstart | 开始移动时触发 | `{ value }` | - |
|
|||
|
|
| dragmove | 移动滑块时触发 | `{ value }` | - |
|
|||
|
|
| dragend | 移动结束时触发 | `{ value }` | - |
|
|||
|
|
|
|||
|
|
|
|||
|
|
## Methods
|
|||
|
|
|
|||
|
|
对外暴露函数
|
|||
|
|
|
|||
|
|
| 事件名称 | 说明 | 参数 | 最低版本 |
|
|||
|
|
|--------|------|-----|---------|
|
|||
|
|
| initSlider | 初始化slider宽度数据 | - | 1.2.25 |
|
|||
|
|
|
|||
|
|
## 外部样式类
|
|||
|
|
| 类名 | 说明 | 最低版本 |
|
|||
|
|
|-----|------|--------|
|
|||
|
|
| custom-class | 根节点样式 | - |
|
|||
|
|
| custom-min-class | 最小值自定义样式 | - |
|
|||
|
|
| custom-max-class | 最大值自定义样式 | - |
|