Merge pull request #300 from rijn/295

added show-tip to slider and added always to tooltip
This commit is contained in:
Aresn 2017-02-23 13:54:55 +08:00 committed by GitHub
commit cf3d3f8e46
5 changed files with 55 additions and 7 deletions

View file

@ -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;

View file

@ -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: {

View file

@ -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 () {

View file

@ -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
});
}
}
}

View file

@ -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>