vue组件页面怎样设置背景颜色?

当前组件页面是/test页面 我想给这个整个页面设置背景颜色 可是发现设置不了 这是为什么?

{
      path: '/test',
      name: 'Test',
      component: Test
}
<template>
   <div class="txt">
       <span>aaa</span>
   </div>
</template>

<script>
export default {
  name: 'Test',
 }
</script>

<style scoped>
body{width: 100%;height: 100%;position: relative;background-color: #ccc}
</style>

回答:

注意这里的scoped

<style scoped>
</style>

上述scoped表示此CSS作用范围,只对当前域有效,你这里的html节点没有body,当然就不生效了。

可以参考这个菜鸟教程style scoped

如果一定需要修改body的样式。推荐在根节点所在目录添加样式,或在项目入口index.jsimport main.css外部引用

回答:

在进入组件页面时更改背景颜色:

  beforeCreate () {
    document.querySelector('body').setAttribute('style', 'background:#fff')
  },

退出组件页面时还原背景色:

beforeDestroy () {
    document.querySelector('body').setAttribute('style', 'background:#***')
  }

回答:

全局先设置body的height:100%,根元素#app也要设置height:100%,最后再设置.txt高度为100%,然后再针对txt设置背景色不就可以了

回答:

组件:并不是说是一个完整的含有body的页面,只是一个组件,Vue是单页页面,也就是说,你使用组件的地方和组件,仅包含一个body。
所以,给.txt设置背景色即可

回答:

楼主F12查看下元素就知道为什么了。另外可能需要了解下什么是spa应用。

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注