| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242 | 
							- 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 { generateId } from 'element-ui/src/utils/util';
 
- import Vue 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
 
-     }
 
-   },
 
-   data() {
 
-     return {
 
-       tooltipId: `el-tooltip-${generateId()}`,
 
-       timeoutPending: null,
 
-       focusing: false
 
-     };
 
-   },
 
-   beforeCreate() {
 
-     if (this.$isServer) return;
 
-     this.popperVM = new Vue({
 
-       data: { node: '' },
 
-       render(h) {
 
-         return this.node;
 
-       }
 
-     }).$mount();
 
-     this.debounceClose = debounce(200, () => this.handleClosePopper());
 
-   },
 
-   render(h) {
 
-     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>);
 
-     }
 
-     const firstElement = this.getFirstElement();
 
-     if (!firstElement) return null;
 
-     const data = firstElement.data = firstElement.data || {};
 
-     data.staticClass = this.addTooltipClass(data.staticClass);
 
-     return firstElement;
 
-   },
 
-   mounted() {
 
-     this.referenceElm = this.$el;
 
-     if (this.$el.nodeType === 1) {
 
-       this.$el.setAttribute('aria-describedby', this.tooltipId);
 
-       this.$el.setAttribute('tabindex', this.tabindex);
 
-       on(this.referenceElm, 'mouseenter', this.show);
 
-       on(this.referenceElm, 'mouseleave', this.hide);
 
-       on(this.referenceElm, 'focus', () => {
 
-         if (!this.$slots.default || !this.$slots.default.length) {
 
-           this.handleFocus();
 
-           return;
 
-         }
 
-         const instance = this.$slots.default[0].componentInstance;
 
-         if (instance && instance.focus) {
 
-           instance.focus();
 
-         } else {
 
-           this.handleFocus();
 
-         }
 
-       });
 
-       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) {
 
-       if (val) {
 
-         addClass(this.referenceElm, 'focusing');
 
-       } else {
 
-         removeClass(this.referenceElm, 'focusing');
 
-       }
 
-     }
 
-   },
 
-   methods: {
 
-     show() {
 
-       this.setExpectedState(true);
 
-       this.handleShowPopper();
 
-     },
 
-     hide() {
 
-       this.setExpectedState(false);
 
-       this.debounceClose();
 
-     },
 
-     handleFocus() {
 
-       this.focusing = true;
 
-       this.show();
 
-     },
 
-     handleBlur() {
 
-       this.focusing = false;
 
-       this.hide();
 
-     },
 
-     removeFocusing() {
 
-       this.focusing = false;
 
-     },
 
-     addTooltipClass(prev) {
 
-       if (!prev) {
 
-         return 'el-tooltip';
 
-       } else {
 
-         return 'el-tooltip ' + prev.replace('el-tooltip', '');
 
-       }
 
-     },
 
-     handleShowPopper() {
 
-       if (!this.expectedState || this.manual) return;
 
-       clearTimeout(this.timeout);
 
-       this.timeout = setTimeout(() => {
 
-         this.showPopper = true;
 
-       }, this.openDelay);
 
-       if (this.hideAfter > 0) {
 
-         this.timeoutPending = setTimeout(() => {
 
-           this.showPopper = false;
 
-         }, this.hideAfter);
 
-       }
 
-     },
 
-     handleClosePopper() {
 
-       if (this.enterable && this.expectedState || this.manual) return;
 
-       clearTimeout(this.timeout);
 
-       if (this.timeoutPending) {
 
-         clearTimeout(this.timeoutPending);
 
-       }
 
-       this.showPopper = false;
 
-       if (this.disabled) {
 
-         this.doDestroy();
 
-       }
 
-     },
 
-     setExpectedState(expectedState) {
 
-       if (expectedState === false) {
 
-         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];
 
-           break;
 
-         };
 
-       }
 
-       return element;
 
-     }
 
-   },
 
-   beforeDestroy() {
 
-     this.popperVM && this.popperVM.$destroy();
 
-   },
 
-   destroyed() {
 
-     const reference = this.referenceElm;
 
-     if (reference.nodeType === 1) {
 
-       off(reference, 'mouseenter', this.show);
 
-       off(reference, 'mouseleave', this.hide);
 
-       off(reference, 'focus', this.handleFocus);
 
-       off(reference, 'blur', this.handleBlur);
 
-       off(reference, 'click', this.removeFocusing);
 
-     }
 
-   }
 
- };
 
 
  |