【vue】页面缩放获取屏幕宽度、多个按钮根据屏幕宽度合并成一个按钮

获取页面宽度高度

方法来自：小讴

1、监听窗口变化
获取窗口宽度：document.body.clientWidth
监听窗口变化：window.onresize
2、JS方法
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth(包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)

将document.body.clientWidth赋值给data中自定义的变量：

data:{screenWidth: document.body.clientWidth
}

在页面mounted时，挂载window.onresize方法：

mounted () {const that = thiswindow.onresize = () => {return (() => {window.screenWidth = document.body.clientWidththat.screenWidth = window.screenWidth})()}
}

监听screenWidth属性值的变化，打印并观察screenWidth发生变化的值：

watch:{screenWidth(val){// 为了避免频繁触发resize函数导致页面卡顿，使用定时器if(!this.timer){// 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidththis.screenWidth = valthis.timer = truelet that = thissetTimeout(function(){// 打印screenWidth变化的值console.log(that.screenWidth)// 这个时候就可以监测页面窗口宽度高度等值啦！that.timer = false},400)}}
}

运用：页面缩放时所有操作按钮缩成一个“更多”按钮

 <el-table>...<el-table-column label="操作">// 如果页面缩小，全部缩成一个“更多”按钮<template v-if="handleFlag==false"><el-dropdown><span class="el-dropdown-link"><el-button type="text" icon="el-icon-caret-bottom" style="color:#256da0">更多操作</el-button></span><el-dropdown-menu slot="dropdown"><el-dropdown-item v-if="scope.row.isEnding==0" ><el-button type="text" icon="el-icon-edit"style="color:#256da0" @click="editHandle(scope.row, scope.$index)">编辑本条</el-button></el-dropdown-item></el-dropdown-menu></el-dropdown></template>// 如果页面不缩小，全部按钮展示<template v-if="handleFlag"><el-button type="text" icon="el-icon-edit" v-if="scope.row.isEnding==0" style="color:#256da0" @click="editHandle(scope.row, scope.$index)">编辑</el-button><el-button type="text" icon="el-icon-delete" style="color:#f56c6c;margin-left: 10px;" @click="handleDel(scope.row)">删除</el-button><el-button type="text" icon="el-icon-view" v-if="scope.row.isEnding==0" style="color:#68b6d0" @click="intoHandle(scope.row)">进入</el-button><el-button type="text" icon="el-icon-s-data" style="color:#67C23A" @click="intoViewHandle(scope.row)">分析</el-button><el-button type="text" icon="el-icon-check" v-if="scope.row.isEnding==0" style="color:#909399" @click="finishHandle(scope.row)">完结</el-button></template></el-table-column>
</el-table>

data() {return {handleFlag:false,screenWidth: document.body.clientWidth,}}

mounted () {let that = thiswindow.onresize = () => {return (() => {window.screenWidth = document.body.clientWidththat.screenWidth = window.screenWidth})()}},

  watch:{screenWidth(val){// 为了避免频繁触发resize函数导致页面卡顿，使用定时器if(!this.timer){// 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidththis.screenWidth = valthis.timer = truelet that = thissetTimeout(function(){// 打印screenWidth变化的值if (that.screenWidth<1430) {that.handleFlag=false;console.log(1,that.handleFlag,that.screenWidth)} else {that.handleFlag=true;console.log(2,that.handleFlag,that.screenWidth)}that.timer = false},400)}}},

【vue】页面缩放获取屏幕宽度、多个按钮根据屏幕宽度合并成一个按钮相关推荐

vue点击按钮实现跳转到另一个vue页面
首先需要对按钮绑定一个函数,然后在函数里进行页面路由的改变. 这里要确保项目中已经在使用vue-router. 如图,我想要跳转到这个index.vue页面那么按钮绑定的函数里的路径应该这么写: 然 ...
jq获取页面高度_js与jquery获取屏幕宽度与高度
1,javascript获取屏幕宽度与高度网页可见区域宽: document.body.clientwidth 网页可见区域高: document.body.clientheight 网页可见区域宽 ...
IOS上从第三方页面回跳VUE页面页面不刷新问题
情景描述: IOS系统环境下,从微信的vue页面A中跳转到第三方页面B,然后点击浏览器返回按钮返回A页面. 问题描述: IOS系统下,A页面没有刷新:Android正常刷新. 问题解决: 在A页面mo ...
小程序通过web-view访问的vue页面中点击无法跳转到小程序相关问题
问题描述: 点击小程序中的一个按钮或者一个banner图片,通过小程序web-view组件到进入一个vue的页面中,在该vue页面中点击图片无法按照要求回到指定的小程序中,点击操作没有任何反应. 解决 ...
vue页面返回消息头获取_vue在响应头response中获取自定义headers操作
日常开发,我们可能会为了安全问题,保证第三方无法通过伪造返回报文欺骗前端,需要在返回报文中添加自定义参数,用于验证身份,后端添加自定义参数,前端校验自定义参数通过后才会执行相应的操作. 系统为了安全会 ...
vue 组件第一次不渲染问题_解决vue页面渲染但dom没渲染的操作
我就废话不多说了,大家还是直接看代码吧~ this.$nextTick(() => { $("select[name='ddlCostCenter']").select2({ ...
VUE弹窗加载另一个VUE页面
之前实现了一个功能VUE利用tree-transfer插件实现角色菜单动态设置在这个功能的基础上,进一步完善角色列表Uacter.vue页面,点击[菜单设置]按钮,弹出角色菜单MenuRole.v ...
Android 与Vue 页面交互
1.加载html private void initView() {WebSettings webSettings1 = webview.getSettings();webSettings1.setJ ...
vue 页面转pdf 并下载
最近需要做一个下载vue页面为pdf格式的功能,网上方案有很多,也尝试了其他方案,最终采用的方案流程就是点击下载报告按钮,则请求后端一个接口,例如接口地址为example.cn/file/downl ...

【vue】页面缩放获取屏幕宽度、多个按钮根据屏幕宽度合并成一个按钮

【vue】页面缩放获取屏幕宽度、多个按钮根据屏幕宽度合并成一个按钮相关推荐

最新文章

热门文章