vue - 设置全局html背景

最新推荐文章于 2024-06-10 15:05:54 发布

weixin_30608503

最新推荐文章于 2024-06-10 15:05:54 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mmzuo-798/p/10882789.html

博客围绕组件中body背景设置需求展开。有些组件需全局设置body背景，有些在组件内设置即可。解决思路为：全局设置可在html或body中选其一；进入组件用beforeRouteEnter设置body背景，离开组件前用beforeRouteLeave清除背景，并附上相关代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

　　有时候有些组件需要全局设置body背景，有些不需要在组件中设置就行了

解决思路

　　1. 全局设置可以是html，body，这里大家可以试一下，这两个只要其中一个设置了background,另一个的背景就会失效。

　　2. 我们需要进入组件的时候使用钩子函数beforeRouteEnter,设置body背景；

　　3. 离开组件之前beforeRouteLeave 清楚到body背景；

下面附上相应代码：

export default {

　　name: 'login',

　　data() {

　　　　return {

　　　　　　bgUrl: require("@/assets/images/home/bg_regLogin.png"),

　　　　}

　　methods: {

　　beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当钩子执行前，组件实例还没被创建
    next(vm => {
      document.querySelector('html').style.cssText = `
        background: url(${vm.bgUrl}) center no-repeat;
        background-size: cover;
        background-attachment: fixed;
      `
    })
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    document.querySelector('html').style.cssText = `background: #f4f6f9;`
    next()
  },
}