diff --git a/components/slider/__tests__/demo.test.js b/components/slider/__tests__/demo.test.js
index 808e84aef..263263921 100644
--- a/components/slider/__tests__/demo.test.js
+++ b/components/slider/__tests__/demo.test.js
@@ -1,3 +1,3 @@
import demoTest from '../../../tests/shared/demoTest'
-demoTest('slider')
+demoTest('slider', { skip: process.env.LIB_DIR === 'dist' && ['show-tooltip.md'] })
diff --git a/components/slider/demo/basic.md b/components/slider/demo/basic.md
index ef36d92d6..4d3302e6a 100644
--- a/components/slider/demo/basic.md
+++ b/components/slider/demo/basic.md
@@ -11,7 +11,7 @@ Basic slider. When `range` is `true`, display as dual thumb mode. When `disable`
```html
diff --git a/components/slider/demo/index.vue b/components/slider/demo/index.vue
index efc9dbf57..c0cc89308 100644
--- a/components/slider/demo/index.vue
+++ b/components/slider/demo/index.vue
@@ -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 (
-
-
-
-
-
-
-
-
+
diff --git a/components/slider/demo/show-tooltip.md b/components/slider/demo/show-tooltip.md
new file mode 100644
index 000000000..b008b6581
--- /dev/null
+++ b/components/slider/demo/show-tooltip.md
@@ -0,0 +1,15 @@
+
+#### 控制 ToolTip 的显示
+当 `tooltipVisible` 为 `true` 时,将始终显示ToolTip;反之则始终不显示,即使在拖动、移入时也是如此。
+
+
+
+#### Control visible of ToolTip
+When `tooltipVisible` is `true`, ToolTip will show always, or ToolTip will not show anyway, even if dragging or hovering.
+
+
+```html
+
+
+
+```
diff --git a/components/slider/index.en-US.md b/components/slider/index.en-US.md
index 3210f0e20..a91e60aa5 100644
--- a/components/slider/index.en-US.md
+++ b/components/slider/index.en-US.md
@@ -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
diff --git a/components/slider/index.jsx b/components/slider/index.jsx
index eab933480..ce2597f71 100644
--- a/components/slider/index.jsx
+++ b/components/slider/index.jsx
@@ -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 () {
diff --git a/components/slider/index.zh-CN.md b/components/slider/index.zh-CN.md
index 318bcc436..44a69b026 100644
--- a/components/slider/index.zh-CN.md
+++ b/components/slider/index.zh-CN.md
@@ -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 | |
### 事件
| 事件名称 | 说明 | 回调参数 |