Poptip & Tooltip add transfer prop
Using transfer prop, the dom will be transfered to body.
This commit is contained in:
梁灏
parent
1b737fdc83
commit
fcf3cace8e
7 changed files with 68 additions and 65 deletions
|
|
@ -1,40 +1,10 @@
|
|||
<template>
|
||||
<Select v-model="model1" style="width:200px">
|
||||
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||
</Select>
|
||||
<Poptip trigger="hover" title="提示标题" :transfer="true" placement="left" content="提示内容">
|
||||
<Button>hover 激活</Button>
|
||||
</Poptip>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
cityList: [
|
||||
{
|
||||
value: 'beijing',
|
||||
label: '北京市'
|
||||
},
|
||||
{
|
||||
value: 'shanghai',
|
||||
label: '上海市'
|
||||
},
|
||||
{
|
||||
value: 'shenzhen',
|
||||
label: '深圳市'
|
||||
},
|
||||
{
|
||||
value: 'hangzhou',
|
||||
label: '杭州市'
|
||||
},
|
||||
{
|
||||
value: 'nanjing',
|
||||
label: '南京市'
|
||||
},
|
||||
{
|
||||
value: 'chongqing',
|
||||
label: '重庆市'
|
||||
}
|
||||
],
|
||||
model1: ''
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<Poptip trigger="hover" title="提示标题" content="提示内容">
|
||||
<Poptip trigger="hover" transfer title="提示标题" content="提示内容">
|
||||
<Button>hover 激活</Button>
|
||||
</Poptip>
|
||||
<Poptip title="提示标题" content="提示内容">
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
:data="data3"></Table>
|
||||
</template>
|
||||
<script>
|
||||
import test from '../components/test.vue';
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -59,20 +60,7 @@
|
|||
fixed: 'right',
|
||||
width: 120,
|
||||
render: (h, params) => {
|
||||
return h('div', [
|
||||
h('Button', {
|
||||
props: {
|
||||
type: 'text',
|
||||
size: 'small'
|
||||
}
|
||||
}, '查看'),
|
||||
h('Button', {
|
||||
props: {
|
||||
type: 'text',
|
||||
size: 'small'
|
||||
}
|
||||
}, '编辑')
|
||||
]);
|
||||
return h(test);
|
||||
}
|
||||
}
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,7 +1,12 @@
|
|||
<template>
|
||||
<Tooltip placement="top" content="Tooltip 文字提示" :delay="1000">
|
||||
<Button @click="disabled = true">延时1秒显示</Button>
|
||||
</Tooltip>
|
||||
<div>
|
||||
<Tooltip placement="top" transfer content="Tooltip 文字提示" :delay="1000">
|
||||
<Button @click="disabled = true">延时1秒显示</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="top" transfer content="Tooltip 文字提示">
|
||||
<Button @click="disabled = true">延时1秒显示</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,14 @@
|
|||
<slot></slot>
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<div :class="[prefixCls + '-popper']" :style="styles" ref="popper" v-show="visible">
|
||||
<div
|
||||
:class="[prefixCls + '-popper']"
|
||||
:style="styles"
|
||||
ref="popper"
|
||||
v-show="visible"
|
||||
@mouseenter="handleMouseenter"
|
||||
@mouseleave="handleMouseleave"
|
||||
v-transfer-dom:forbidden="transfer">
|
||||
<div :class="[prefixCls + '-content']">
|
||||
<div :class="[prefixCls + '-arrow']"></div>
|
||||
<div :class="[prefixCls + '-inner']" v-if="confirm">
|
||||
|
|
@ -41,6 +48,7 @@
|
|||
import Popper from '../base/popper';
|
||||
import iButton from '../button/button.vue';
|
||||
import clickoutside from '../../directives/clickoutside';
|
||||
import TransferDom from '../../directives/transfer-dom';
|
||||
import { oneOf } from '../../utils/assist';
|
||||
import Locale from '../../mixins/locale';
|
||||
|
||||
|
|
@ -49,7 +57,7 @@
|
|||
export default {
|
||||
name: 'Poptip',
|
||||
mixins: [ Popper, Locale ],
|
||||
directives: { clickoutside },
|
||||
directives: { clickoutside, TransferDom },
|
||||
components: { iButton },
|
||||
props: {
|
||||
trigger: {
|
||||
|
|
@ -83,6 +91,10 @@
|
|||
},
|
||||
cancelText: {
|
||||
type: String
|
||||
},
|
||||
transfer: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
|
@ -161,13 +173,21 @@
|
|||
if (this.trigger !== 'hover' || this.confirm) {
|
||||
return false;
|
||||
}
|
||||
this.visible = true;
|
||||
if (this.enterTimer) clearTimeout(this.enterTimer);
|
||||
this.enterTimer = setTimeout(() => {
|
||||
this.visible = true;
|
||||
}, 100);
|
||||
},
|
||||
handleMouseleave () {
|
||||
if (this.trigger !== 'hover' || this.confirm) {
|
||||
return false;
|
||||
}
|
||||
this.visible = false;
|
||||
if (this.enterTimer) {
|
||||
clearTimeout(this.enterTimer);
|
||||
this.enterTimer = setTimeout(() => {
|
||||
this.visible = false;
|
||||
}, 100);
|
||||
}
|
||||
},
|
||||
cancel () {
|
||||
this.visible = false;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,8 @@ function getTarget (node) {
|
|||
}
|
||||
|
||||
const directive = {
|
||||
inserted (el, { value }, vnode) {
|
||||
inserted (el, { value, arg }, vnode) {
|
||||
if (arg.forbidden) return false;
|
||||
el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom';
|
||||
const parentNode = el.parentNode;
|
||||
if (!parentNode) return;
|
||||
|
|
@ -36,7 +37,8 @@ const directive = {
|
|||
}
|
||||
}
|
||||
},
|
||||
componentUpdated (el, { value }) {
|
||||
componentUpdated (el, { value, arg }) {
|
||||
if (arg.forbidden) return false;
|
||||
// need to make sure children are done updating (vs. `update`)
|
||||
const ref$1 = el.__transferDomData;
|
||||
if (!ref$1) return;
|
||||
|
|
@ -60,7 +62,8 @@ const directive = {
|
|||
getTarget(value).appendChild(el);
|
||||
}
|
||||
},
|
||||
unbind: function unbind (el, binding) {
|
||||
unbind (el, { arg } ) {
|
||||
if (arg.forbidden) return false;
|
||||
el.className = el.className.replace('v-transfer-dom', '');
|
||||
const ref$1 = el.__transferDomData;
|
||||
if (!ref$1) return;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue