Change the display of the hover window according to the window size and refresh the page automatically

If a page has a floating QR code, when the page window shrinks, the QR code will cover the content of the page, which can be determined by the size of the browser:

1. When the page width is large enough, the full display of the two-dimensional code,

2. When the page window is zoomed out, you need to display a button and click the button to display the QR code.

To refresh the page, you need to add onresize to listen for changes to the window:

Window.onresize = function () { //listener window Change
Window.location.reload (); //compatible with chrome Safari
Window.location.href = ""; //compatible with Firefox
}

As for the display of the above two-dimensional code, it is very convenient to use V-show in Vue:

Html:

<!--buttons--
<div class= "qr-btn" v-show= "qrbtn" @click = "SHOWQR" ></div>
<!--QR Code --
<div class= "Qr-code" v-show= "QRCode" >
<ul>
<li><span> scan download Silver Ruyi app</span></li>
<li><span> scanning concern about shares on Silver public number </span></li>
</ul>
</div>

Css:

. qr-btn {
width:30px;
height:30px;
Background-color: #064491;
Display:block;
Position:absolute;
left:20px;
bottom:50px;
border-radius:50%;
box-shadow:2px 2px 8px rgba (0, 0, 0,. 6);
Cursor:pointer
}

. qr-btn>img {
width:20px;
height:20px;
position:relative;
top:5px;
Display:block;
padding:0 Auto;
margin:0 Auto;
}

. qr-code {
position:fixed;
bottom:10%;
left:1%;
Background-color:aliceblue;
font-size:12px;
Text-align:center;
}

. qr-code>ul>li {
padding:. 8em;
}

. qr-code>ul>li:last-child {
margin:0 0 1em 0;
}

. qr-code>ul>li>img {
width:130px;
height:130px;
Display:block;
}

Vue:

Export Default {

Data: () = ({

Qrcode:false,
Qrbtn:false

})

},

methods:{

SHOWQR () {
if (This.qrcode = = False) {
This.qrcode = true;
} else {
This.qrcode = false;
}
}

},

Ready () {

Let w = window.innerwidth | | Document.documentElement.clientWidth | | Document.body.clientWidth;
Let H = window.innerheight | | Document.documentElement.clientHeight | | Document.body.clientHeight;

if (W < 1330) { //depending on screen width, whether to display a QR code or a button
This.qrcode = false;
THIS.QRBTN = true;
} else {
This.qrcode = true;
This.qrbtn = false;
}

Window.onresize = function () { //listener window Change
Window.location.reload (); //compatible with chrome Safari
Window.location.href = ""; //compatible with Firefox
}

}

Change the display of the hover window according to the window size and refresh the page automatically