Vue组件之Tooltip的示例代码

Vue组件之Tooltip的示例代码

前言

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

tooltip

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

模板结构

v-bind:class="{

'top': placement === 'top',

'left': placement === 'left',

'right': placement === 'right',

'bottom': placement === 'bottom',

'disable': type === 'disable',

'delete': type === 'delete',

'visible': show === true

}"

ref="popover"

role="tooltip">

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

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

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

script

import EventListener from '../utils/EventListener.js';

export default {

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) {

const popover = this.$refs.popover;

const triger = 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('Wrong placement prop');

}

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) return console.error("Couldn't find popover ref in your component that uses popoverMixin.");

// 获取监听对象

const triger = 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;

});

} else if (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', thttp://his.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

const EventListener = {

/**

* Listen to DOM events during the bubble phase.

*

* @param {DOMEventTarget} target DOM element to register listener on.

* @param {string} eventType Event type, e.g. 'click' or 'mouseover'.

* @param {function} callback Callback function.

* @return {object} Object with a `remove` method.

*/

listen(target, eventType, callback) {

if (target.addEventListener) {

target.addEventListener(eventType, callback, false);

return {

remove() {

target.removeEventListener(eventType, callback, false);

}

};

} else if (target.attachEvent) {

target.attachEvent('on' + eventType, callback);

return {

remove() {

target.detachEvent('on' + eventType, callback);

}

};

}

}

};

export default EventListener;

封装的事件监听

使用

使用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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。