vue鼠标停留在表格table2秒后,显示悬浮快(计算模块)

鼠标停留后,显示计算模块悬浮块如下
vue鼠标停留在表格table2秒后,显示悬浮快(计算模块)_第1张图片
但鼠标停留在td单元格内,两秒后将出现悬浮 div,移出将隐藏

复制完整代码直接可用 (index.html),无需node环境

DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
  
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.1.3/css/bootstrap.min.css">
  
  <script src="http://cdn.bootcss.com/bootstrap/4.1.3/js/bootstrap.min.js">script>
head>
<style>
  .block-compute {
    width: 10rem;
    height: 5rem;
    background: #f8f9fa;
    border-radius: 1rem;
    color: #343a40;
    border: 1px solid;
    border-color: #343a40;
    position: absolute;
  }
style>

<body>
  <div id="app">
    <div class="block-compute" v-show="showPop" v-bind:style="{ left: pageX+'px',top: pageY+'px' }">{{pageX}}div>
    <div class="table-responsive">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>Data Timeth>
            <th>1th>
            <th>2th>
            <th>3th>
            <th>1th>
            <th>2th>
            <th>3th>
            <th>1th>
            <th>2th>
            <th>3th>
            <th>1th>
            <th>2th>
            <th>3th>
            <th>1th>
            <th>2th>
            <th>3th>
            <th>1th>
            <th>2th>
            <th>3th>
          tr>
        thead>
        <tbody>
          <tr>
            <td>2022-10-18td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave">999td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave">999td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave">999td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave">999td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave">999td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave">999td>
          tr>
          <tr>
            <td>2022-10-19td>
            <td @mouseenter="enter" @mouseleave="leave">888td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave" @mouseenter="enter" @mouseleave="leave">888td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave">888td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave">888td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave">888td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave">888td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
          tr>
          <tr>
            <td>2022-10-20td>
            <td @mouseenter="enter" @mouseleave="leave">777td>
            <td @mouseenter="enter" @mouseleave="leave">666td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave">777td>
            <td @mouseenter="enter" @mouseleave="leave">666td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave">777td>
            <td @mouseenter="enter" @mouseleave="leave">666td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave">777td>
            <td @mouseenter="enter" @mouseleave="leave">666td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave">777td>
            <td @mouseenter="enter" @mouseleave="leave">666td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
            <td @mouseenter="enter" @mouseleave="leave">777td>
            <td @mouseenter="enter" @mouseleave="leave">666td>
            <td @mouseenter="enter" @mouseleave="leave">0td>
          tr>
        tbody>
      table>
      table>
    div>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js!',
          showPop: false,
          pageX: 0,
          pageY: 0,
          timeoutId: null,
        },
        methods: {
          enter: function (e) {
            if (!this.timeoutId) {
              this.timeoutId = window.setTimeout(() => {
                this.timeoutId = null;
                let { pageX, pageY } = e;
                this.pageX = pageX;
                this.pageY = pageY;
                this.showPop = true;
              }, 2000); //停顿两秒
            }
          },
          leave: function (e) {
            this.showPop = false;
            window.clearTimeout(this.timeoutId);
            this.timeoutId = null;
          }
        }, destroyed() {
          window.clearTimeout(this.timeoutId);
        }
      })
    script>
body>

html>

搜索内容:
鼠标放在td单元格两秒后,显示计算悬浮块
vue使用table鼠标移动到单元格后,显示悬浮div
vue 悬浮块跟随鼠标移动
html鼠标停留几秒后,显示悬浮框并计算td内容显示
html鼠标放在table中,显示计算悬浮框

你可能感兴趣的:(个人日志,Vue,vue.js,javascript,前端)