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

🚀作者简介

笔名：水香木鱼

主页：水香木鱼的博客

专栏：后台管理系统

能量：🔋容量已消耗1%，自动充电中…

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

---

📒技术聊斋

（1）展示层

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

<template>
  <div class="randomBackground" :style="randomBackground">
    
  div>
template>
1
2
3
4
5

1
2
3
4
5
6
7

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

---

📓精品推荐

🔋盘点，这些年你知道的鼠标移入显示小手图标的css的cursor 属性，你还记得吗？

🔋前端vue实现登录前，记住密码功能案例【存储cookies与base64加密版】

🔋前端vue实现注册功能与正则校验规则

🔋前端element组件库中el-input密码右侧添加小眼睛切换状态

🔋前端vue倒计时组件【模块化开发】

---

木鱼谢语：感谢各位技术大牛们的点赞👍收藏🌟，每一期都会为大家带来快速适用于业务的文章，让大家做到cv即可。