vue页面或者网页全屏后，el-dropdown和el-tooltip无法显示

Hao_Harrison

已于 2024-07-12 10:28:05 修改

阅读量541

点赞数 5

文章标签： vue.js javascript 前端 elementui

于 2024-05-15 08:29:44 首次发布

本文链接：https://blog.csdn.net/WOMENshiNIDE/article/details/138861836

版权

版权声明：参考

CSDN博主「时光荏苒、、、、、、、、」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/woyaojinali/article/details/110958317

CSDN博主「2024无限可能」的文章，转载请附上原文出处链接及本声明。
原文链接：vue页面或者网页全屏后，modal 弹框或者下拉框无法显示_fullscreen全屏下使用el-tooltip不生效-CSDN博客

说明：遇到了这个问题，仅为了记录~

说明：

使用vue2框架和elementUI组件库

全屏代码

//  全屏切换
    toggleFullScreen() {
      const videoBox = this.$refs.app; // 获取视频盒子
      const element = videoBox;
      // const element = document.documentElement;

      if (!this.isFullScreen) {
        // 进入全屏
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
        // 更新全屏状态
        this.isFullScreen = true;
        this.showVolumeSlider = true;
      } else {
        // 退出全屏
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        // 更新全屏状态
        this.isFullScreen = false;
        clearInterval(this.time1);
        clearInterval(this.time2);
      }
    }

el-dropdown

解决方案为@visible-change="visibleDropdown"

样式结构

             <el-dropdown
                @command="changeTripleSpeed"
                :tabindex="2"
                trigger="hover"
                placement="top"
                class="filter-item"
                @visible-change="visibleDropdown"
              >
                <span class="123nnn">{{ commandName() }}</span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="item in tripleSpeedOptions"
                    :key="item.key"
                    :command="item.key"
                  >
                    <i
                      class="el-icon-check"
                      v-if="tripleSpeed === item.key"
                    ></i>
                    {{ item.display_name }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

方法

visibleDropdown() {
      // 用于解决全屏下下拉菜单不显示的问题
      this.time1 = setTimeout(() => {
        if (document.querySelector(".el-dropdown-menu")) {
          this.$refs.videoBox.appendChild(
            document.querySelector(".el-dropdown-menu")
          );
        }
      }, 100);},

el-tooltip

解决方案为 @mouseenter="toggleTooltip"触发v-model="showVolumeSlider"

样式结构

<div class="operation-right">
<!-- 音量调节 -->
              <div class="voice" v-if="showVoice">
                <el-tooltip
                  ref="tooltipRef"
                  class="voice-tooltip"
                  effect="dark"
                  content="调整音量"
                  placement="top"
                  v-model="showVolumeSlider"
                >
                  <span slot="content">
                    <el-slider
                      v-model="volume"
                      :min="0"
                      :max="100"
                      :show-tooltip="false"
                      vertical
                      height="200px"
                      @change="changeVolume"
                    ></el-slider>
                  </span>
                  <span
                    ref="voiceBtn"
                    class="iconfont voice-btn"
                    :class="{'icon-sound-on': !isMuted && volume > 0, 'icon-sound-off': isMuted || volume === 0}"
                    @mouseenter="toggleTooltip"
                    @click="toggleSound"
                  ></span>
                </el-tooltip>
              </div>
<!-- 全屏缩放 -->
              <div class="full-screen">
                <span
                  @click="toggleFullScreen"
                  class="iconfont"
                  :class="isFullScreen?'icon-fullscreen-exit':'icon-fullscreen-enter'"
                ></span>
              </div>
</div>

方法

toggleTooltip() {
      this.showVolumeSlider = !this.showVolumeSlider;
      // 用于解决全屏下音量调节不显示的问题
      this.time2 = setTimeout(() => {
        if (document.querySelector(".el-tooltip__popper")) {
          this.$refs.videoBox.appendChild(
            document.querySelector(".el-tooltip__popper")
          );
        }
      }, 100);
}