fix: slider marks support function #171

pull/197/head
undefined 2018-09-13 21:47:48 +08:00 committed by tangjinzhou
parent 647214c513
commit 2a26caab83
3 changed files with 4 additions and 4 deletions

View File

@ -7,7 +7,7 @@
| disabled | If true, the slider will not be interactable. | boolean | false | | disabled | If true, the slider will not be interactable. | boolean | false |
| dots | Whether the thumb can drag over tick only. | boolean | false | | dots | Whether the thumb can drag over tick only. | boolean | false |
| included | Make effect when `marks` not null`true` means containment and `false` means coordinative | boolean | true | | included | Make effect when `marks` not null`true` means containment and `false` means coordinative | boolean | true |
| marks | Tick mark of Slider, type of key must be `number`, and must in closed interval [min, max] each mark can declare its own style. | object | { number: string\|VNode } or { number: { style: object, label: string\|VNode } } | | marks | Tick mark of Slider, type of key must be `number`, and must in closed interval [min, max] each mark can declare its own style. | object | { number: string\|VNode } or { number: { style: object, label: string\|VNode } } or { number: () => VNode } |
| max | The maximum value the slider can slide to | number | 100 | | max | The maximum value the slider can slide to | number | 100 |
| min | The minimum value the slider can slide to. | number | 0 | | min | The minimum value the slider can slide to. | number | 0 |
| range | dual thumb mode | boolean | false | | range | dual thumb mode | boolean | false |

View File

@ -7,7 +7,7 @@
| disabled | 值为 `true` 时,滑块为禁用状态 | boolean | false | | disabled | 值为 `true` 时,滑块为禁用状态 | boolean | false |
| dots | 是否只能拖拽到刻度上 | boolean | false | | dots | 是否只能拖拽到刻度上 | boolean | false |
| included | `marks` 不为空对象时有效,值为 true 时表示值为包含关系false 表示并列 | boolean | true | | included | `marks` 不为空对象时有效,值为 true 时表示值为包含关系false 表示并列 | boolean | true |
| marks | 刻度标记key 的类型必须为 `number` 且取值在闭区间 [min, max] 内,每个标签可以单独设置样式 | object | { number: string\|VNode } or { number: { style: object, label: string\|VNode } } | | marks | 刻度标记key 的类型必须为 `number` 且取值在闭区间 [min, max] 内,每个标签可以单独设置样式 | object | { number: string\|VNode } or { number: { style: object, label: string\|VNode } } or { number: () => VNode } |
| max | 最大值 | number | 100 | | max | 最大值 | number | 100 |
| min | 最小值 | number | 0 | | min | 最小值 | number | 0 |
| range | 双滑块模式 | boolean | false | | range | 双滑块模式 | boolean | false |

View File

@ -3,7 +3,7 @@ import { isValidElement } from '../../../_util/props-util'
const Marks = { const Marks = {
functional: true, functional: true,
render (createElement, context) { render (h, context) {
const { const {
className, className,
vertical, vertical,
@ -22,7 +22,7 @@ const Marks = {
const range = max - min const range = max - min
const elements = marksKeys.map(parseFloat).sort((a, b) => a - b).map(point => { const elements = marksKeys.map(parseFloat).sort((a, b) => a - b).map(point => {
const markPoint = marks[point] const markPoint = typeof marks[point] === 'function' ? marks[point](h) : marks[point]
const markPointIsObject = typeof markPoint === 'object' && const markPointIsObject = typeof markPoint === 'object' &&
!isValidElement(markPoint) !isValidElement(markPoint)
const markLabel = markPointIsObject ? markPoint.label : markPoint const markLabel = markPointIsObject ? markPoint.label : markPoint