diff --git a/packages/tooltip/src/main.js b/packages/tooltip/src/main.js index 4e9979d21..800bd7bd8 100644 --- a/packages/tooltip/src/main.js +++ b/packages/tooltip/src/main.js @@ -1,7 +1,6 @@ import Popper from 'element-ui/src/utils/vue-popper'; import debounce from 'throttle-debounce/debounce'; import { addClass, removeClass, on, off } from 'element-ui/src/utils/dom'; -import { getFirstComponentChild } from 'element-ui/src/utils/vdom'; import { generateId } from 'element-ui/src/utils/util'; import Vue from 'vue'; @@ -54,15 +53,11 @@ export default { data() { return { + tooltipId: `el-tooltip-${generateId()}`, timeoutPending: null, focusing: false }; }, - computed: { - tooltipId() { - return `el-tooltip-${generateId()}`; - } - }, beforeCreate() { if (this.$isServer) return; @@ -98,16 +93,13 @@ export default { ); } - if (!this.$slots.default || !this.$slots.default.length) return this.$slots.default; + const firstElement = this.getFirstElement(); + if (!firstElement) return null; - const vnode = getFirstComponentChild(this.$slots.default); + const data = firstElement.data = firstElement.data || {}; + data.staticClass = this.addTooltipClass(data.staticClass); - if (!vnode) return vnode; - - const data = vnode.data = vnode.data || {}; - data.staticClass = this.concatClass(data.staticClass, 'el-tooltip'); - - return vnode; + return firstElement; }, mounted() { @@ -132,6 +124,14 @@ export default { on(this.referenceElm, 'blur', this.handleBlur); on(this.referenceElm, 'click', this.removeFocusing); } + // fix issue https://github.com/ElemeFE/element/issues/14424 + if (this.value && this.popperVM) { + this.popperVM.$nextTick(() => { + if (this.value) { + this.updatePopper(); + } + }); + } }, watch: { focusing(val) { @@ -164,9 +164,12 @@ export default { this.focusing = false; }, - concatClass(a, b) { - if (a && a.indexOf(b) > -1) return a; - return a ? b ? (a + ' ' + b) : a : (b || ''); + addTooltipClass(prev) { + if (!prev) { + return 'el-tooltip'; + } else { + return 'el-tooltip ' + prev.replace('el-tooltip', ''); + } }, handleShowPopper() { @@ -202,6 +205,18 @@ export default { clearTimeout(this.timeoutPending); } this.expectedState = expectedState; + }, + + getFirstElement() { + const slots = this.$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; } }, diff --git a/src/utils/vdom.js b/src/utils/vdom.js index 7b6ee9d94..6bf702849 100644 --- a/src/utils/vdom.js +++ b/src/utils/vdom.js @@ -3,7 +3,3 @@ import { hasOwn } from 'element-ui/src/utils/util'; export function isVNode(node) { return node !== null && typeof node === 'object' && hasOwn(node, 'componentOptions'); }; - -export function getFirstComponentChild(children) { - return children && children.filter(c => c && c.tag)[0]; -}; diff --git a/src/utils/vue-popper.js b/src/utils/vue-popper.js index 382616185..ca35df92b 100644 --- a/src/utils/vue-popper.js +++ b/src/utils/vue-popper.js @@ -70,9 +70,7 @@ export default { }, showPopper(val) { - if (this.disabled) { - return; - } + if (this.disabled) return; val ? this.updatePopper() : this.destroyPopper(); this.$emit('input', val); }