移动端(H5) 用vue实现tooltip功能

在没有vant组件库的tooltip支持下,本文介绍了如何手动创建一个移动端(H5)的tooltip功能。通过点击小宫格,tooltip提示框能智能地保持在可视区域内。详细内容包括html结构、javascript逻辑和css样式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前提:
由于vant组件库没有tooltip的功能只能手写了.
先上图
在这里插入图片描述
在这里插入图片描述
当点击最右边的小宫格时,tooltip提示框不会超出去,会一直保持在可视区域里.

html:

<template>
  <div class="wrap" @click="showTips = false">
    <div class="subject">
      學習情況
    </div>
    <hr />
    <div class="content">
      <van-row gutter="15">
        <!-- 科目 -->
        <van-col span="4" class="result-name-wrap">
          <van-row
            class="result-name"
            v-for="(item, index) in demoData.result"
            :key="index"
          >
            {{ item.name }}
          </van-row>
        </van-col>
        <van-col span="20">
          <div class="result">
            <!-- 科目 -->
            <van-row class="top-subject">
              <span
                class="top-subject-name"
                v-for="(item, index) in demoData.subject"
                :key="index"
              >
                {{ item }}
              </span>
            </van-row>
            <!-- 成績 分數 -->
            <van-row
              class="result-score"
              v-for="(item, index) in demoData.result"
              :key="index"
            >
              <span
                class="result-score-item"
                :style="resultItem | bgColor"
                v-for="(resultItem, resultIndex) in item.score"
                :key="resultIndex"
                @click.stop="fnTip(resultItem, resultIndex, index, $event)"
              >
                {{ resultItem }}
              </span>
            </van-row>
          </div>
        </van-col>
      </van-row>
      <!-- 提示框信息 -->
      <div class="tipStyle" :style="tipStyle" v-if="showTips">
        <div>考生:{{ tips.name }}</div>
        <div>
          <p>考試科目:{{ tips.title }}</p>
          <p>分數:{{ tips.score }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

js:

<script>
export default {
  data () {
    return {
      // 模擬的假數據
      demoData: {
        subject: ['语文', '数学', '英语', '历史', '地理', '政治', '美术'],
        result: [
          {
            name: '刘一',
            score: [85, 86, 87, 88, 89, 90, 91]
          },
          {
            name: '陈二',
            score: [85, 86, 87, 88, 89, 90, 91]
          },
          {
            name: '張三',
            score: [85, 86, 87, 88, 89, 90, 91]
          },
          {
            name: '李四',
            score: [85, 86, 87, 88, 89, 90, 91]
          },
          {
            name: '王五',
            score: [85, 86, 87, 88, 89, 90, 91]
          },
          {
            name: '趙六',
            score: [85, 86, 87, 88, 89, 90, 91]
          },
          {
            name: '田七',
            score: [85, 86, 87, 88, 89, 90, 91]
          }
        ]
      },
      tips: {
        name: '',
        title: '',
        score: ''
      },
      showTips: false
    }
  },
  mounted () {
    // 左右滑動 隱藏tooltip框
    const _this = this
    window.addEventListener('scroll', function () {
      _this.showTips = false
    },ture)
  },
  methods: {
    fnTip (val, row, colum, e) {
      // 這個 e 很關鍵
      const { offsetTop } = e.target
      this.showTips = true
      this.tips = {
        title: this.demoData.subject[row],
        name: this.demoData.result[colum].name,
        estimate: this.demoData.result[colum].estimate,
        score: val
      }
      this.tipStyle = {
        top: offsetTop + 'px',
        left: e.clientX > 200 ? '60%' : e.clientX - 10 + 'px'
      }
    }
  },
  filters: {
    bgColor (value) {
      let opacity = 0
      let color = {}
      if (value < 60) {
        color = { color: 'red' }
        opacity = 0.7
      } else if (value <= 80) {
        color = { color: 'orange' }
        opacity = 0.7
      } else {
        color = { color: 'green' }
        opacity = 0.7
      }
      return { background: `rgba(84,114,199,${opacity})`, ...color }
    }
  }
}
</script>

css:

<style lang="less" scoped>
.wrap {
  padding: 10px;
  .content {
    position: relative;
    .tipStyle {
      position: absolute;
      background-color: rgba(255, 255, 255, 0.8);
      box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
      padding: 10px;
    }
    .result-name-wrap {
      margin-top: 38px;
      .result-name {
        height: 30px;
        line-height: 30px;
        margin: 0 0 5px 0;
        border: 1px solid burlywood;
      }
    }
    .result {
      overflow-y: auto;
      .top-subject {
        display: flex;
        .top-subject-name {
          height: 30px;
          line-height: 30px;
          margin: 0 10px 5px 0;
          border: 1px solid burlywood;
          width: 72px;
          min-width: 42px;
        }
      }
      .result-score {
        display: flex;
        .result-score-item {
          height: 30px;
          line-height: 30px;
          border: 1px solid tan;
          margin: 0 10px 5px 0;
          text-align: center;
          width: 72px;
          min-width: 42px;
        }
      }
    }
  }
}
</style>

求铁子点赞,评论,收藏,关注

### 如何在 UniApp 中使用 ECharts 实现移动端数据可视化 #### 安装与配置 为了使 ECharts 在 UniApp 项目中正常工作,需先安装适用于 UniApp 的 ECharts 插件[^1]。对于仅限 H5 端的应用场景,可以直接引入传统的 ECharts 库;然而,在开发面向多平台的小程序时,则建议采用专门针对小程序优化过的版本或是像 uCharts 这样的替代方案[^2]。 #### 初始化图表容器 创建一个用于容纳图表的 HTML 结构,并为其指定唯一的 ID 属性以便后续 JavaScript 可以找到该元素并初始化图表实例: ```html <view id="main" style="width: 100%; height:400px;"></view> ``` #### 加载 ECharts 并绘制图形 接下来编写一段简单的脚本代码来加载 ECharts 库以及定义要呈现的具体图表类型及其样式设置。这里给出了一段基础的例子说明如何利用 `onReady` 生命周期钩子函数完成这一过程: ```javascript import * as echarts from &#39;echarts&#39;; export default { mounted() { this.initChart(); }, methods: { initChart() { const chartDom = document.getElementById(&#39;main&#39;); let myChart = echarts.init(chartDom); var option; option = { title: { text: &#39;ECharts Example&#39; }, tooltip: {}, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: &#39;销量&#39;, type: &#39;bar&#39;, data: [5, 20, 36, 10, 10, 20] }] }; option && myChart.setOption(option); window.addEventListener("resize", function () { setTimeout(() => {myChart.resize()}, 100); // 延迟执行 resize 方法解决部分设备上可能出现的问题 }); } } } ``` 这段代码展示了如何在一个 Vue 组件内嵌入 ECharts 图表,并处理了当视窗大小发生变化时重新调整图表尺寸的需求[^4]。 #### 解决常见问题 有时可能会遇到一些特定于某些环境下的 bug ,比如工具提示 (tooltip) 功能可能不会按预期工作。对此类问题的一个潜在修复办法就是确保父级组件不是通过 `v-show` 来控制可见性的,而是改用 `v-if` 或者保证其 CSS 显示属性并非 "none"[^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值