解决使用 Eruda 绑定 dom 未在指定位置显示问题

  • 解决使用 Eruda 绑定 dom 未在指定位置显示问题已关闭评论
  • 28 次浏览
  • A+
所属分类:Web前端
摘要

开发项目中,使用到 Eruda 打印控制台信息显示
文档:https://github.com/liriliri/eruda


前言

开发项目中,使用到 Eruda 打印控制台信息显示
文档:https://github.com/liriliri/eruda

安装 Eruda

npm install eruda --save 

引入

import eruda from "eruda"; 

常使用方法

显示

eruda.show(); 

隐藏

eruda.hide(); 

销毁

eruda.destroy(); 

绑定 dom

未绑定的页面布局是这样子的
解决使用 Eruda 绑定 dom 未在指定位置显示问题

eruda 绑定dom后,显示变成了这样子
解决使用 Eruda 绑定 dom 未在指定位置显示问题

差不多把屏幕给占满了,看控制台里的元素设置发现这个 eruda 的高度设置为了 80% (也有可能为 50% 测试发现过)
解决使用 Eruda 绑定 dom 未在指定位置显示问题
右下角的 图标 就是显示和隐藏 eruda 的
解决使用 Eruda 绑定 dom 未在指定位置显示问题
绑定dom的代码

<template>   <div class="main">     <div>       <h1 style="text-align: center">         在包裹的边框里显示 Erdua,边框:1400*500       </h1>       <div class="content">         <div ref="erudaBox"></div>       </div>     </div>   </div> </template> <script> import eruda from "eruda"; export default {   mounted() {     // 初始化     eruda.init({       container: this.$refs.erudaBox,       tool: ["console", "elements"],     });      // 显示     eruda.show();   }, }; </script> 

container 已经绑定了 erudaBox 但是运行后没有达到预期的效果。

解决未在指定位置显示

想在红色边框里显示,打开控制台元素查看可以看到,是 eruda 的外部设置了 position:fixed 固定定位。
解决使用 Eruda 绑定 dom 未在指定位置显示问题

根据这个我分别把 position 改为 relative 和 absolute 都可以实现想要的结果,只是实现方式有些不同。

注意:涉及到修改 eruda 里内部的样式的,都要把下面这个设置为 false,这个其实是从官方代码里看到有使用到,也拿来用了。发现去掉这个,不管怎么修改 eruda 里的样式或者类名都不生效,所以要加上。

 useShadowDom: false 

方法一 position:relative

把 .eruda-container 这个类的 position:fixed; 修改为 position:relative;
在 style 样式里:

// 重写 position .eruda-container {   position: relative; } 

实现代码

<template>   <div class="main">     <div>       <h1 style="text-align: center">         在包裹的边框里显示 Eruda,边框:1400*500       </h1>       <div class="content">         <div ref="erudaBox"></div>       </div>     </div>   </div> </template> <script> import eruda from "eruda"; export default {   mounted() {     // 初始化     eruda.init({       container: this.$refs.erudaBox,       tool: ["console", "elements"],       useShadowDom: false, // 把这个设置为 false, .eruda-container 样式 position 重写     });     // 显示     eruda.show();   }, }; </script>  <style scoped> // 重写 position .eruda-container {   position: relative; } .main {   width: 100%;   height: 100vh;   display: flex;   align-items: center;   justify-content: center; }  .content {   width: 1400px;   height: 400px;   border: 5px solid red; } </style> 

方法二 position:absolute

子级 eruda 使用了 position:absolute 父级 edruaBox 就要设置为 position:relative (子绝父相)

<div class="content" style="position: relative">   <div ref="erudaBox"></div> </div> 

实现代码

<template>   <div class="main">     <div>       <h1 style="text-align: center">         在包裹的边框里显示 Eruda,边框:1400*500       </h1>       <div class="content" style="position: relative">         <div ref="erudaBox"></div>       </div>     </div>   </div> </template> <script> import eruda from "eruda"; export default {   mounted() {     // 初始化     eruda.init({       container: this.$refs.erudaBox,       tool: ["console", "elements"],       useShadowDom: false, // 把这个设置为 false, .eruda-container 样式 position 重写     });      // 显示     eruda.show();   }, }; </script>  <style scoped> .eruda-container {   position: absolute; } .main {   width: 100%;   height: 100vh;   display: flex;   align-items: center;   justify-content: center; }  .content {   width: 1400px;   height: 400px;   border: 5px solid red; } </style> 

最终实现效果
解决使用 Eruda 绑定 dom 未在指定位置显示问题

其他设置

宽高占满容器

实现效果来看 eruda 没有占满容器,去控制台看 eruda 的高度只有 50%(或者80%)
解决使用 Eruda 绑定 dom 未在指定位置显示问题
在 eruda.show() 方法前加上这段代码,修改它的高度继承父级容器高度,就可以了。

// 设置占满容器 let el = eruda._$el[0].childNodes[1]; if (el) {   // 日志容器继承父元素高度   el.style.height = "inherit"; } 

隐藏显示和隐藏按钮

解决使用 Eruda 绑定 dom 未在指定位置显示问题
这个图标就是对 eruda 进行显示和隐藏的,如果想要不显示也可以修改这个图标的样式:

// 默认图标不显示 let entrytn = eruda._entryBtn._$el[0] entrytn.style.display = 'none' 

合并后代码

mounted() {   // 初始化   eruda.init({     container: this.$refs.erudaBox,     tool: ["console", "elements"],     useShadowDom: false, // 把这个设置为 false, .eruda-container 样式 position 重写   });    // 设置占满容器   let el = eruda._$el[0].childNodes[1];   if (el) {     // 日志容器继承父元素高度     el.style.height = "inherit";   }    // 默认图标不显示   let entrytn = eruda._entryBtn._$el[0];   entrytn.style.display = "none";    // 显示日志   eruda.show(); } 

最终实现效果,可以实现根据父级容器伸缩都可以
解决使用 Eruda 绑定 dom 未在指定位置显示问题