diff --git a/src/components/slider/slider.vue b/src/components/slider/slider.vue index a25edc3..87b9902 100644 --- a/src/components/slider/slider.vue +++ b/src/components/slider/slider.vue @@ -18,7 +18,7 @@ :class="[prefixCls + '-button-wrap']" :style="{left: firstPosition + '%'}" @mousedown="onFirstButtonDown"> - <Tooltip :controlled="firstDragging" placement="top" :content="tipFormat(value[0])" :disabled="tipFormat(value[0]) === null" v-ref:tooltip> + <Tooltip :controlled="firstDragging" placement="top" :content="tipFormat(value[0])" :disabled="tipDisabled" :always="showTip === 'always'" v-ref:tooltip> <div :class="button1Classes"></div> </Tooltip> </div> @@ -26,7 +26,7 @@ :class="[prefixCls + '-button-wrap']" :style="{left: secondPosition + '%'}" @mousedown="onSecondButtonDown"> - <Tooltip :controlled="secondDragging" placement="top" :content="tipFormat(value[1])" :disabled="tipFormat(value[1]) === null" v-ref:tooltip2> + <Tooltip :controlled="secondDragging" placement="top" :content="tipFormat(value[1])" :disabled="tipDisabled" :always="showTip === 'always'" v-ref:tooltip2> <div :class="button2Classes"></div> </Tooltip> </div> @@ -36,7 +36,7 @@ :class="[prefixCls + '-button-wrap']" :style="{left: singlePosition + '%'}" @mousedown="onSingleButtonDown"> - <Tooltip :controlled="dragging" placement="top" :content="tipFormat(value)" :disabled="tipFormat(value) === null" v-ref:tooltip> + <Tooltip :controlled="dragging" placement="top" :content="tipFormat(value)" :disabled="tipDisabled" :always="showTip === 'always'" v-ref:tooltip> <div :class="buttonClasses"></div> </Tooltip> </div> @@ -47,7 +47,7 @@ <script> import InputNumber from '../../components/input-number/input-number.vue'; import Tooltip from '../../components/tooltip/tooltip.vue'; - import { getStyle } from '../../utils/assist'; + import { getStyle, oneOf } from '../../utils/assist'; const prefixCls = 'ivu-slider'; @@ -91,6 +91,13 @@ default (val) { return val; } + }, + showTip: { + type: String, + default: 'hover', + validator (value) { + return oneOf(value, ['hover', 'always', 'never']); + } } }, data () { @@ -173,6 +180,9 @@ }, sliderWidth () { return parseInt(getStyle(this.$els.slider, 'width'), 10); + }, + tipDisabled () { + return this.tipFormat(this.value[0]) === null || this.showTip === 'never' } }, watch: { diff --git a/src/components/tooltip/tooltip.vue b/src/components/tooltip/tooltip.vue index 9045cc3..563ebeb 100644 --- a/src/components/tooltip/tooltip.vue +++ b/src/components/tooltip/tooltip.vue @@ -3,7 +3,7 @@ <div :class="[prefixCls + '-rel']" v-el:reference> <slot></slot> </div> - <div :class="[prefixCls + '-popper']" transition="fade" v-el:popper v-show="!disabled && visible"> + <div :class="[prefixCls + '-popper']" transition="fade" v-el:popper v-show="!disabled && (visible || always)"> <div :class="[prefixCls + '-content']"> <div :class="[prefixCls + '-arrow']"></div> <div :class="[prefixCls + '-inner']"><slot name="content">{{ content }}</slot></div> @@ -41,6 +41,10 @@ controlled: { // under this prop,Tooltip will not close when mouseleave type: Boolean, default: false + }, + always: { + type: Boolean, + default: false } }, data () { diff --git a/test/routers/slider.vue b/test/routers/slider.vue index 770e9c2..abd0f9d 100644 --- a/test/routers/slider.vue +++ b/test/routers/slider.vue @@ -14,6 +14,9 @@ </div> <Slider :value="75"></Slider> <Slider :value="[20, 50]" range></Slider> + <Slider :value="[20, 50]" show-tip="always"></Slider> + <Slider :value="[20, 50]" show-tip="hover"></Slider> + <Slider :value="[20, 50]" show-tip="never"></Slider> </div> </template> <script> -- libgit2 0.21.4