博客维护记录之图片预览嵌入位置问题

Marigold

发布于 2023-08-24 10:14:44

1680

发布于 2023-08-24 10:14:44

文章被收录于专栏：MarigoldMarigold

博客维护记录之图片预览嵌入位置问题

:::hljs-center

:::

问题描述

在文章阅读界面，点击文章中的图片，会对图片进行预览，预期效果如下： :::hljs-center

::: 而最终上线的实际效果如下： :::hljs-center

::: :::hljs-center

::: 可以看到，图片在父级div进行了水平和垂直居中展示。

问题解决

首先想到的是通过修改CSS样式解决这个问题，但是水平有限，只想到了一个治标不治本（严格来说也不治标:sweat:），还望大佬指点一下。v-note-img-wrapper的原始样式属性如下：

.v-note-img-wrapper {
    position: fixed;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 1600;
    -webkit-transition: all 0.1s linear 0s;
    transition: all 0.1s linear 0s;
}

我一直解决不掉的问题是这个v-note-img-wrapper的div，始终跟随父级div进行滚动。

第二种方法就是通过JavaScript操作DOM元素，将v-note-img-wrapper这个div放到body中就行了。那这样一来，点击图像之后进行的操作逻辑就清楚了。 :::hljs-center

:::

具体代码如下：

...
<mavon-editor
    v-model="work.content"
    :subfield="false"
    :toolbarsFlag="false"
    defaultOpen="preview"
    ref="work"
    :editable="false"
    codeStyle="darcula"
    :imageClick="imageClick"
                />
...
...
imageClick(e) {
    // 获取所点击图像的url
    let url = e.src;
    // 创建img标签
    let imgTag = document.createElement("img");
    imgTag.src = url;
    // 图像屏幕自适应
    if (e.width * 1.5 < window.innerWidth) {
        if (e.height * 1.5 < window.innerHeight) {
            imgTag.style.width =
                e.width * 1.5 < window.innerWidth
              ? e.width * 1.5 + "px"
              : window.innerWidth * 0.95 + "px";
        } else {
            imgTag.style.height = window.innerHeight * 0.95 + "px";
        }
      } else {
          imgTag.style.height = window.innerHeight * 0.95 + "px";
      }
    // 创建div标签
    let wrap = document.createElement("div");
    // 设置标签属性
    wrap.classList.add("v-note-img-wrapper");
    // 设置鼠标样式为缩小
    wrap.style.cursor = "zoom-out";
    // 将img标签加入div子节点中
    wrap.appendChild(imgTag);
    // 设置点击监听函数用于关闭预览
    wrap.addEventListener("click", function () {
        wrap.remove();
    });
    // 获取body的第一个子节点
    let first = document.body.firstChild; 
    // 将div插入
    document.body.insertBefore(wrap, first);
},
...

最终效果： :::hljs-center