vue中获取屏幕高度（封装使用）

我们js原生获取的方法在这里就不赘述了，有需要可以自行百度

在这里我们封装一个获取宽高的方法放在Vue实例上（方便我们在这个项目中进行引用），把下面这段代码放到main.js里即可；

/*** 获取屏幕宽高*/
Vue.prototype.$getViewportSize = function(){return {width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,//兼容性获取屏幕宽度height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight//兼容性获取屏幕高度};
};

使用

然后我们来看vue的实例，（在项目中打印一下this.$getViewportSize就可以看到）；

console.log(this.$getViewportSize)

能看到之后我们再来执行一下

console.log(this.$getViewportSize())

然后我们就可以得到这样一个对象

在项目中别的页面也是一样的用法

vue中获取屏幕高度（封装使用）相关推荐

axios 超时_聊聊 Vue 中 axios 的封装
axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 作为一 ...
vue原生获取屏幕高度
vue原生获取屏幕高度 1.全界面 2.组件中 vue原生获取屏幕高度技术胖pos实战练习知识点视频链接 1.全界面 .main{float: left;width: 100%;height: 1 ...
小程序中获取屏幕高度
屏幕高度问题小程序中有时候需要获取屏幕高度使用,简单的通过wx.getSystemInfo即可获取到手机的系统信息 wx.getSystemInfo中有3个高度,分别是: screenHeight: ...
vue中Axios的封装与API接口的管理详解
一:axios的封装 vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是promise的http库,可运行在浏览器端和node.js中. 安装 npm install axios ...
vue中axios的封装以及使用
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中.axios 在src下新建 network 文件夹 network文件夹: 网络模块放网络请求 ind ...
高德地图中加载three.js（vue中）（封装
这几天公司有一个要结合高德地图的智慧园区的项目(大致就是在3d地图中加载自己的three.js模型) 1.首先要引入高德地图官方文档给出来的引用方法 <template><div ...
小程序中获取屏幕高度及iPhoneX适配问题
屏幕高度问题小程序中有时候需要获取屏幕高度使用,简单的通过wx.getSystemInfo即可获取到手机的系统信息 wx.getSystemInfo中有3个高度,分别是: screenHeight: ...
vue中实现及封装html合同文本在线编辑保存的功能
在vue项目开发中,遇到一个对纯html合同文本进行在线编辑保存的需求,自己用JQuery和iframe摸索着封装了一个组件,遇到相同需求的前端友人可以参考一下,后续还要完善.(贴出完整代码) /封装 ...
vue中的axios封装
import axios from 'axios'; import { Message } from 'element-ui'; axios.defaults.timeout = 5000; axio ...
vue中Router的封装以及使用
在项目中会有多个vue页面,就会引入许多路由,如果配置的路由都放在router文件夹下的index.js中,要写很多个,而且显得代码量太多. 所以我们需要单独写出来 . 在router文件夹中新建H ...

vue中获取屏幕高度（封装使用）

vue中获取屏幕高度（封装使用）

使用

vue中获取屏幕高度（封装使用）相关推荐

最新文章

热门文章