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

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

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

说明:遇到了这个问题,仅为了记录~

 全屏代码

//  全屏切换
    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);
}

  • 5
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用Vue指令`v-show`或者`v-if`来控制`el-dropdown-menu`的显示与隐藏。 使用`v-show`指令,示例代码如下: ``` <el-dropdown> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu v-show="showDropdown"> <el-dropdown-item>菜单项一</el-dropdown-item> <el-dropdown-item>菜单项二</el-dropdown-item> <el-dropdown-item>菜单项三</el-dropdown-item> </el-dropdown-menu> </el-dropdown> ``` 在Vue组件中定义`showDropdown`变量,来控制`el-dropdown-menu`的显示与隐藏: ``` <template> <el-dropdown> <span class="el-dropdown-link" @click="showDropdown = !showDropdown"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu v-show="showDropdown"> <el-dropdown-item>菜单项一</el-dropdown-item> <el-dropdown-item>菜单项二</el-dropdown-item> <el-dropdown-item>菜单项三</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </template> <script> export default { data() { return { showDropdown: false }; } }; </script> ``` 使用`v-if`指令的示例代码如下: ``` <el-dropdown> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu v-if="showDropdown"> <el-dropdown-item>菜单项一</el-dropdown-item> <el-dropdown-item>菜单项二</el-dropdown-item> <el-dropdown-item>菜单项三</el-dropdown-item> </el-dropdown-menu> </el-dropdown> ``` 在Vue组件中定义`showDropdown`变量,来控制`el-dropdown-menu`的显示与隐藏: ``` <template> <el-dropdown> <span class="el-dropdown-link" @click="showDropdown = !showDropdown"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu v-if="showDropdown"> <el-dropdown-item>菜单项一</el-dropdown-item> <el-dropdown-item>菜单项二</el-dropdown-item> <el-dropdown-item>菜单项三</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </template> <script> export default { data() { return { showDropdown: false }; } }; </script> ``` 以上是两种常用的控制`el-dropdown-menu`显示与隐藏的方法,具体使用哪种方法,可以根据实际需求来选择。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值