Vue中如何实现为单独页面设置背景色

下面我就为大家分享一篇Vue-cli中为单独页面设置背景色的实现方法，具有很好的参考价值，希望对大家有所帮助。例子：1234567891011121314151617<template><p class="finish-wrap"><p class="fi...

陈2荣

3566人浏览 · 2020-06-26 08:46:46

陈2荣 · 2020-06-26 08:46:46 发布

在vue中想为单独的一个页面设置背景色，但是受内容高度影响，没办法设置整个页面的背景色，下边提供两种方法实现改变整个页面的背景色：

一、给页面设置min-height:100vh; -->推荐

如果内容不足以撑满整个页面，设置背景色时只能显示到内容的位置，此时可以给页面的第一层标签设置最小高度min-height:100vh（1vh=1%屏幕），撑开页面即可

二、让第一层标签脱离文档流

下面我就为大家分享一篇Vue-cli中为单独页面设置背景色的实现方法，具有很好的参考价值，希望对大家有所帮助。

例子：

<template>

<p class="finish-wrap">

<p class="finish-header">

<p class="finish-img">

</p>

<p class="finish-tip">

支付成功

</p>

<p class="finish-footer">

<router-link to="/">学车所需资料</router-link>

<span>

<router-link to="/">学车考照流程</router-link>

</span>

</p>

</template>

1.如果直接在css中设置body的background-color，会导致其他页面的背景色响应改变，所以不可取；

2.如上面例子如果设置.finish-wrap的背景色以及高度为100%时，会发现只是一部分的背景色发现改变，却不能使整个屏幕背景色变化；

原因：打开app.vue，你会看到

<template>

<p>

<router-view></router-view>

</p>

</template>

原因就是这里还有一层p，所以你改变的不是最外层的p背景色，但是你有不能修改这里，所以：

解决方法：

我们要让.finish-wrap脱离文档流，为他添加个fixed属性，最后结果：

.finish-wrap

background-color rgb(255,255,255)

height: 100%

position: fixed

width: 100%

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^