drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added show-tip to slider and added always to tooltip

Browse source
This commit is contained in:
Rijn 2017-02-21 11:41:28 -06:00
parent c13e7cea81
commit 5987219934
3 changed files with 22 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/slider/slider.vue
View file

@ -18,7 +18,7 @@
:class="[prefixCls + '-button-wrap']" :class="[prefixCls + '-button-wrap']"
:style="{left: firstPosition + '%'}" :style="{left: firstPosition + '%'}"
@mousedown="onFirstButtonDown"> @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> <div :class="button1Classes"></div>
</Tooltip> </Tooltip>
</div> </div>
@ -26,7 +26,7 @@
:class="[prefixCls + '-button-wrap']" :class="[prefixCls + '-button-wrap']"
:style="{left: secondPosition + '%'}" :style="{left: secondPosition + '%'}"
@mousedown="onSecondButtonDown"> @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> <div :class="button2Classes"></div>
</Tooltip> </Tooltip>
</div> </div>
@ -36,7 +36,7 @@
:class="[prefixCls + '-button-wrap']" :class="[prefixCls + '-button-wrap']"
:style="{left: singlePosition + '%'}" :style="{left: singlePosition + '%'}"
@mousedown="onSingleButtonDown"> @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> <div :class="buttonClasses"></div>
</Tooltip> </Tooltip>
</div> </div>
@ -47,7 +47,7 @@
<script> <script>
import InputNumber from '../../components/input-number/input-number.vue'; import InputNumber from '../../components/input-number/input-number.vue';
import Tooltip from '../../components/tooltip/tooltip.vue'; import Tooltip from '../../components/tooltip/tooltip.vue';
import { getStyle } from '../../utils/assist'; import { getStyle, oneOf } from '../../utils/assist';
const prefixCls = 'ivu-slider'; const prefixCls = 'ivu-slider';
@ -91,6 +91,13 @@
default (val) { default (val) {
return val; return val;
} }
},
showTip: {
type: String,
default: 'hover',
validator (value) {
return oneOf(value, ['hover', 'always', 'never']);
}
} }
}, },
data () { data () {
@ -173,6 +180,9 @@
}, },
sliderWidth () { sliderWidth () {
return parseInt(getStyle(this.$els.slider, 'width'), 10); return parseInt(getStyle(this.$els.slider, 'width'), 10);
},
tipDisabled () {
return this.tipFormat(this.value[0]) === null || this.showTip === 'never'
} }
}, },
watch: { watch: {

6
src/components/tooltip/tooltip.vue
View file

@ -3,7 +3,7 @@
<div :class="[prefixCls + '-rel']" v-el:reference> <div :class="[prefixCls + '-rel']" v-el:reference>
<slot></slot> <slot></slot>
</div> </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 + '-content']">
<div :class="[prefixCls + '-arrow']"></div> <div :class="[prefixCls + '-arrow']"></div>
<div :class="[prefixCls + '-inner']"><slot name="content">{{ content }}</slot></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 controlled: { // under this prop,Tooltip will not close when mouseleave
type: Boolean, type: Boolean,
default: false default: false
},
always: {
type: Boolean,
default: false
} }
}, },
data () { data () {

3
test/routers/slider.vue
View file

@ -14,6 +14,9 @@
</div> </div>
<Slider :value="75"></Slider> <Slider :value="75"></Slider>
<Slider :value="[20, 50]" range></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> </div>
</template> </template>
<script> <script>