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

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

欢迎到我的个人博查看原文

【问题描述】

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

而最终上线的实际效果如下：

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

【问题解决】

首先想到的是通过修改CSS样式解决这个问题，但是水平有限，只想到了一个治标不治本（严格来说也不治标😓），还望大佬指点一下。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中就行了。那这样一来，点击图像之后进行的操作逻辑就清楚了。

具体代码如下：

...
<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);
},
...

最终效果：

【总结】

1. 这一个小问题花了我半天的时间，其实用不着这么久，归根结底是对CSS、JavaScript不熟悉。
2. 对 Vue 父子组件间传递函数，尤其是传递参数为事件的函数不熟悉。
3. 这种实现功能较少，还可以考虑增加缩略图，前一张，后一张的功能。

欢迎关注我的个人公众号： Marigold