全屏后 element-ui 组件不显示

文章目录

- 问题
- 分析
- - ElementUI 解决方案
  - ElementPlus 解决方案
- 注意

问题

上篇我们说到如何将 DIV 全屏展示
在使用将页面中指定的 DIV 全屏展示后，出现全屏后 element-ui 组件不显示，全屏后展示的提示信息是没有的，如下如所示：

全屏前
全屏后

分析

使用fullScreen进行全屏后，查看弹框，发现其实提示弹框是正常加载的，但是挂载在body下：
在这里插入图片描述

ElementUI 解决方案

append-to-body 作用:tooltip是否插入到body中. 类型:boolean, 默认:true
该属性默认为true, 如果为true, 则tooltip默认插入到body元素中
设置为false, 则需要使用append方法手动插入. 如:

<script>
export default {
  name: 'App',
  data() {
    return {}
  },
  created() {
    this.$message('这是一条消息提示')
  },
  mounted() {
    console.log('this.$refs.elTooltip', this.$refs.elTooltip)
    // 因为将append-to-body设置成了false, 所以需要手动插入
    this.$refs.comp.appendChild(this.$refs.elTooltip.popperVM.$el)
  },
}
</script>
<template>
  <div ref="comp">
    <h3>Hello Vue 2</h3>
    <el-button type="primary">按钮</el-button>
    <el-tooltip ref="elTooltip" :append-to-body="false" class="item" effect="light" placement="top">
      <el-button>上边</el-button>
      <div slot="content" class="tooltipContainer">
        <div v-for="(item, index) in 100" :key="index">{{ item }}-这是内容</div>
      </div>
    </el-tooltip>
  </div>
</template>
<style lang="scss">
.tooltipContainer {
  max-height: 200px;
  overflow: auto;
}
</style>

ElementPlus 解决方案

全屏时，fullscreen的并不是整个body，所以导致无法正常展示提示信息，所以需要将提示信息绑定在fullscreen进行全屏的元素的内部，那么就可以利用append-to进行设置

<!-- 父元素绑定ref -->
<div class="chart_head" ref="classOverViewTooltipRef">
	<span class="chart_title">各班级概况</span>
	<!-- 	挂在到父元素上 -->
	<el-tooltip effect="dark" placement="top" :append-to="classOverViewTooltipRef">
		<template #content> 统计数据来源：当前所选条件下，每个学生当前课程的<br />最新一次成绩 </template>
		<el-icon><InfoFilled /></el-icon>
	</el-tooltip>
</div>

elementPlus中的tooltip，默认挂载在body下，使用fullScreen进行全屏后，查看弹框，发现其实提示弹框是正常加载的，但是挂载在body下：查看tooltip文档说明，发现有属性设置提示内容附加在哪一个元素上，而翻看源码可知，默认会创建一个div放置，而这个div又会挂载在body上而全屏时，fullscreen的并不是整个body，所以导致无法正常展示提示信息，所以需要将提示信息绑定在fullscreen进行全屏的元素的内部，那么就可以利用append-to进行设置