0
点赞
收藏
分享

微信扫一扫

vue实现刷新页面随机切换背景图【适用于登陆界面】


🚀作者简介

笔名:水香木鱼

主页:​​水香木鱼的博客​​

专栏:​​后台管理系统​​

能量:🔋容量已消耗1%,自动充电中…

笺言:用博客记录每一次成长,书写五彩人生。

📒技术聊斋

(1)展示层

⚠️ 一定要配置样式 ​​background-size: cover;​​​ ​​ background-position: center 0;​​ 图片自适应

<template>
<div class="randomBackground" :style="randomBackground">
<!--以下放置内容-->
</div>
</template>

<style scoped>
.randomBackground {
width: 100%;
background-size: cover;
background-position: center 0;
}

(2)业务层

在​​computed​​​ 生命周期函数中使用,将​​randomBackground​​​ 绑定到​​:style​​ 动态样式中

<script>
export default {
computed: {
randomBackground() {
// 计算body的可用高度
let cHeight =
window.outerHeight - (window.outerHeight - window.innerHeight);
// 存放要更换的图片
let imgs = [
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pcauto.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fautohm%2F2202%2F18%2Fc36%2F298029185_1645174561361_830x600.jpg&refer=http%3A%2F%2Fimg.pcauto.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665417006&t=2d445766214861d9589f1957cab913d8",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F7a%2F4e%2F84%2F7a4e84857a78870c19c639ef2b71078d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665417776&t=af1aeeaeaf4b173d1f5fefc4a205ce8a",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fd9176c4b44688066bc9bf40a2e8306202711f1cb3f17c-0gVSWg_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665417776&t=c80a2ab57753cbb02382236ee4939f52",
];
let imgName = imgs[Math.floor(Math.random() * 3)]; //进行计算随机
let style =
"background-image:url('" +
imgName +
"'); background-repeat: round; height:" +
cHeight +
"px;";
return style;
},
},
};
</script>

(3)所有代码

cv 可用

<template>
<div class="randomBackground" :style="randomBackground"></div>
</template>
<style scoped>.randomBackground {
width: 100%;
background-size: cover;
background-position: center 0;
}</style>
<script>export default {
computed: {
randomBackground() {
// 计算body的可用高度
let cHeight =
window.outerHeight - (window.outerHeight - window.innerHeight);
// 存放要更换的图片
let imgs = [
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pcauto.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fautohm%2F2202%2F18%2Fc36%2F298029185_1645174561361_830x600.jpg&refer=http%3A%2F%2Fimg.pcauto.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665417006&t=2d445766214861d9589f1957cab913d8",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F7a%2F4e%2F84%2F7a4e84857a78870c19c639ef2b71078d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665417776&t=af1aeeaeaf4b173d1f5fefc4a205ce8a",
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fd9176c4b44688066bc9bf40a2e8306202711f1cb3f17c-0gVSWg_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665417776&t=c80a2ab57753cbb02382236ee4939f52",
];
let imgName = imgs[Math.floor(Math.random() * 3)]; //进行计算随机
let style =
"background-image:url('" +
imgName +
"'); background-repeat: round; height:" +
cHeight +
"px;";
return style;
},
},
};</script>



举报

相关推荐

0 条评论