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

Posted 2022-09-20 水香木鱼

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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;

</style>

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