首页 > 其他分享 >解决element-plus中的el-dialog弹框覆盖editor富文本组件下拉框的问题

解决element-plus中的el-dialog弹框覆盖editor富文本组件下拉框的问题

时间:2024-08-23 15:52:14浏览次数:9  
标签:el selection const dialogFormVisible tinymceNum dialog 弹框 ref 下拉框

<template>
  <el-dialog :visible.sync="dialogFormVisible">
    <!-- dialog内容 -->
    <button @click="dialog">打开富文本编辑器</button>
    <tinymce-editor ref="tinyEditor" />
  </el-dialog>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const dialogFormVisible = ref(false);
    const tinymceNum = ref(0);

    const dialog = () => {
      // Dialog显示
      dialogFormVisible.value = true;

      // 获取tinymce菜单
      const selection = document.getElementsByClassName("tox-tinymce-aux");

      // 富文本未加载完成
      if (selection.length === 0 && tinymceNum.value <= 10) {
        tinymceNum.value += 1;
        setTimeout(() => {
          dialog(); // 重新调用自身
          console.log("图层调整失败");
        }, 1000);
      } else {
        tinymceNum.value = 0;
        if (selection.length > 0) {
          selection[0].style.zIndex = 4000;
          console.log("图层调整成功");
        }
      }
    };

    return {
      dialogFormVisible,
      tinymceNum,
      dialog,
    };
  },
};
</script>

<style>
/* 可以在这里添加自定义样式 */
</style>

标签:el,selection,const,dialogFormVisible,tinymceNum,dialog,弹框,ref,下拉框
From: https://blog.csdn.net/2301_76526064/article/details/141467922

相关文章

  • 初学 Delphi 嵌入汇编[1] - 汇编语言与机器语言
    非科班出身,现在才接触汇编,惭愧呀,好好学!主选课本是清华大学王爽老师的《汇编语言》.推荐 王爽老师的汇编网汇编语言之前是机器语言.机器语言是机器指令的集合,机器指令是一系列二进制数字,计算机将之转换为一系列高低电平,而实现运算.在PC机上运行机器指令的是CPU;......
  • 初学 Delphi 嵌入汇编[2] - 汇编语言关键字
    汇编语言不区分大小写.关键字用途AH AL AND AX BH BL BP BX BYTE CH CL CS CX DH DI DL DS DWORD DX EAX EBP EBX ECX EDI EDX EIP ES ESI ESP FS ......
  • 初学 Delphi 嵌入汇编[3] - 第一个 Delphi 与汇编的例子
    前面知道了一个汇编的赋值指令(MOV),再了解一个加法指令(ADD),就可以做个例子了.譬如:ADDAX,BX;这相当于Delphi中的AX:=AX+BX;另外提前来个列表-Delphi可以用汇编管理以下寄存器:32位寄存器:EAXEBXECXEDXESPEBPESIEDI16位寄存器:AXBXCXDXSPBPSID......
  • Spherical Voxelization
    SphericalVoxelization标签:voxelizationAI摘要:文档介绍了球面体素化的过程,包括重要的类和方法,如ConvertToSphericalVoxel和spherical_voxel_optimized,详细解释了参数及其作用。球面体素化通过将点云转换为球面坐标系,利用自适应采样权重来平衡不同纬度区域的点密度,从而有......
  • 使用 reloadNuxtApp 强制刷新 Nuxt 应用
    title:使用reloadNuxtApp强制刷新Nuxt应用date:2024/8/22updated:2024/8/22author:cmdragonexcerpt:reloadNuxtApp是一个强大的工具,用于在Nuxt3应用中强制刷新页面。通过不同的选项,你可以控制刷新行为、指定路径、保存状态等。categories:前端开发tags:......
  • laravel发送邮件的使用方法?有哪些技巧?
    laravel发送邮件怎么实现?如何使用Laravel发送邮件?Laravel,作为一个流行的PHP框架,提供了强大且灵活的邮件发送功能,使得开发者可以轻松地集成邮件服务到他们的应用中。AokSend将详细介绍如何在Laravel中使用laravel发送邮件功能。laravel发送邮件:配置服务这通常涉及到编辑.env......
  • 轻松上手:Docker部署Elasticsearch,高效构建搜索引擎环境
    我在前一段时间写了一个ES简介,博主建议大家先看完简介再来安装ES,那篇博文是:深入理解Elasticsearch:让搜索性能飞起来!-CSDN博客服务器开放9200和9300端口号:1.打开目录:cd/usr/local/docker/2.创建es目录:mkdires3.打开es目录:cdes/4.下载镜像:我在这里声明一下......
  • Oseltamivir acid (GS 4071) 是 Oseltamivir phosphate 的活性代谢物 |MedChemExpress
    中文名:奥斯他伟酸CAS:187227-45-8品牌:MedChemExpress(MCE)存储条件:4°C,storedundernitrogen生物活性:Oseltamiviracid(GS4071)是Oseltamivirphosphate的活性代谢物,是一种具有口服生物利用度的强效选择性流感病毒神经氨酸酶抑制剂(IC50=2nM) 对甲型和乙型流......
  • 【论文解读】Macroblock Level Rate Control for Low Delay H.264/AVC based Video Co
    级别:IEEE时间:2015作者:MinGao等机构:哈尔滨工业大学下载:MacroblockLevelRateControlforLowDelayH.264/AVCbasedVideoCommunication摘要算法目的:提出了一种针对低延迟H.264/AVC视频通信的宏块(MB)级别速率控制算法。算法基础:基于ρ域速率模型,该模型涉......
  • usbserver某某达频繁掉狗问题排查(针对加密狗类型Elite5 3.X)
    近期反复收到客户反映加密狗频繁掉狗问题,这个掉狗并不是在盛讯美恒客户端usbovernetwork上频繁掉,在客户端显示稳如老狗,但是在工程软件使用端总是犹如跳梁小丑跳出未检测到加密狗,让人甚是苦恼!下面给出一个案例,提供大家参考,定位一下问题本着有病看医生的原则,咱们需要用自带的加......