Vue如何监视屏幕尺寸变化

1、在data中定义一个值记录屏幕尺寸

data(){return{screenWidth: null,  //屏幕尺寸}
}

2、页面获取屏幕尺寸的值

mounted () {this.screenWidth = document.body.clientWidthwindow.onresize = () => {   //屏幕尺寸变化就重新赋值return (() => {this.screenWidth = document.body.clientWidth})()}}

3、如果要根据屏幕尺寸大小做操作的时候就用watch监听

watch: {screenWidth: {handler: function (val, oldVal) {if (val < 1550) {console.log('屏幕宽度小于1550px')} else {console.log('屏幕宽度大于1550px')}},immediate: true},}

Vue如何监视屏幕尺寸变化相关推荐

vue监听屏幕尺寸变化，window.onresize很简单
>> 可在任意组件中使用; 1.在data中定义一个变量,用于记录屏幕尺寸: data(){return{screenWidth: null, } } 且做好定义为 null 2.使用 ...
vue图片超出屏幕尺寸自动适应图片比例缩放
vue图片超出屏幕尺寸自动适应图片比例缩放 <div><el-button class="blue-btn"@click="open"> ...
vue PC端屏幕分辨率自适应
场景不同的电脑屏幕大小根据宽度进行等比缩放,自适应.代码中的单位还是使用px,根据设计稿的尺寸来进行还原.它会自动转为rem. 第一步安装依赖 npm install postcss-px2rem ...
vue 项目的屏幕自适应方案
方案一:使用 scale-box 组件属性: width 宽度默认 1920 height 高度默认 1080 bgc 背景颜色默认 "transparent" delay ...
VUE适配大小屏幕，超大屏幕方案
最近后台改版,要求login页适配大小屏幕,超大屏幕(浅浅的记录下): 实现方案:Vue +lib-flexible实现大小屏幕,超大屏幕的适配展示.lib-flexible是淘宝项目组开发的插件,属 ...
vue项目实现屏幕自适应
一.安装插件 npm i lib-flexible -S 下载淘宝的flexible插件,-S为生产依赖 npm i px2rem-loader -D 下载将px转换成rem的插件,这样在写的时候就可 ...
vue页面自适应屏幕宽高_Vue+Element UI 高度实时自适应
本文章是我一个实习两个月的练习生,在项目中遇到的问题,在此记录,防治以后再踩坑!! Element ui 本身使用的Container 布局容器,组件采用 flex 布局.所以用了它的布局就可以做到宽 ...
vue适配不同屏幕大小_Cocos creator面试题屏幕适配的3个小技巧
引言 cocos creator是什么? Cocos Creator 是触控科技旗下的产品,以内容创作为核心的游戏开发工具,在 Cocos2d-x 基础上实现了彻底脚本化.组件化和数据驱动等特点. 屏 ...
vue自适应各种屏幕布局
PC端,移动端,各种小程序等都可使用这个自适应方法匹配宽度,本文是根据屏幕宽度来做到自适应的,具体如下: 在postcss文件中加入如下代码: module.exports = {plugins: { ...
vue中监视$route
watch:{ //路由中数据发生改变就会执行下边代码$route(to,from){//监视$route可以接收两个参数 to,fromconsole.log(to) //to参数里面存放的是跳转后 ...

Vue如何监视屏幕尺寸变化

Vue如何监视屏幕尺寸变化

Vue如何监视屏幕尺寸变化相关推荐

最新文章

热门文章