前提:
由于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>
求铁子点赞,评论,收藏,关注