首页 > 其他 > 详细

鼠标悬浮显示鼠标停留数据的内容

时间:2021-02-02 17:26:24      阅读:32      评论:0      收藏:0      [点我收藏+]

先看效果图

技术分享图片

 

 

 直接上代码

<el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane :label="speaker.abscissa[0]" name="first">
                  <div
                    class="list"
                    v-for="(item, index) in newUserList"
                    :key="index"
                    style="width:302px"
                    v-loading="newUserList ? false : true"
                    @mouseover="setMouseOver(item, $event)"
                    @mouseout="setMouseOut()"
                    @click="pushRealList(item, speaker.title)"
                  >
                    <span class="index" :class="‘index‘ + (index + 1)">{{
                      index + 1
                    }}</span>
                    <div class="label">
                      <div class="name">
                        <el-badge value="new" class="item">
                          <el-popover
                            placement="top-start"
                            trigger="hover"
                            :content="popoverContent"
                          >
                            <h4 slot="reference">{{ item.name }}</h4>
                          </el-popover>
                        </el-badge>
                      </div>
                    </div>
                    <div class="value">
                      <h4>{{ item.num }}次</h4>
                    </div>
                  </div>
                  <div class="list" v-show="!newUserList" style="width:350px">
                    无数据
                  </div></el-tab-pane
                >

带图解说

技术分享图片

 

 

 函数方法里面是这么写的很简单

    setMouseOver: function(item, $event) {
      // const selectedOption = $event.fromElement.innerText.split(/[\s\n]/)
      this.popoverContent = item.name
    },
    setMouseOut() {
      // console.log(this.popoverContent)
    },

在data里面定义一下 把鼠标停留地方的数据存储一下

技术分享图片

 

 

 

 

技术分享图片

 

 

 

setMouseOver: function(item, $event) 这个我是加了循环数据里面的item可以直接得到数据 你们可以$event.currentTarget.innerText 得到   好吧其实就是因为这个得不到数据我才选择item传参数 不知道为什么用 $nextTick方法也不行  你们要是不行先打印$event看看 再打印$event.currentTarget一步一步看 加油你们是最棒的 干编人

 

 

 

鼠标悬浮显示鼠标停留数据的内容

原文:https://www.cnblogs.com/ht955/p/14362885.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!