Vue进阶（幺柒肆）：鼠标、键盘事件详解

您所在的位置：网站首页 › allegro鼠标中键 › Vue进阶（幺柒肆）：鼠标、键盘事件详解

Vue进阶（幺柒肆）：鼠标、键盘事件详解

2023-06-26 20:48| 来源: 网络整理| 查看: 265

一、前言

在项目开发过程中，需要根据鼠标事件进行相应处理。现予以梳理。鼠标事件如下所示：

点击事件：

@click //单击 @dblclick/ /双击 @mousedown //按下 @mouseup //抬起 @contextmenu // 鼠标右键

悬浮事件及触发顺序：

@mouseover //划过 @mouseenter //进入 @mousemove //移动 @mouseleave //离开 @mouseout //移出

滚动事件：

@mousewheel

键盘事件

@keydown // 键盘按下时触发

@keyup // 键盘弹起

@keypress // 键盘按住时触发

获取按键的键码 e.keyCode

此外，方法后面跟keyCode值可以直接绑定键盘按键。

@keyup.13 // 按回车键

@keyup.enter // 回车

@keyup.up // 上键

@keyup.down // 下键

@keyup.left // 左键

@keyup.right // 右键

@keyup.delete // 删除键

@keyup.space // 空格

二、应用示例：实现文字溢出显示...鼠标移入浮层展示全部

实现逻辑：

将文字放到一个容器中，将容器的样式（主要是有关字体的样式）都设置为当前元素的样式，然后获取容器的宽，也就是文字的宽。如果文字的宽度超过了当前元素的宽度，则给溢出隐藏的css样式 overflow :hidden;text-overflow: ellipsis;white-space: normal 定义鼠标移入展示浮层，浮层中显示全部内容，鼠标移出销毁浮层。

通过自定义指令实现如上思路：

Vue.directive('showTips', { // el {element} 当前元素 componentUpdated (el) { const curStyle = window.getComputedStyle(el, '') // 获取当前元素的style const textSpan = document.createElement('span') // 创建一个容器来记录文字的width // 设置新容器的字体样式，确保与当前需要隐藏的样式相同 textSpan.style.fontSize = curStyle.fontSize textSpan.style.fontWeight = curStyle.fontWeight textSpan.style.fontFamily = curStyle.fontFamily // 将容器插入body，如果不插入，offsetWidth为0 document.body.appendChild(textSpan) // 设置新容器的文字 textSpan.innerHTML = el.innerText // 如果字体元素大于当前元素，则需要隐藏 if (textSpan.offsetWidth > el.offsetWidth) { // 给当前元素设置超出隐藏 el.style.overflow = 'hidden' el.style.textOverflow = 'ellipsis' el.style.whiteSpace = 'nowrap' // 鼠标移入 el.onmouseenter = function (e) { // 创建浮层元素并设置样式 const vcTooltipDom = document.createElement('div') vcTooltipDom.style.cssText = ` max-width:400px; max-height: 400px; overflow: auto; position:absolute; top:${e.clientY + 5}px; left:${e.clientX}px; background: rgba(0, 0 , 0, .6); color:#fff; border-radius:5px; padding:10px; display:inline-block; font-size:12px; z-index:19999 ` // 设置id方便寻找 vcTooltipDom.setAttribute('id', 'vc-tooltip') // 将浮层插入到body中 document.body.appendChild(vcTooltipDom) // 浮层中的文字 document.getElementById('vc-tooltip').innerHTML = el.innerText } // 鼠标移出 el.onmouseleave = function () { // 找到浮层元素并移出 const vcTooltipDom = document.getElementById('vc-tooltip') vcTooltipDom && document.body.removeChild(vcTooltipDom) } } // 记得移除刚刚创建的记录文字的容器 document.body.removeChild(textSpan) }, // 指令与元素解绑时 unbind () { // 找到浮层元素并移除 const vcTooltipDom = document.getElementById('vc-tooltip') vcTooltipDom && document.body.removeChild(vcTooltipDom) } })

使用时只需要溢出隐藏的元素上直接加上指令 v-show-tips 即可

{{ name }} 三、应用示例：ul 鼠标移动到多个 li 标签上字体高亮

示例代码如下：

{{ item.bnContent }} {{ item.bnDate }} {{ item.bnPublishName }} data(){ return{ colorHover: 0 } } methods:{ spanHover: function(index) { this.colorHover = index } } .smart_nav_con{ color:black; position: relative; padding-left: 10px; padding-top: 12px; } .smart_nav_con .smart_index .a_white{ color:black; } .smart_nav_con .smart_index .a_color{ color:#00a0e9; } .smart_nav_con li a{ color:black; } .smart_nav_con .smart_index a{ color:#00a0e9; } .bnContentCss{ font-size: 14px; color: #666666; width: 60%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display: inline-block } .bnDateCss{ font-size: 14px; color: #9b9b9b; display: inline-block; float: right; margin-right: 13px; } .bnPublishNameCss{ font-size: 14px; color: #82796f; display:inline-block; float: right; position: relative; right: 15px; } .ulCss{ list-style: none; padding-left: 10px; padding-top: 8px; color:#fff; }

效果如下：在这里插入图片描述

四、应用示例：移动到元素上对应改变背景色 {{ item.bnTitle }} {{ item.bnContent }} data(){ return{ active: 0, } } methods:{ mouseOver: function(index) { this.active = index }, mouseLeave: function(index) { this.active = index } } .smart_index{ background-color: #F5F5F5; } .a_white{ background-color: #ffffff; }

效果如下：在这里插入图片描述

五、拓展阅读《Vue进阶（幺柒叁）：表单元素日期校验》

【本文地址】

Vue进阶（幺柒肆）：鼠标、键盘事件详解

Vue进阶（幺柒肆）：鼠标、键盘事件详解

今日新闻

推荐新闻