github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: slider add tooltipVisible and optimize experience

pull/398/head
tangjinzhou 2019-01-05 11:22:53 +08:00
parent 0d49773553
commit 032655f097
8 changed files with 57 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
components/slider/__tests__/__snapshots__/demo.test.js.snap
View File

@ -2,14 +2,14 @@
exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
<div>
<div class="ant-slider">
<div tabindex="-1" class="ant-slider" id="test">
<div class="ant-slider-rail"></div>
<div class="ant-slider-track" style="left: 0%; width: 30%;"></div>
<div class="ant-slider-step"></div>
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30" class="ant-slider-handle" style="left: 30%;"></div>
<div class="ant-slider-mark"></div>
</div>
<div class="ant-slider">
<div tabindex="-1" class="ant-slider">
<div class="ant-slider-rail"></div>
<div class="ant-slider-track ant-slider-track-1" style="left: 20%; width: 30%;"></div>
<div class="ant-slider-step"></div>
@ -23,14 +23,14 @@ exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
exports[`renders ./components/slider/demo/event.md correctly 1`] = `
<div class="code-box-demo">
<div class="ant-slider">
<div tabindex="-1" class="ant-slider">
<div class="ant-slider-rail"></div>
<div class="ant-slider-track" style="left: 0%; width: 30%;"></div>
<div class="ant-slider-step"></div>
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30" class="ant-slider-handle" style="left: 30%;"></div>
<div class="ant-slider-mark"></div>
</div>
<div class="ant-slider">
<div tabindex="-1" class="ant-slider">
<div class="ant-slider-rail"></div>
<div class="ant-slider-track ant-slider-track-1" style="left: 20%; width: 30%;"></div>
<div class="ant-slider-step"></div>
@ -45,14 +45,14 @@ exports[`renders ./components/slider/demo/icon-slider.md correctly 1`] = `
<div class="icon-wrapper"><i class="anticon anticon-frown-o" style="color: rgba(0, 0, 0, 0.45);"><svg viewBox="64 64 896 896" data-icon="frown" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM512 533c-85.5 0-155.6 67.3-160 151.6a8 8 0 0 0 8 8.4h48.1c4.2 0 7.8-3.2 8.1-7.4C420 636.1 461.5 597 512 597s92.1 39.1 95.8 88.6c.3 4.2 3.9 7.4 8.1 7.4H664a8 8 0 0 0 8-8.4C667.6 600.3 597.5 533 512 533z"></path>
</svg></i>
<div class="ant-slider">
<div tabindex="-1" class="ant-slider">
<div class="ant-slider-rail"></div>
<div class="ant-slider-track" style="left: 0%; width: 0%;"></div>
<div class="ant-slider-step"></div>
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="20" aria-valuenow="0" class="ant-slider-handle" style="left: 0%;"></div>
<div class="ant-slider-mark"></div>
</div>
<div class="ant-slider">
<div tabindex="-1" class="ant-slider">
<div class="ant-slider-rail"></div>
<div class="ant-slider-track" style="left: 0%; width: 0%;"></div>
<div class="ant-slider-step"></div>
@ -68,7 +68,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
<div>
<div class="ant-row">
<div class="ant-col-12">
<div class="ant-slider">
<div tabindex="-1" class="ant-slider">
<div class="ant-slider-rail"></div>
<div class="ant-slider-track" style="left: 0%; width: 0%;"></div>
<div class="ant-slider-step"></div>
@ -85,7 +85,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
</div>
<div class="ant-row">
<div class="ant-col-12">
<div class="ant-slider">
<div tabindex="-1" class="ant-slider">
<div class="ant-slider-rail"></div>
<div class="ant-slider-track" style="left: 0%; width: 0%;"></div>
<div class="ant-slider-step"></div>
@ -106,14 +106,14 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
<div id="components-slider-demo-mark">
<h4>included=true</h4>
<div class="ant-slider ant-slider-with-marks">
<div tabindex="-1" class="ant-slider ant-slider-with-marks">
<div class="ant-slider-rail"></div>
<div class="ant-slider-track" style="left: 0%; width: 37%;"></div>
<div class="ant-slider-step"><span class="ant-slider-dot ant-slider-dot-active" style="left: 0%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left: 26%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left: 37%;"></span><span class="ant-slider-dot" style="left: 100%;"></span></div>
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="37" class="ant-slider-handle" style="left: 37%;"></div>
<div class="ant-slider-mark"><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 0%;">0°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 26%;">26°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 37%;">37°C</span><span class="ant-slider-mark-text" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 100%; color: rgb(255, 85, 0);"><strong>100°C</strong></span></div>
</div>
<div class="ant-slider ant-slider-with-marks">
<div tabindex="-1" class="ant-slider ant-slider-with-marks">
<div class="ant-slider-rail"></div>
<div class="ant-slider-track ant-slider-track-1" style="left: 26%; width: 11%;"></div>
<div class="ant-slider-step"><span class="ant-slider-dot" style="left: 0%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left: 26%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left: 37%;"></span><span class="ant-slider-dot" style="left: 100%;"></span></div>
@ -122,7 +122,7 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
<div class="ant-slider-mark"><span class="ant-slider-mark-text" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 0%;">0°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 26%;">26°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 37%;">37°C</span><span class="ant-slider-mark-text" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 100%; color: rgb(255, 85, 0);"><strong>100°C</strong></span></div>
</div>
<h4>included=false</h4>
<div class="ant-slider ant-slider-with-marks">
<div tabindex="-1" class="ant-slider ant-slider-with-marks">
<div class="ant-slider-rail"></div>
<!---->
<div class="ant-slider-step"><span class="ant-slider-dot" style="left: 0%;"></span><span class="ant-slider-dot" style="left: 26%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left: 37%;"></span><span class="ant-slider-dot" style="left: 100%;"></span></div>
@ -130,7 +130,7 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
<div class="ant-slider-mark"><span class="ant-slider-mark-text" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 0%;">0°C</span><span class="ant-slider-mark-text" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 26%;">26°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 37%;">37°C</span><span class="ant-slider-mark-text" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 100%; color: rgb(255, 85, 0);"><strong>100°C</strong></span></div>
</div>
<h4>marks &amp; step</h4>
<div class="ant-slider ant-slider-with-marks">
<div tabindex="-1" class="ant-slider ant-slider-with-marks">
<div class="ant-slider-rail"></div>
<div class="ant-slider-track" style="left: 0%; width: 37%;"></div>
<div class="ant-slider-step"><span class="ant-slider-dot ant-slider-dot-active" style="left: 0%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left: 26%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left: 37%;"></span><span class="ant-slider-dot" style="left: 100%;"></span></div>
@ -138,7 +138,7 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
<div class="ant-slider-mark"><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 0%;">0°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 26%;">26°C</span><span class="ant-slider-mark-text ant-slider-mark-text-active" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 37%;">37°C</span><span class="ant-slider-mark-text" style="width: 30.000000000000004%; margin-left: -15.000000000000002%; left: 100%; color: rgb(255, 85, 0);"><strong>100°C</strong></span></div>
</div>
<h4>step=null</h4>
<div class="ant-slider ant-slider-with-marks">
<div tabindex="-1" class="ant-slider ant-slider-with-marks">
<div class="ant-slider-rail"></div>
<div class="ant-slider-track" style="left: 0%; width: 37%;"></div>
<div class="ant-slider-step"><span class="ant-slider-dot ant-slider-dot-active" style="left: 0%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left: 26%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="left: 37%;"></span><span class="ant-slider-dot" style="left: 100%;"></span></div>
@ -148,16 +148,26 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
</div>
`;
exports[`renders ./components/slider/demo/show-tooltip.md correctly 1`] = `
<div tabindex="-1" class="ant-slider">
<div class="ant-slider-rail"></div>
<div class="ant-slider-track" style="left: 0%; width: 30%;"></div>
<div class="ant-slider-step"></div>
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30" class="ant-slider-handle ant-tooltip-open" style="left: 30%;"></div>
<div class="ant-slider-mark"></div>
</div>
`;
exports[`renders ./components/slider/demo/tip-formatter.md correctly 1`] = `
<div>
<div class="ant-slider">
<div tabindex="-1" class="ant-slider">
<div class="ant-slider-rail"></div>
<div class="ant-slider-track" style="left: 0%; width: 0%;"></div>
<div class="ant-slider-step"></div>
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" class="ant-slider-handle" style="left: 0%;"></div>
<div class="ant-slider-mark"></div>
</div>
<div class="ant-slider">
<div tabindex="-1" class="ant-slider">
<div class="ant-slider-rail"></div>
<div class="ant-slider-track" style="left: 0%; width: 0%;"></div>
<div class="ant-slider-step"></div>
@ -170,7 +180,7 @@ exports[`renders ./components/slider/demo/tip-formatter.md correctly 1`] = `
exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
<div style="height: 300px;">
<div style="float: left; height: 300px; margin-left: 70px;">
<div class="ant-slider ant-slider-vertical">
<div tabindex="-1" class="ant-slider ant-slider-vertical">
<div class="ant-slider-rail"></div>
<div class="ant-slider-track" style="bottom: 0%; height: 30%;"></div>
<div class="ant-slider-step"></div>
@ -179,7 +189,7 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
</div>
</div>
<div style="float: left; height: 300px; margin-left: 70px;">
<div class="ant-slider ant-slider-vertical">
<div tabindex="-1" class="ant-slider ant-slider-vertical">
<div class="ant-slider-rail"></div>
<div class="ant-slider-track ant-slider-track-1" style="bottom: 20%; height: 30%;"></div>
<div class="ant-slider-step"></div>
@ -189,7 +199,7 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
</div>
</div>
<div style="float: left; height: 300px; margin-left: 70px;">
<div class="ant-slider ant-slider-with-marks ant-slider-vertical">
<div tabindex="-1" class="ant-slider ant-slider-with-marks ant-slider-vertical">
<div class="ant-slider-rail"></div>
<div class="ant-slider-track ant-slider-track-1" style="bottom: 26%; height: 11%;"></div>
<div class="ant-slider-step"><span class="ant-slider-dot" style="bottom: 0%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="bottom: 26%;"></span><span class="ant-slider-dot ant-slider-dot-active" style="bottom: 37%;"></span><span class="ant-slider-dot" style="bottom: 100%;"></span></div>

2
components/slider/__tests__/demo.test.js
View File

@ -1,3 +1,3 @@
import demoTest from '../../../tests/shared/demoTest'
demoTest('slider')
demoTest('slider', { skip: process.env.LIB_DIR === 'dist' && ['show-tooltip.md'] })

2
components/slider/demo/basic.md
View File

@ -11,7 +11,7 @@ Basic slider. When `range` is `true`, display as dual thumb mode. When `disable`
```html
<template>
<div>
<a-slider :defaultValue="30" :disabled="disabled" />
<a-slider id="test" :defaultValue="30" :disabled="disabled" />
<a-slider range :defaultValue="[20, 50]" :disabled="disabled" />
Disabled: <a-switch size="small" :checked="disabled" @change="handleDisabledChange" />
</div>

