Image preview embedding location of blog maintenance record

The embedding position of image preview in blog maintenance records

Welcome to my personal blog to check the original

Welcome to follow my personal public number ： Marigold

【 Problem description 】

In the article reading interface , Click on the picture in the article , Preview the picture , The expected results are as follows ：

The actual effect of the final launch is as follows ：

You can see , Picture at parent div Horizontal and vertical center display .

【 Problem solving 】

The first thought is to modify CSS Style solves this problem , But the level is limited , I only thought of a solution to the symptoms rather than the root cause （ Strictly speaking, it does not cure the symptoms ）, I hope the boss can give me some advice .v-note-img-wrapper The original style attributes of are as follows ：

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

The problem I have been unable to solve is this v-note-img-wrapper Of div, Always follow the parent div Scroll .

The second way is through JavaScript operation DOM Elements , take v-note-img-wrapper This div Put it in body That's fine . That way , The operation logic after clicking the image is clear .

The specific code is as follows ：

...
<mavon-editor
	v-model="work.content"
	:subfield="false"
	:toolbarsFlag="false"
	defaultOpen="preview"
	ref="work"
	:editable="false"
	codeStyle="darcula"
	:imageClick="imageClick"
                />
...
...
imageClick(e) {
    
    //  Get the clicked image url
    let url = e.src;
    //  establish img label 
    let imgTag = document.createElement("img");
    imgTag.src = url;
    //  Image screen adaptation 
	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";
      }
    //  establish div label 
    let wrap = document.createElement("div");
    //  Set tag properties 
    wrap.classList.add("v-note-img-wrapper");
    //  Set the mouse style to zoom out 
    wrap.style.cursor = "zoom-out";
    //  take img Label to join div In the child node 
    wrap.appendChild(imgTag);
    //  Set click listening function to close preview 
    wrap.addEventListener("click", function () {
    
		wrap.remove();
	});
    //  obtain body The first child node of 
    let first = document.body.firstChild; 
    //  take div Insert 
    document.body.insertBefore(wrap, first);
},
...

Final effect ：

【 summary 】

1. This little problem took me half a day , In fact, it won't take so long , In the final analysis, yes CSS、JavaScript Not familiar with .
2. Yes Vue Transfer functions between parent and child components , In particular, functions that pass parameters as events are unfamiliar .
3. This implementation has fewer functions , You can also consider adding thumbnails , The previous one , The function of the latter one .