使用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 写类方式之八
Jul 05 Javascript
基于jQuery的日期选择控件
Oct 27 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
页面定时刷新(1秒刷新一次)
Nov 22 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 Javascript
Vue.js一个文件对应一个组件实践
Oct 27 Javascript
jQuery简单实现遍历单选框的方法
Mar 06 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
Angular Material Icon使用详解
Nov 07 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 cli 方式 在crotab中运行解决
2010/02/08 PHP
PHP 数组基础知识小结
2010/08/20 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
webpack之devtool详解
2018/02/10 Javascript
vue中的provide/inject的学习使用
2018/05/09 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
在Docker上开始部署Python应用的教程
2015/04/17 Python
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
关于python写入文件自动换行的问题
2018/06/23 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
机电专业个人自荐信格式模板
2013/09/23 职场文书
大学生毕业自我评价范文分享
2013/11/11 职场文书
办公文员的工作岗位职责
2013/11/12 职场文书
商场活动策划方案
2014/01/24 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
针对吵架老公保证书
2015/05/08 职场文书