10
components/slider/demo/index.vue
View File

@ -6,6 +6,7 @@ import TipFormatter from './tip-formatter.md'
import Event from './event.md'
import Mark from './mark.md'
import Vertical from './vertical.md'
import ShowTooltip from './show-tooltip.md'
import CN from '../index.zh-CN.md'
import US from '../index.en-US.md'
@ -31,21 +32,14 @@ export default {
return (
<div>
<md cn={md.cn} us={md.us}/>
<br/>
<Basic />
<br />
<InputNumber />
<br />
<IconSlider />
<br />
<TipFormatter />
<br />
<Event />
<br />
<Mark />
<br />
<Vertical />
<br />
<ShowTooltip />
<api>
<template slot='cn'>
<CN/>

15
components/slider/demo/show-tooltip.md Normal file
View File

@ -0,0 +1,15 @@
<cn>
#### 控制 ToolTip 的显示
当 `tooltipVisible` 为 `true` 时，将始终显示ToolTip；反之则始终不显示，即使在拖动、移入时也是如此。
</cn>
<us>
#### Control visible of ToolTip
When `tooltipVisible` is `true`, ToolTip will show always, or ToolTip will not show anyway, even if dragging or hovering.
</us>
```html
<template>
<a-slider :defaultValue="30" :tooltipVisible="true" />
</template>
```

1
components/slider/index.en-US.md
View File

@ -15,6 +15,7 @@
| tipFormatter | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | Function\|null | IDENTITY |
| value(v-model) | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] | |
| vertical | If true, the slider will be vertical. | Boolean | false |
| tooltipVisible | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering. | Boolean | |
### events

15
components/slider/index.jsx
View File

@ -41,7 +41,7 @@ export const SliderProps = () => ({
PropTypes.func,
PropTypes.object,
]),
id: PropTypes.string,
tooltipVisible: PropTypes.bool,
})
const Slider = {
@ -74,11 +74,11 @@ const Slider = {
},
}))
},
handleWithTooltip ({ value, dragging, index, ref, ...restProps }) {
const { tooltipPrefixCls, tipFormatter } = this.$props
handleWithTooltip ({ value, dragging, index, directives, on, ...restProps }) {
const { tooltipPrefixCls, tipFormatter, tooltipVisible } = this.$props
const { visibles } = this
const visible = tipFormatter ? (visibles[index] || dragging) : false
const isTipFormatter = tipFormatter ? visibles[index] || dragging : false
const visible = tooltipVisible || (tooltipVisible === undefined && isTipFormatter)
const tooltipProps = {
props: {
prefixCls: tooltipPrefixCls,
@ -94,8 +94,9 @@ const Slider = {
value,
...restProps,
},
ref,
directives,
on: {
...on,
mouseenter: () => this.toggleTooltipVisible(index, true),
mouseleave: () => this.toggleTooltipVisible(index, false),
},
@ -114,7 +115,7 @@ const Slider = {
this.$refs.sliderRef.focus()
},
blur () {
this.$refs.sliderRef.focus()
this.$refs.sliderRef.blur()
},
},
render () {

1
components/slider/index.zh-CN.md
View File

@ -15,6 +15,7 @@
| tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | Function\|null | IDENTITY |
| value(v-model) | 设置当前取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|number\[] | |
| vertical | 值为 `true` 时，Slider 为垂直方向 | Boolean | false |
| tooltipVisible | 值为`true`时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时。 | Boolean | |
### 事件
| 事件名称 | 说明 | 回调参数 |