Vue组件之Tooltip的示例代码

2023-09-23 00:57:05 63

前言

本文主要Alert组件的大致框架，提供少量可配置选项。旨在大致提供思路

tooltip

常用于展示鼠标hover时的提示信息。

模板结构

大致结构DOM结构一个div包含箭头及气泡内容。

v-bind中可选tooltip位置，是否禁用，及显示隐藏

slot差值供自定义默认接收content内容

script

importEventListenerfrom'../utils/EventListener.js';

exportdefault{
props:{
//需要监听的事件
trigger:{
type:String,
default:'click'
},
effect:{
type:String,
default:'fadein'
},
title:{
type:String
},
//toolTip消息提示
content:{
type:String
},
header:{
type:Boolean,
default:true
},
placement:{
type:String
}
},
data(){
return{
//通过计算所得气泡位置
position:{
top:0,
left:0
},
show:true
};
},
watch:{
show:function(val){
if(val){
constpopover=this.$refs.popover;
consttriger=this.$refs.trigger.children[0];
//通过placement计算出位子
switch(this.placement){
case'top':
this.position.left=triger.offsetLeft-popover.offsetWidth/2+triger.offsetWidth/2;
this.position.top=triger.offsetTop-popover.offsetHeight;
break;
case'left':
this.position.left=triger.offsetLeft-popover.offsetWidth;
this.position.top=triger.offsetTop+triger.offsetHeight/2-popover.offsetHeight/2;
break;
case'right':
this.position.left=triger.offsetLeft+triger.offsetWidth;
this.position.top=triger.offsetTop+triger.offsetHeight/2-popover.offsetHeight/2;
break;
case'bottom':
this.position.left=triger.offsetLeft-popover.offsetWidth/2+triger.offsetWidth/2;
this.position.top=triger.offsetTop+triger.offsetHeight;
break;
default:
console.log('Wrongplacementprop');
}
popover.style.top=this.position.top+'px';
popover.style.left=this.position.left+'px';
}
}
},
methods:{
toggle(){
this.show=!this.show;
}
},
mounted(){
if(!this.$refs.popover)returnconsole.error("Couldn'tfindpopoverrefinyourcomponentthatusespopoverMixin.");
//获取监听对象
consttriger=this.$refs.trigger.children[0];
//根据trigger监听特定事件
if(this.trigger==='hover'){
this._mouseenterEvent=EventListener.listen(triger,'mouseenter',()=>{
this.show=true;
});
this._mouseleaveEvent=EventListener.listen(triger,'mouseleave',()=>{
this.show=false;
});
}elseif(this.trigger==='focus'){
this._focusEvent=EventListener.listen(triger,'focus',()=>{
this.show=true;
});
this._blurEvent=EventListener.listen(triger,'blur',()=>{
this.show=false;
});
}else{
this._clickEvent=EventListener.listen(triger,'click',this.toggle);
}
this.show=!this.show;
},
//在组件销毁前移除监听，释放内存
beforeDestroy(){
if(this._blurEvent){
this._blurEvent.remove();
this._focusEvent.remove();
}
if(this._mouseenterEvent){
this._mouseenterEvent.remove();
this._mouseleaveEvent.remove();
}
if(this._clickEvent)this._clickEvent.remove();
}
};

//EventListener.js
constEventListener={
/**
*ListentoDOMeventsduringthebubblephase.
*
*@param{DOMEventTarget}targetDOMelementtoregisterlisteneron.
*@param{string}eventTypeEventtype,e.g.'click'or'mouseover'.
*@param{function}callbackCallbackfunction.
*@return{object}Objectwitha`remove`method.
*/
listen(target,eventType,callback){
if(target.addEventListener){
target.addEventListener(eventType,callback,false);
return{
remove(){
target.removeEventListener(eventType,callback,false);
}
};
}elseif(target.attachEvent){
target.attachEvent('on'+eventType,callback);
return{
remove(){
target.detachEvent('on'+eventType,callback);
}
};
}
}
};

exportdefaultEventListener;

封装的事件监听

使用

使用content属性来决定hover时的提示信息。由placement属性决定展示效果：placement属性值为：方向-对齐位置；四个方向：top、left、right、bottom。trigger属性用于设置触发tooltip的方式，默认为hover。


鼠标移动到我上面试试


点我试试

content内容分发

设置一个名为content的slot。


鼠标移动到我上面试试
我是内容分发的conent。

Attributes

参数	说明	类型	可选值	默认值
content	显示的内容，也可以通过 slot#content 传入DOM	String	—	—
placement	Tooltip的出现位置	String	top/right/bottom/left	top
trigger	tooltip触发方式	String	—	hover

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

Vue组件之Tooltip的示例代码

热门推荐

随机推荐