Vue 鼠标、键盘监听事件

举报
SHQ5785 发表于 2023/02/26 11:06:05 2023/02/26
【摘要】 一、前言在项目开发过程中,需要根据鼠标事件进行相应处理。现予以梳理。鼠标事件如下所示:点击事件:@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

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。