Vue组件之Tooltip的示例代码
时间:2019-04-07
本文章向大家介绍Vue组件之Tooltip的示例代码,主要包括Vue组件之Tooltip的示例代码使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言
本文主要Alert 组件的大致框架, 提供少量可配置选项。 旨在大致提供思路
tooltip
常用于展示鼠标 hover 时的提示信息。
模板结构
<template> <div style="position:relative;"> <span ref="trigger"> <slot> </slot> </span> <div class="tooltip" 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"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"> <slot name="content" v-html="content"></slot> </div> </div> </div> </template>
大致结构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', 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 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。
<d-tooltip content="我是tooltip"> <d-button type="text">鼠标移动到我上面试试</d-button> </d-tooltip> <d-tooltip content="我是tooltip" trigger="click"> <d-button type="text">点我试试</d-button> </d-tooltip>
content内容分发
设置一个名为content的slot。
<d-tooltip> <d-button type="text">鼠标移动到我上面试试</d-button> <p slot="content" class="tooltip-content">我是内容分发的conent。</p> </d-tooltip>
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
content | 显示的内容,也可以通过 slot#content 传入 DOM | String | — | — |
placement | Tooltip 的出现位置 | String | top/right/bottom/left | top |
trigger | tooltip触发方式 | String | — | hover |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 1755: [Usaco2005 qua]Bank Interest
- SQL Server 重新组织生成索引
- 3386/1752: [Usaco2004 Nov]Til the Cows Come Home 带奶牛回家
- 洛谷P2197 nim游戏(Nim游戏)
- SQL Server 索引和表体系结构(聚集索引+非聚集索引)
- 3384/1750: [Usaco2004 Nov]Apple Catching 接苹果
- 1702: [Usaco2007 Mar]Gold Balanced Lineup 平衡的队列
- 1455: 罗马游戏
- SQL Server 高性能写入的一些总结
- 3389: [Usaco2004 Dec]Cleaning Shifts安排值班
- 1754: [Usaco2005 qua]Bull Math
- 3377: [Usaco2004 Open]The Cow Lineup 奶牛序列
- 3301: [USACO2011 Feb] Cow Line
- SQL Server 索引和表体系结构(包含列索引)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- django 利用pillow 进行简单的设置验证码功能(python)
- Centos环境下安装Zend optimizer 3.3.9的方法
- Linux curl表单登录或提交与cookie使用详解
- Linux磁盘设备与LVM管理命令示例详解
- Ubuntu基础教程之apt-get命令
- Ubuntu18.04.2下安装 RTX2080 Nvidia显卡驱动的方法
- linux进程监控与自动重启的简单实现方法
- Linux 解决Deepin无法在root用户启动Google Chrome浏览器的问题
- 在Linux上安装和使用Docker的方法
- centOS7 NET模式设置静态Ip的方法步骤
- CentOS搭建PHP服务器环境简明教程
- CentOS7.2安装MySql5.7并开启远程连接授权的教程
- linux查看防火墙状态与开启关闭命令详解
- linux防火墙iptables规则的查看、添加、删除和修改方法总结
- Linux expect实现自动登录脚本实例代码