Poptip & Tooltip add transfer prop

Using transfer prop, the dom will be transfered to body.
This commit is contained in:
梁灏 2017-07-18 17:46:41 +08:00
parent 1b737fdc83
commit fcf3cace8e
7 changed files with 68 additions and 65 deletions

View file

@ -4,7 +4,13 @@
<slot></slot>
</div>
<transition name="fade">
<div :class="[prefixCls + '-popper']" ref="popper" v-show="!disabled && (visible || always)">
<div
:class="[prefixCls + '-popper']"
ref="popper"
v-show="!disabled && (visible || always)"
@mouseenter="handleShowPopper"
@mouseleave="handleClosePopper"
v-transfer-dom:forbidden="transfer">
<div :class="[prefixCls + '-content']">
<div :class="[prefixCls + '-arrow']"></div>
<div :class="[prefixCls + '-inner']"><slot name="content">{{ content }}</slot></div>
@ -15,12 +21,14 @@
</template>
<script>
import Popper from '../base/popper';
import TransferDom from '../../directives/transfer-dom';
import { oneOf } from '../../utils/assist';
const prefixCls = 'ivu-tooltip';
export default {
name: 'Tooltip',
directives: { TransferDom },
mixins: [Popper],
props: {
placement: {
@ -35,7 +43,7 @@
},
delay: {
type: Number,
default: 0
default: 100
},
disabled: {
type: Boolean,
@ -48,6 +56,10 @@
always: {
type: Boolean,
default: false
},
transfer: {
type: Boolean,
default: false
}
},
data () {
@ -57,14 +69,19 @@
},
methods: {
handleShowPopper() {
if (this.timeout) clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
this.visible = true;
}, this.delay);
},
handleClosePopper() {
clearTimeout(this.timeout);
if (!this.controlled) {
this.visible = false;
if (this.timeout) {
clearTimeout(this.timeout);
if (!this.controlled) {
this.timeout = setTimeout(() => {
this.visible = false;
}, 100);
}
}
}
}