mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-01 11:38:36 +08:00
feat: slider add tooltipVisible and optimize experience
This commit is contained in:
tangjinzhou
parent
0d49773553
commit
032655f097
@ -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 & 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>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
import demoTest from '../../../tests/shared/demoTest'
|
||||
|
||||
demoTest('slider')
|
||||
demoTest('slider', { skip: process.env.LIB_DIR === 'dist' && ['show-tooltip.md'] })
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
15
components/slider/demo/show-tooltip.md
Normal 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>
|
||||
```
|
||||
@ -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
|
||||
|
||||
@ -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 () {
|
||||
|
||||
@ -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 | |
|
||||
|
||||
### 事件
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user