【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留

简介: 【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留

问题一:tinymce弹窗被遮挡

问题截图

解决方法

注意要写在 <style></style> 中,我当时没注意,写在了 <style scoped></style> 中,死活没反应。

<style>
  /* 在el-dialog中tinymce z-index 被太小而被遮挡时要加这两句 */
  .tox-tinymce-aux{z-index:99999 !important;}
  .tinymce.ui.FloatPanel{z-Index: 99;}
</style>

问题二:tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留

问题截图

解决方法

利用属性 :destroy-on-close="true" 要求对话组件关闭后销毁其中的元素

<el-dialog :destroy-on-close="true">
...
</el-dialog>

参考文章:Element-UI的dialog对话组件内的tinymce6弹窗被遮挡的解决办法及其它相关注意事项

下班~

目录
相关文章
|
1天前
|
JavaScript
VUE——三元表达式动态渲染样式
VUE——三元表达式动态渲染样式
4 0
|
1天前
|
JavaScript 前端开发 Shell
实现在vue中自定义主题色彩切换
实现在vue中自定义主题色彩切换
8 0
|
1天前
|
JavaScript
VUE——配置本地运行指定不同环境
VUE——配置本地运行指定不同环境
5 0
|
12月前
|
JavaScript
Vue的非父子组件之间传值
全局事件总线 一种组件间通信的方式,适用于任意组件间通信
|
11月前
|
缓存 JavaScript 前端开发
Vue Props、Slot、v-once、非父子组件间的传值....
Vue Props、Slot、v-once、非父子组件间的传值....
65 0
|
12月前
|
JavaScript
Vue中父子组件传值
先在⽗组件中给⼦组件的⾃定义属性绑定⼀个⽗组件的变量
|
12月前
|
JavaScript
vue 组件传值
vue 组件传值
64 0
|
12月前
|
JavaScript
vue父子组件传值
vue父子组件传值
|
JavaScript
vue兄弟组件传值 方便快捷
vue兄弟组件传值 方便快捷
|
JavaScript
Vue父子组件传值(porvide+inject实现组件通信)
如果我们需要把父组件的值传递给子组件,而且子组件可能存在层层嵌套,那么就可以使用provide+inject的方法来实现组件之间的通信
172 0
Vue父子组件传值(porvide+inject实现组件通信)