fix: 修改tooltip

examples/docs/zh-CN/tooltip.md

@@ -116,8 +116,10 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`。
 :::demo 用具名 slot 分发`content`，替代`tooltip`中的`content`属性。
 ```html
 <el-tooltip placement="top">
-  <div slot="content">多行信息<br/>第二行信息</div>
-  <el-button>Top center</el-button>
+  <template v-slot:content>多行信息<br/>第二行信息</template>
+  <el-button class="test" @click="console.log(111)">Top center</el-button>
+
+  <div class="zmm">张明明</div>
 </el-tooltip>
 ```
 :::

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.8":"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.8":"2.13"}

packages/tooltip/index.js

@@ -1,4 +1,4 @@
-import Tooltip from './src/main'
+import Tooltip from './src/main.vue'
 
 /* istanbul ignore next */
 Tooltip.install = function (app) {

packages/tooltip/src/main-test.vue

@@ -0,0 +1,256 @@
+<template>
+  <transition :name="transition">
+    <div
+      @mouseleave="mouseleaveHandler"
+      @mouseenter="mouseenterHandler"
+      ref="popper"
+      role="tooltip"
+      :id="tooltipId"
+      :aria-hidden="disabled || !showPopper ? 'true' : 'false'"
+      v-show="!disabled && showPopper"
+      :class="[
+                'el-tooltip__popper',
+                'is-' + effect,
+                popperClass
+            ]"
+    >
+      {{ content }}
+    </div>
+  </transition>
+</template>
+<script>
+import Popper from 'element-ui/src/utils/vue-popper'
+import debounce from 'throttle-debounce/debounce'
+import { addClass, removeClass, on } from 'element-ui/src/utils/dom'
+import { generateId } from 'element-ui/src/utils/util'
+// eslint-disable-next-line
+import {
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  onUnmounted,
+  getCurrentInstance
+} from 'vue'
+
+export default {
+  name: 'ElTooltip',
+  mixins: [Popper],
+  props: {
+    openDelay: {
+      type: Number,
+      default: 0
+    },
+    disabled: Boolean,
+    manual: Boolean,
+    effect: {
+      type: String,
+      default: 'dark'
+    },
+    arrowOffset: {
+      type: Number,
+      default: 0
+    },
+    popperClass: String,
+    content: String,
+    visibleArrow: {
+      default: true
+    },
+    transition: {
+      type: String,
+      default: 'el-fade-in-linear'
+    },
+    popperOptions: {
+      default() {
+        return {
+          boundariesPadding: 10,
+          gpuAcceleration: false
+        }
+      }
+    },
+    enterable: {
+      type: Boolean,
+      default: true
+    },
+    hideAfter: {
+      type: Number,
+      default: 0
+    },
+    tabindex: {
+      type: Number,
+      default: 0
+    }
+  },
+  setup(props, context) {
+    const tooltipId = `el-tooltip-${generateId()}`
+    let timeoutPending = null
+    let focusing = false
+    const expectedState = false
+    const debounceClose = debounce(200, () => handleClosePopper())
+    let timeout = null
+    const currentInstance = getCurrentInstance()
+
+    const { slots } = context
+    const {
+      value,
+      transition,
+      content,
+      disabled,
+      manual,
+      effect,
+      popperClass,
+      enterable,
+      tabindex
+    } = props
+
+    watch(
+      () => focusing,
+      (val) => {
+        if (val) {
+          addClass(this.referenceElm, 'focusing')
+        } else {
+          removeClass(this.referenceElm, 'focusing')
+        }
+      }
+    )
+
+    const mouseleaveHandler = () => {
+      setExpectedState(false)
+      debounceClose()
+    }
+    const mouseenterHandler = () => {
+      setExpectedState(true)
+    }
+
+    const show = () => {
+      setExpectedState(true)
+      handleShowPopper()
+    }
+
+    const hide = () => {
+      setExpectedState(false)
+      debounceClose()
+    }
+
+    const handleFocus = () => {
+      focusing = true
+      show()
+    }
+
+    const handleBlur = () => {
+      focusing = false
+      hide()
+    }
+    const removeFocusing = () => {
+      focusing = false
+    }
+
+    // const addTooltipClass = (prev) => {
+    //   if (!prev) {
+    //     return 'el-tooltip'
+    //   } else {
+    //     return 'el-tooltip ' + prev.replace('el-tooltip', '')
+    //   }
+    // }
+
+    const handleShowPopper = () => {
+      const { ctx } = currentInstance
+      if (!expectedState || manual) return
+      clearTimeout(timeout)
+      timeout = setTimeout(() => {
+        ctx.showPopper = true
+      }, openDelay)
+
+      if (hideAfter > 0) {
+        timeoutPending = setTimeout(() => {
+          ctx.showPopper = false
+        }, hideAfter)
+      }
+    }
+
+    const handleClosePopper = () => {
+      const { ctx } = currentInstance
+      if ((enterable && expectedState) || manual) return
+      clearTimeout(timeout)
+
+      if (timeoutPending) {
+        clearTimeout(timeoutPending)
+      }
+      ctx.showPopper = false
+
+      if (disabled) {
+        doDestroy()
+      }
+    }
+
+    const setExpectedState = (expectedState) => {
+      if (expectedState === false) {
+        clearTimeout(timeoutPending)
+      }
+      expectedState = expectedState
+    }
+
+    const getFirstElement = () => {
+      const slots = slots.default()
+      if (!Array.isArray(slots)) return null
+      let element = null
+      for (let index = 0; index < slots.length; index++) {
+        if (slots[index] && slots[index].tag) {
+          element = slots[index]
+        }
+      }
+      return element
+    }
+
+    onMounted(() => {
+      console.log(currentInstance)
+      let referenceElm = currentInstance.vnode.el
+      if (referenceElm.nodeType === 1) {
+        referenceElm.setAttribute('aria-describedby', tooltipId)
+        referenceElm.setAttribute('tabindex', tabindex)
+        //   on(referenceElm, 'mouseenter', show)
+        //   on(referenceElm, 'mouseleave', hide)
+        on(referenceElm, 'focus', () => {
+          if (!slots.default() || !slots.default().length) {
+            handleFocus()
+            return
+          }
+          const instance = slots.default()[0].componentInstance
+          if (instance && instance.focus) {
+            instance.focus()
+          } else {
+            handleFocus()
+          }
+        })
+        //   on(referenceElm, 'blur', handleBlur)
+        //   on(referenceElm, 'click', removeFocusing)
+      }
+      // fix issue https://github.com/ElemeFE/element/issues/14424
+      // if (this.value && this.popperVM) {
+      //   this.popperVM.$nextTick(() => {
+      //     if (this.value) {
+      //       this.updatePopper()
+      //     }
+      //   })
+      // }
+    })
+
+    onBeforeUnmount(() => {})
+
+    onUnmounted(() => {})
+
+    return {
+      mouseleaveHandler,
+      mouseenterHandler,
+      show,
+      hide,
+      handleBlur,
+      removeFocusing,
+      transition,
+      tooltipId,
+      disabled,
+      effect,
+      popperClass
+    }
+  }
+}
+</script>

packages/tooltip/src/main.js

@@ -244,9 +244,9 @@ export default {
       let element = null
       for (let index = 0; index < slots.length; index++) {
         console.log(slots[index], 'slots[index]');
-        // if (slots[index] && slots[index].tag) {
+        if (slots[index] && slots[index].type) {
           element = slots[index]
-        // }
+        }
       }
       return element
     }