Vue-cli中为单独页面设置背景色的实现方法


Posted in Javascript onFebruary 11, 2018

例子:

<template>
 <div class="finish-wrap">
  <div class="finish-header">
   <div class="finish-img">
   </div>
  </div>
  <div class="finish-tip">
   支付成功
  </div>
  <div class="finish-footer">
    <router-link to="/">学车所需资料</router-link>
    <span>
     <router-link to="/">学车考照流程</router-link>
    </span>
  </div>
 </div>
</template>

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

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

原因:打开app.vue,你会看到

<template>
    <div>
     <router-view></router-view>
    </div>
   </template>

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

解决方法:

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

.finish-wrap
background-color rgb(255,255,255)
height: 100%
position: fixed
width: 100%

以上这篇Vue-cli中为单独页面设置背景色的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
Node.js(安装,启动,测试)
Jun 09 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
node.js中fs.stat与fs.fstat的区别详解
Jun 01 Javascript
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
vue刷新和tab切换实例
Feb 11 #Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 #Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 #Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 #Javascript
使用vue-router设置每个页面的title方法
Feb 11 #Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 #Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 #Javascript
You might like
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
PHP限制HTML内容中图片必须是本站的方法
2015/06/16 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
js保留两位小数使用toFixed实现
2013/07/29 Javascript
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
python类继承与子类实例初始化用法分析
2015/04/17 Python
Python实例一个类背后发生了什么
2016/02/09 Python
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
开源Web应用框架Django图文教程
2017/03/09 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
python实现AES加密解密
2019/03/28 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
搞笑婚礼主持词
2014/03/13 职场文书
2014感恩节演讲稿大全
2014/10/11 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
MySQL慢查询优化解决问题
2022/03/17 MySQL