H5W3
当前位置:H5W3 > 其他技术问题 > 正文

Vue 各组件为body设置css样式的问题

1.需求:不同组件的body,背景色不一样。

2.参考的解决方案:

<script>
export default {
  //...前面的省略
  //通过两个钩子函数来添加移除class改变颜色
  beforeCreate: function() {
      document.getElementsByTagName("body")[0].className="add_bg";
  },
  beforeDestroy: function() {
      document.body.removeAttribute("class","add_bg");
  }
}
</script>
<style>
.add_bg{
    background: #f0f0f0;
}
</style>

3.问题:
通过 <router-link>切换页面的时候,进入页面并不会执行上述操作,但是点击浏览器的刷新却会执行。是因为钩子函数选错了吗?

回答:

钩子函数选择错误,解决方法:

mounted: function() {
    document.getElementsByTagName("body")[0].className="add_bg"; 
}

回答:

是不是设置了keepalive 那样的话需要在activated也写上处理程序

回答:

有一个办法是 vuex,其实不用设置是body,设置 id="app"的就可以。
app.vue中computed一个变量比如叫 color,这个变量存储的是不同的页面应该显示的背景色,
然后<div id="app" :style={background:color}></div>,即给他绑定一个style,每次路由跳转时,提交commit去修改这个state,即可实现效果。

回答:

可以在路由的 meta 里面为每一个路由设置不同的背景色,在 route.beforEach遍历内部为 body 更换背景色

回答:

控制组件外部元素(例如#app body)的样式的实践:
例如, 我要控制不同路由页面的#apppaddingBottom,
如果要设置默认值的话,
首先, 在App.vue文件下设置paddingBottom, 假设为70px, 则所有页面都会应用到这一样式, 是为默认值
其次, 如果想在不同页面设置特殊样式值, 例如在某页面下要设置paddingBottom为40px, 则这样做

beforeCreate() {
  // 页面创建时设置
  document.querySelector('#app').style.paddingBottom = '40px';
},
beforeDestroy() {
  // 页面退出时设置回默认, 如果无这一步的话, 上面修改的样式40px会影响到所有页面
  document.querySelector('#app').style.paddingBottom = '70px';
}

本文地址:H5W3 » Vue 各组件为body设置css样式的问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址