鼠标、键盘事件监听处理
【摘要】 一、前言在项目开发过程中,需要根据鼠标事件进行相应处理。现予以梳理。鼠标事件如下所示:点击事件:@click //单击@dblclick/ /双击@mousedown //按下@mouseup //抬起@contextmenu // 鼠标右键悬浮事件及触发顺序:@mouseover //划过@mouseenter //进入@mousemove //移动@mouseleave //离开@mo...
一、前言
在项目开发过程中,需要根据鼠标事件进行相应处理。现予以梳理。
鼠标事件如下所示:
点击事件:
@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
即可
<div v-show-tips class="title-text">{{ name }}</div>
三、应用示例:ul 鼠标移动到多个 li 标签上字体高亮
示例代码如下:
<ul v-for="(item,index) in tableData" :key="index" class="smart_nav_con">
<li :class="colorHover===index?'smart_index':'a_white'" style="display:inline-block; width: 100%" @mouseenter="spanHover(index)">
<a class="white a_color bnContentCss" @click.prevent="xiangxi(item)">{{ item.bnContent }}</a>
<a class="white a_color bnDateCss" @click.prevent="xiangxi(item)">{{ item.bnDate }}</a>
<a class="white a_color bnPublishNameCss" @click.prevent="xiangxi(item)">{{ item.bnPublishName }}</a>
</li>
</ul>
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;
}
效果如下:
四、应用示例:移动到元素上对应改变背景色
<ul v-for="(item,index) in tableData" :key="index" style="list-style: none;padding-left: 10px;">
<li :class="active === index?'smart_index':'a_white'" style="display:inline-block; width: 98%" @mouseover="mouseOver(index)" @mouseleave="mouseLeave(index)">
<a class="circle">
<div class="circletext" @click.prevent="xiangxi(item)" v-html="formatDate(item.bnDate)" />
</a>
<div style="display:inline-block;position: relative;top: 3px;width: 80%;margin-left: 12px">
<a style="width: 80%" @click.prevent="xiangxi(item)">
<span class="NoticeTitle">{{ item.bnTitle }}</span>
</a>
<a style="width: 80%" @click.prevent="xiangxi(item)">
<span class="NoticeContent">{{ item.bnContent }}</span>
</a>
</div>
</li>
</ul>
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;
}
效果如下:
五、拓展阅读
【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)