:::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
:::