fix: tooltip修改

hug-sun · Sep 8, 2020 · 79f412d · 79f412d
1 parent 8a7e895
commit 79f412d
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 31 deletions.
diff --git a/build/bin/build-entry.js b/build/bin/build-entry.js
@@ -113,7 +113,7 @@ ComponentNames.forEach((name) => {
       'divider',
       'progress',
       'form',
-      'form-item'
+      'form-item',
       'message',
       'pagination',
       'notification',

diff --git a/examples/versions.json b/examples/versions.json
@@ -1 +1 @@
-{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","0.0.4":"2.13"}
+{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","0.0.5":"2.13"}
diff --git a/packages/tooltip/src/main.js b/packages/tooltip/src/main.js
@@ -3,7 +3,7 @@ import debounce from 'throttle-debounce/debounce'
 import { addClass, removeClass, on, off } from 'element-ui/src/utils/dom'
 import { generateId } from 'element-ui/src/utils/util'
 // eslint-disable-next-line
-import { h, createApp} from 'vue'
+import { h, createApp, Transition as _Transition } from 'vue'
 
 export default {
   name: 'ElTooltip',
@@ -68,42 +68,60 @@ export default {
     if (this.$isServer) return
 
     this.popperVM = createApp({
-      data: { node: '' },
-      render(h) {
+      data() {
+        return {
+          node: '' 
+        }
+      },
+      render() {
+        debugger
         return this.node
       }
     })
 
+    console.log(this.popperVM.node);
+
     this.debounceClose = debounce(200, () => this.handleClosePopper())
   },
 
-  render(h) {
+  render() {
+    debugger
     if (this.popperVM) {
-      this.popperVM.node = (
-        // <transition name={this.transition} onAfterLeave={this.doDestroy}>
-          <div
-            onMouseleave={() => {
-              this.setExpectedState(false)
-              this.debounceClose()
-            }}
-            onMouseenter={() => {
-              this.setExpectedState(true)
-            }}
-            ref="popper"
-            role="tooltip"
-            id={this.tooltipId}
-            aria-hidden={this.disabled || !this.showPopper ? 'true' : 'false'}
-            v-show={!this.disabled && this.showPopper}
-            class={[
-              'el-tooltip__popper',
-              'is-' + this.effect,
-              this.popperClass
-            ]}
-          >
-            {this.$slots.content || this.content}
-          </div>
-        // </transition>
+      this.popperVM.node = h(_Transition, {
+          name: this.transition,
+          onAfterLeave: this.doDestroy
+        },
+        [
+          h('div', 
+            {
+              onMouseleave: () => {
+                this.setExpectedState(false)
+                this.debounceClose()
+              },
+              onMouseenter: () => {
+                this.setExpectedState(true)
+              },
+              ref: "popper",
+              role: "tooltip",
+              id: this.tooltipId,
+              'aria-hidden': this.disabled || !this.showPopper ? 'true' : 'false',
+              directives: [
+                {
+                  name: 'show',
+                  value: !this.disabled && this.showPopper
+                }
+              ],
+              class: [
+                'el-tooltip__popper',
+                'is-' + this.effect,
+                this.popperClass
+              ]
+            }, 
+            (this.$slots.content || this.content)
+          )
+        ]
       )
+      // this.popperVM.mount('body');
     }
 
     const firstElement = this.getFirstElement()
@@ -225,6 +243,7 @@ export default {
       if (!Array.isArray(slots)) return null
       let element = null
       for (let index = 0; index < slots.length; index++) {
+        console.log(slots[index], 'slots[index]');
         // if (slots[index] && slots[index].tag) {
           element = slots[index]
         // }

diff --git a/packages/tooltip/src/main.vue b/packages/tooltip/src/main.vue
@@ -14,7 +14,7 @@
                 popperClass
             ]"
     >
-      <slot @mouseenter="show" @mouseleave="hide" @blur="handleBlur" @click="removeFocusing"></slot>
+      <slot></slot>
     </div>
   </transition>
 </template>