Poptip & Tooltip add transfer prop

Using transfer prop, the dom will be transfered to body.

Poptip & Tooltip add transfer prop
Using transfer prop, the dom will be transfered to body.
梁灏
1 parent 1b737fdc
Showing 7 changed files with 68 additions and 65 deletions Show diff stats
examples/components/test.vue
examples/routers/poptip.vue
examples/routers/table.vue
examples/routers/tooltip.vue
src/components/poptip/poptip.vue
src/components/tooltip/tooltip.vue
src/directives/transfer-dom.js
 <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>
 \ No newline at end of file
+</script>
 <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);
                         }
                     }
                 ],
 <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;