Merge pull request #300 from rijn/295
added show-tip to slider and added always to tooltip
This commit is contained in:
commit
cf3d3f8e46
5 changed files with 55 additions and 7 deletions
|
@ -17,7 +17,7 @@ Modal.newInstance = properties => {
|
|||
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = `
|
||||
<Modal${props} :visible.sync="visible" :width="width">
|
||||
<Modal${props} :visible.sync="visible" :width="width" :scrollable.sync="scrollable">
|
||||
<div class="${prefixCls}">
|
||||
<div class="${prefixCls}-head">
|
||||
<div class="${prefixCls}-head-title">{{{ title }}}</div>
|
||||
|
@ -49,7 +49,8 @@ Modal.newInstance = properties => {
|
|||
cancelText: t('i.modal.cancelText'),
|
||||
showCancel: false,
|
||||
loading: false,
|
||||
buttonLoading: false
|
||||
buttonLoading: false,
|
||||
scrollable: false
|
||||
}),
|
||||
computed: {
|
||||
iconTypeCls () {
|
||||
|
@ -153,6 +154,10 @@ Modal.newInstance = properties => {
|
|||
modal.$parent.loading = props.loading;
|
||||
}
|
||||
|
||||
if ('scrollable' in props) {
|
||||
modal.$parent.scrollable = props.scrollable;
|
||||
}
|
||||
|
||||
// notice when component destroy
|
||||
modal.$parent.onRemove = props.onRemove;
|
||||
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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 () {
|
||||
|
|
|
@ -8,6 +8,11 @@
|
|||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
min-height: 2000px;
|
||||
width: 1px;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<i-button @click="modal9 = true">距离顶部 20px</i-button>
|
||||
|
@ -28,6 +33,9 @@
|
|||
<p>对话框内容</p>
|
||||
<p>对话框内容</p>
|
||||
</Modal>
|
||||
<i-button @click="instance(true)">Create Instance Scrollable</i-button>
|
||||
<i-button @click="instance(false)">Create Instance Non-scrollable</i-button>
|
||||
<div class="placeholder"></div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
@ -35,6 +43,24 @@
|
|||
return {
|
||||
modal9: false,
|
||||
modal10: false,
|
||||
modal1: false,
|
||||
scrollable: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
ok () {
|
||||
this.$nextTick(() => this.modal1 = true);
|
||||
this.$Message.info('点击了确定');
|
||||
},
|
||||
cancel () {
|
||||
this.$Message.info('点击了取消');
|
||||
},
|
||||
instance (scrollable) {
|
||||
this.$Modal.info({
|
||||
title: 'test',
|
||||
content: 'test',
|
||||
scrollable: scrollable
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Reference in a new issue