使用Vue-cli 中为单独页面设置背景图片铺满全屏


Posted in Javascript onJuly 17, 2020

啥也不说了,大家还是直接看代码吧~

<template>
  <div id="logo">
  </div>
</template>
<script>
 import meadiaurl from '../../api/mediaurl'
  export default {
    name: "logo"
</script>

<style scoped>
 #logo{
  background: url("../../assets/images/Login.png");
  background-size: 100% 100%;
  height: 100%;
 }
</style>

如果像以上代码写,高度为100%时,会发现背景图片只是内容撑起来的,却不能使整个屏幕铺满背景图;

解决方案:

我们要让#logo脱离文档流,为他添加个fixed属性

#logo{
  background: url("../../assets/images/Login.png");
  background-size: 100% 100%;
  height: 100%;
  position: fixed;
  width: 100%
 }

补充知识:vue 实现全屏显示和全屏按钮svg图

1,第一步安装screenfull

npm install --save screenfull

2, 新建screenfull.vue组件,

<template>
  <div>
    <svg
      t="1508738709248"
      class="screenfull-svg"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="2069"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="32"
      height="32"
      @click="click">
        <path
          d="M333.493443 428.647617 428.322206 333.832158 262.572184 168.045297 366.707916 64.444754 64.09683 64.444754 63.853283 366.570793 167.283957 262.460644Z"
          p-id="2070"/>
        <path
          d="M854.845439 760.133334 688.61037 593.95864 593.805144 688.764889 759.554142 854.56096 655.44604 958.161503 958.055079 958.161503 958.274066 656.035464Z"
          p-id="2071"/>
        <path
          d="M688.535669 428.550403 854.31025 262.801405 957.935352 366.921787 957.935352 64.34754 655.809313 64.081481 759.919463 167.535691 593.70793 333.731874Z"
          p-id="2072"/>
        <path
          d="M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z"
          p-id="2073"/>
    </svg>
  </div>
</template>
<script>
import screenfull from 'screenfull' //引入screenfull
export default {
  name: 'Screenfull',
  props: {
    width: {
      type: Number,
      default: 22
    },
    height: {
      type: Number,
      default: 22
    },
    fill: {
      type: String,
      default: '#48576a'
    }
  },
  data(){
    return {
      isFullscreen: false  //不可少
    }
  },
  methods: {
    click(){
      if(!screenfull.enabled){
        this.$message({ 
          message: '你的浏览器不支持全屏',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
    }
  }
}
</script>
<style scoped>
.screenfull-svg {
  width: 20px;
  height: 20px;
  cursor: pointer;
  fill: red;
}
</style>

3, 在需要的组件引入该组件即可

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

Javascript 相关文章推荐
javascript的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
js 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
减少访问DOM的次数提升javascript性能
Feb 24 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
Vue2.0 vue-source jsonp 跨域请求
Aug 04 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
Aug 14 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 Javascript
vue 点击其他区域关闭自定义div操作
Jul 17 #Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 #Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 #Javascript
基于js实现判断浏览器类型代码实例
Jul 17 #Javascript
Vue实现背景更换颜色操作
Jul 17 #Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 #Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 #Javascript
You might like
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
微信小程序录音与播放录音功能
2017/12/25 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
Python入门之modf()方法的使用
2015/05/15 Python
详解Python Socket网络编程
2016/01/05 Python
从头学Python之编写可执行的.py文件
2017/11/28 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
业务副厂长岗位职责
2014/01/03 职场文书
中学生获奖感言
2014/02/04 职场文书
物业工程部经理岗位职责
2015/04/09 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书