mavon-editor覆盖fixed的顶部导航栏的解决办法

最新推荐文章于 2023-12-20 01:13:38 发布
最新推荐文章于 2023-12-20 01:13:38 发布
阅读量312 收藏
点赞数 1
分类专栏： 前端 文章标签： css vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mochenxue/article/details/131504029
版权
文章描述了一个在使用mavon-editor预览组件时遇到的头部导航栏背景色改变的问题。作者尝试了三种解决方案，包括调整fixed元素的z-index值，使用!important修饰导航栏样式，以及将mavon-editor的position设为static。
摘要由CSDN通过智能技术生成

遇到的问题

今天无意间发现这个问题：

头部nav导航栏设置的是fixed属性，然后页面滑动一定距离之后，头部的导肮栏就会改变背景颜色，其余页面都是正常的，可是当我滑动关于页面的时候，就出现了上面的这个现象，我当时也是不知所措，因为这个关于页面的数据展示是使用的mavon-editor的预览的组件，所以不清楚里面的写法。然后就上网查相关的解决办法，这里我找到了三个解决办法。

解决办法一：

修改固定定位的元素的z-index的值，可能z-index的太小了

解决办法二

给导航栏的级别修改为!important

解决办法三

mavon-editor设置了position为static

效果展示

 

爱学编程的小洋~肖恩
关注
专栏目录
mavon-editor内容生成目录
wjianwei666的专栏
02-23 146
目录
mavon-editor样式失效，快速解决
欢迎来到iceseasyh的博客
02-25 2743
mavon-editor样式失效的解决办法，冲兄弟们
vue mavon-editor 导航跳转（锚点跳转）
qq_38667939的博客
04-01 986
1安装 npm install mavon-editor --save 网址：官网 html <mavon-editor v-if="zuJianWD" :editable="false" :value="zuJianWD" :subfield="false" :defaultOpen="'preview'" :toolbarsFlag="false" :scrollStyle="true"
vue中使用mavonEditor 代码高亮 修改顶部工具栏
darkCloudss的博客
12-07 4036
安装：$ npm install mavon-editor --save 在需要的组件里面引入： import { mavonEditor } from 'mavon-editor' import 'mavon-editor/dist/css/index.css' 在组件里面写入 <div class="mavonEditor"> <mavon-editor ...
问题：Mavon-editor Jquery无法监听到mavon-editor里导航栏的a标签 [已解决]
weixin_47177936的博客
10-28 482
问题 ：想要重写mavon-editor里的导航栏发现const aArr = $(".v-note-wrapper .v-note-panel .v-note-navigation-wrapper .v-note-navigation-content a").toArray();console.log(aArr) 输出是[] 空！
使用editor编辑器遇到的小问题：editor.md工具栏置顶
只剩渣了的博客
10-02 2154
问题原因： 在使用Markdown编辑器editor.md时，由于editor.md的toolbar始终保持在页面顶部，导致我在使用vue整合时，页面排版出现错乱 解决方案： 在 editormd.js 中，有下面这样一条属性：toolbarAutoFixed 该属性默认是true，即工具条始终保持置顶 所以将其置为 false 即可取消工具条置顶 // 这条属性就是控制工具栏是否置顶，tru...
mavon-editor 使用教程 - 副本.md
最新发布
04-28
mavon-editor 使用教程 - 副本
mavoneditor 显示html,mavon-editor 存储md文件以及md文件解析成html文件
weixin_30737431的博客
06-23 698
一、md文件的存储因为是vue-cli项目，所以使用的是mavonEditor.使用方法：首先安装：npm install mavon-editor --save然后在相应的组件里引用：//引入import {mavonEditor} from 'mavon-editor'import 'mavon-editor/dist/css/index.css'//标签使用，注意这里是mavon-edit...
关于mavon-editor中iframe 的使用 和插入视频、音频的记录
levi2469的博客
01-17 3360
一、问题 我想将视频、音频运用外链的形式iframe插入，节约服务器资源 插入后mavon-editor预览区不显示，没有解析出来 二、 解决 搞了三四天，在mavon-editor官方文档中找到了props name 名称 type 类型 xssOptions Object {}，xss规则配置, 默认开启，设置false可以关闭，开启后会对HTML标签进行过滤，默认过滤所有HTML标签属性，建议按需配置白名单减少被攻击的可能。 自定义规则参考: https://jsxss.com/
记一次使用mavon-editor编辑器的使用过程，添加自己的功能
pw321123的博客
10-29 2535
mavon-editor编辑器使用： 导入： import mavonEditor from 'mavon-editor'; import 'mavon-editor/dist/css/index.css' Vue.use(mavonEditor); 使用：slot="left-toolbar-before" 插槽是在左边工具条前插入html；当然还有slot="left-toolbar-after"在左边工具条后插入html；slot="right-toolbar-before"在右边工具条..
mavonEditor基于vue的markdown编辑器
08-10
mavonEditor：基于 Vue 的 Markdown 编辑器，支持所见即所得编辑模式、阅读模式等
mavonEditor 导航目录点击锚点定位功能只有在全屏编辑模式下才有效的问题
weixin_42365757的博客
07-27 713
mavonEditor 解决导航目录点击锚点定位功能只有在全屏编辑模式下才有效的问题
解决mavon-editor导航锚点不跳转
weixin_41171651的博客
10-08 944
对于本问题真的是研究了非常非常久!!! 解决方法一 给mavon-editor加一个超级高的高度。虽然能实现跳转，但是越往下跳转得就越不准确。 <mavon-editor style="height:90000px" v-model="context" :toolbars="toolbars" :defaultOpen="'preview'" :editable="false" :subfield="false" @
mavon-editor使用(Element)
卉卉的博客
03-08 418
【代码】mavon-editor使用(Element)
设置提示框位置随鼠标移动，并解决提示框显示不全的问题
weixin_43258184的博客
02-08 636
https://www.cnblogs.com/zhilu/p/14047105.html tooltip: { trigger: 'axis', // position: ['50%', '50%'], position: function(point, params, dom, rect, size) { var x = 0; var y = 0;
mavon-editor 解析居中对齐、左右对齐、角标、插注问题的完整解决方案。
weixin_44907888的博客
06-26 1294
mavon-editor 解析居中对齐、左右对齐、角标、插注问题的完整解决方案。
vue中使用markdown并根据markdown标题标签生成侧导航
sunqinshan的博客
12-20 1057
vue中使用markdown并根据markdown标题标签生成侧导航
mavonEditor 修改预览背景颜色、去除边框和阴影
小道仙的后宫
08-25 4509
mavonEditor 默认背景是灰色，这可能在展示给用户的时候不太友好。 mavonEditor 的官方文档写的很清楚，所以用法跟简单。 这里说一下去除的是预览模式下的背景和边框 1、去除背景阴影 :boxShadow="false" 2、去除背景色，和边框 2-1：我这里是用nuxt做演示，思路是写个全局css覆盖它的样式就好了 ...
弹框套弹框里面的弹框有遮罩层的解决办法
weixin_45865992的博客
03-28 408
append-to-body 在里面的dialog加这个。
vue markdown-editor mavon-editor
08-20
vue markdown-editor mavon-editor是一个基于Vue.js的markdown编辑器组件，它提供了一种简单而功能强大的方式来编辑和预览markdown文本。它允许用户输入markdown格式的文本，并且实时地在编辑器中预览生成的HTML内容。 mavon-editor具有许多有用的功能，比如语法高亮、实时预览、代码块渲染、表格和任务列表的支持、自定义样式等。它还支持插入图片、链接和其他媒体内容，使得编辑markdown文本更加方便和灵活。 此外，mavon-editor还提供了许多配置选项，可以自定义编辑器的外观和行为。用户可以选择不同的主题、字体和颜色方案，还可以设置快捷键和标签样式，以满足自己的需求。 使用vue markdown-editor mavon-editor可以帮助开发者快速搭建一个简洁美观、功能强大的markdown编辑器，并且它具有良好的扩展性和可定制性。无论是用于个人博客、团队协作还是其他项目中，mavon-editor都是一个不错的选择。 总体而言，vue markdown-editor mavon-editor是一个强大且易于使用的markdown编辑器组件，它为用户提供了一种高效的方式来编辑和展示markdown文本，并且具有丰富的功能和灵活的配置选项。无论你是新手还是有经验的开发者，使用mavon-editor都能满足你的需求，帮助你更好地编写和管理markdown文档。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值