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

前提:
由于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>

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