vhb-table/lib/tooltip/src/tooltip.min.js

一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...

"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _xeUtils=_interopRequireDefault(require("xe-utils")),_conf=_interopRequireDefault(require("../../v-h-b-table/src/conf")),_size=_interopRequireDefault(require("../../mixins/size")),_utils=_interopRequireDefault(require("../../tools/utils")),_dom=_interopRequireDefault(require("../../tools/dom"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _defineProperty(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function updateTipStyle(e){var t=e.$el,i=e.tipTarget,n=e.tipStore;if(i){var o=_dom.default.getDomNode(),r=o.scrollTop,l=o.scrollLeft,s=o.visibleWidth,a=_dom.default.getAbsolutePos(i),u=a.top,c=a.left,p=t.offsetHeight,h=t.offsetWidth,f=u-p-6,d=Math.max(6,c+Math.floor((i.offsetWidth-h)/2));l+s<d+h+6&&(d=l+s-h-6),u-p<r+6&&(n.placement="bottom",f=u+i.offsetHeight+6),n.style.top="".concat(f,"px"),n.style.left="".concat(d,"px"),n.arrowStyle.left="".concat(c-d+i.offsetWidth/2,"px")}}function showTip(e){var t=e.$el,i=e.tipStore,n=e.zIndex;return t.parentNode||document.body.appendChild(t),e.updateValue(!0),e.updateZindex(),i.placement="top",i.style={width:"auto",left:0,top:0,zIndex:n||e.tipZindex},i.arrowStyle={left:"50%"},e.updatePlacement()}function renderContent(e,t){var i=t.$scopedSlots,n=t.useHTML,o=t.tipContent;return i.content?e("div",{key:1,class:"vhb-table--tooltip-content"},i.content.call(this,{})):n?e("div",{key:2,class:"vhb-table--tooltip-content",domProps:{innerHTML:o}}):e("div",{key:3,class:"vhb-table--tooltip-content"},_utils.default.formatText(o))}var _default2={name:"VhbTooltip",mixins:[_size.default],props:{value:Boolean,size:{type:String,default:function(){return _conf.default.tooltip.size||_conf.default.size}},trigger:{type:String,default:function(){return _conf.default.tooltip.trigger}},theme:{type:String,default:function(){return _conf.default.tooltip.theme}},content:{type:[String,Number],default:null},useHTML:Boolean,zIndex:[String,Number],isArrow:{type:Boolean,default:!0},enterable:Boolean,enterDelay:{type:Number,default:function(){return _conf.default.tooltip.enterDelay}},leaveDelay:{type:Number,default:function(){return _conf.default.tooltip.leaveDelay}}},data:function(){return{isUpdate:!1,visible:!1,tipContent:"",tipActive:!1,tipTarget:null,tipZindex:0,tipStore:{style:{},placement:"",arrowStyle:null}}},watch:{content:function(e){this.tipContent=e},value:function(e){this.isUpdate||this[e?"open":"close"](),this.isUpdate=!1}},created:function(){var e=this;this.showDelayTip=_xeUtils.default.debounce(function(){e.tipActive&&showTip(e)},this.enterDelay,{leading:!1,trailing:!0})},mounted:function(){var i,n=this.$el,e=this.trigger,t=this.content,o=this.value,r=n.parentNode;this.tipContent=t,this.tipZindex=_utils.default.nextZIndex(),_xeUtils.default.arrayEach(n.children,function(e,t){1<t&&(r.insertBefore(e,n),i||(i=e))}),r.removeChild(n),(this.target=i)&&("hover"===e?(i.onmouseleave=this.targetMouseleaveEvent,i.onmouseenter=this.targetMouseenterEvent):"click"===e&&(i.onclick=this.clickEvent)),o&&this.open()},beforeDestroy:function(){var e=this.$el,t=this.target,i=this.trigger,n=e.parentNode;n&&n.removeChild(e),t&&("hover"===i?(t.onmouseenter=null,t.onmouseleave=null):"click"===i&&(t.onclick=null))},render:function(e){var t,i,n=this.$scopedSlots,o=this.vSize,r=this.theme,l=this.tipActive,s=this.isArrow,a=this.visible,u=this.tipStore,c=this.enterable;return c&&(i={mouseenter:this.wrapperMouseenterEvent,mouseleave:this.wrapperMouseleaveEvent}),e("div",{class:["vhb-table--tooltip-wrapper","theme--".concat(r),(t={},_defineProperty(t,"size--".concat(o),o),_defineProperty(t,"placement--".concat(u.placement),u.placement),_defineProperty(t,"is--enterable",c),_defineProperty(t,"is--visible",a),_defineProperty(t,"is--arrow",s),_defineProperty(t,"is--actived",l),t)],style:u.style,ref:"tipWrapper",on:i},[renderContent(e,this),e("div",{class:"vhb-table--tooltip-arrow",style:u.arrowStyle})].concat(n.default?n.default.call(this,{}):[]))},methods:{open:function(e,t){return this.toVisible(e||this.target,t)},close:function(){return this.tipTarget=null,this.tipActive=!1,Object.assign(this.tipStore,{style:{},placement:"",arrowStyle:null}),this.updateValue(!1),this.$nextTick()},updateValue:function(e){e!==this.visible&&(this.visible=e,this.isUpdate=!0,this.$listeners.input&&this.$emit("input",this.visible))},updateZindex:function(){this.tipZindex<_utils.default.getLastZIndex()&&(this.tipZindex=_utils.default.nextZIndex())},toVisible:function(e,t){if(e){var i=this.trigger,n=this.enterDelay;if(this.tipActive=!0,this.tipTarget=e,t&&(this.tipContent=t),!n||"hover"!==i)return showTip(this);this.showDelayTip()}return this.$nextTick()},updatePlacement:function(){var t=this;return this.$nextTick().then(function(){var e=t.$el;if(t.tipTarget&&e)return updateTipStyle(t),t.$nextTick().then(function(){return updateTipStyle(t)})})},isActived:function(){return this.tipActive},setActived:function(e){this.tipActive=!!e},clickEvent:function(){this[this.visible?"close":"open"]()},targetMouseenterEvent:function(){this.open()},targetMouseleaveEvent:function(){var e=this,t=this.trigger,i=this.enterable,n=this.leaveDelay;this.tipActive=!1,i&&"hover"===t?setTimeout(function(){e.tipActive||e.close()},n):this.close()},wrapperMouseenterEvent:function(){this.tipActive=!0},wrapperMouseleaveEvent:function(){var e=this,t=this.trigger,i=this.enterable,n=this.leaveDelay;this.tipActive=!1,i&&"hover"===t&&setTimeout(function(){e.tipActive||e.close()},n)}}};exports.default=_default2;