vuepress 动态更换壁纸方案

vuepress 动态更换壁纸方案

最后修改时间:2 months ago

直接贴代码啦。

在合适位置插入

mounted() {
  this.randomWallpaper(); // 首次进入触发
  this.$router.afterEach(() => {
    this.randomWallpaper(); // 切换路由触发
  });
},
methods: {
  randomWallpaper() {
    // 壁纸数组,请使用实际图片名称
    var wallpaper = [
      "girlwithNs.jpg",
      "catgirl.jpg",
      "catgirl2.jpg",
    ];
    let randomCount = Math.floor(Math.random() * wallpaper.length);
    const style = document.body.style;
    // 为 body 设置样式,请使用实际图片路径
    style.setProperty(
      "background-image",
      `url('/wallpaper/${wallpaper[randomCount]}')`
    );
  },
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

可以看到,这跟本站更换任意配色的组件是一个套路~

扩展阅读:vuepress/vue动态更换配色方案

- 全文完 -

留下一条留言?
默认颜色

主题颜色

标准颜色

更多颜色...