使用DataV轮播表dv-scroll-board添加移入显示tooltip

使用DataV轮播表dv-scroll-board添加移入显示tooltip功能

在使用DataV的dv-scroll-board组件时，可能需要添加一个移入显示tooltip的功能。但是，DataV官方文档并没有直接提供这个功能的配置选项。以下是如何通过自定义方式实现此功能的详细步骤。

实现思路

1. 添加一个覆盖层：在dv-scroll-board外层添加一个容器，用于捕捉鼠标事件。
2. 监听鼠标事件：
   • mouseover：显示tooltip。
   • mousemove：更新tooltip的位置。
   • mouseleave：隐藏tooltip。
3. 提取单元格数据：从dv-scroll-board的单元格中提取数据以显示在tooltip中。

DataV官方文档的轮播表 如果有tooltip 请@我一下😀

示例代码

<!-- Vue 2 Code -->
<template>
  <div @mousemove="move">
    <div class="table" @mouseleave="leave">
      <dv-scroll-board
        :config="config"
        :key="key"
        @mouseover="over"
      />
      <p
        v-if="tipShow"
        class="tip-text"
        :style="{ top: tipText.offsetY, left: tipText.offsetX }"
      >
        {{ tipText.name }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'List',
  data() {
    return {
      config: {}, // 轮播表配置
      tipText: {
        name: '',
        offsetX: '',
        offsetY: '',
      },
      tipShow: false, // 控制tooltip显隐
      key: Date.now(), // 用于触发重新渲染
    };
  },
  methods: {
    over(dom) {
      this.tipShow = true;
      const htmlString = dom.ceil; // 获取单元格的HTML字符串
      const regex = /<div[^>]*>(.*?)<\/div>/;
      const match = regex.exec(htmlString);
      this.tipText.name = match ? match[1] : '';
      if (!this.tipText.name) this.tipShow = false;
    },
    move(e) {
      const { left, top } = e.currentTarget.getBoundingClientRect();
      const xPosition = e.pageX - left;
      const yPosition = e.pageY - top;
      this.tipText.offsetX = `${xPosition}px`;
      this.tipText.offsetY = `${yPosition}px`;
    },
    leave() {
      this.tipShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.table {
  position: relative;
}
.tip-text {
  background: #000000;
  padding: 5px;
  font-size: 14px;
  position: absolute;
  left: 0;
  top: 0;
  text-align: center;
  color: white;
}
</style>

注意事项

• 版本兼容性：确保你的@jiaminghi/data-view版本支持mouseover事件。如果版本过低，可能需要升级。亲测2.7.3版本没有悬停
• 性能优化：避免在频繁的鼠标移动事件中执行复杂的操作，以免影响用户体验。

结论

通过这种方式，你可以为dv-scroll-board组件添加一个简单的移入显示tooltip的功能。如果遇到任何问题，欢迎在评论区留言讨论。