vue大屏展示高度自适应

vue大屏展示获取当前屏幕盖度

<template><div ref="bigshow"><!--大屏内容 --></div>
</template>
<script>
export default {data() {return {clientHeight:'', //当前屏幕高度}},watch:{// 如果clientHeight发生改变，就调用这个方法clientHeight(){this.changeFixed(this.clientHeight)}},beforeMount() {// 基准大小const baseSize=13;let htmlWidth=document.documentElement.clientWidth||document.body.clientWidth;const scale=htmlWidth/1920;document.documentElement.style.fontSize=baseSize*Math.min(scale,2)+'px';window.addEventListener('resize',()=>{let htmlWidth=document.documentElement.clientWidth||document.body.clientWidth;const scale=htmlWidth/1920;document.documentElement.style.fontSize=baseSize*Math.min(scale,2)+'px';})},mounted(){this.clientHeight=`${document.documentElement.clientWidth}`;let that=this;// 窗口货框架被调整大小时触发window.addEventListener('resize',()=>{that.clientHeight=`${document.documentElement.clientWidth}`;})},methods:{// 将窗口高度赋值给节点changeFixed(clienHright){this.$refs.bigshowContent.style.height=clienHright+'px'}}
}
</script>

vue大屏展示高度自适应相关推荐

vue大屏展示代码从0 到1
1.基本骨架 2.填充内容 3.G2图 4.大屏数据展示组件库DataV 官网 1.基本骨架 <template><div id="parentDiv">& ...
Vue大屏页面屏幕自适应
1.在配置文件设置大屏设计的尺寸1920*1080 //appConfig.js export default{screen:{width:1920,height:1080,scale:20}//大屏 ...
搭建VUE大屏展示项目（一）环境搭建
文章目录环境安装搭建项目工程整理问题 github地址环境安装升级npm npm install -g npm 切换到淘宝镜像 npm config set registry " ...
html多图自动展示,基于echarts+html+css+jq的数据可视化大屏展示炫酷看板
默认你已经具备前端基础 html,css,js,jq这些基本知识都已经掌握. 什么是echarts? ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动 ...
vue项目实现大屏展示自适应问题
vue项目实现大屏展示自适应问题此处的项目为vue2版本,因为该项目立项阶段未要求兼容大屏设备和移动端设备,原设计稿尺寸1920X1080像素,如何实现响应式布局. 一.安装 postcss-px ...
VUE 项目实现大屏展示的响应式
vue项目实现大屏展示自适应问题此处的项目为vue2版本,因为pc端的项目没有采用响应式自适应手机端的设计,所以使用lodash插件实现屏幕移动端自适应. 首先下载lodash插件. npm i ...
Vue大数据可视化（大屏展示）方案升级，发布全新Vue3版本
千呼万唤始出来,终于将原先的 Vue2 升级到了 Vue3,并且使用了 Ts,部分界面使用了 Tsx 的写法,欢迎大家来点个星星~ 项目地址:Vue3 可视化大屏展示,点颗星星吧~ 界面展示(这个是动 ...
vue中is属性搭配vuedraggable插件实现可拖动可视化大屏展示组件的自定义配置功能
最近有这样一个需求,将大屏上展示的东西都封装成独立的组件让用户自己可以自定义配置自己的组件位置及想要展示的组件,第一个我就想到通过is来实现,分享下我的思路及部分代码供大家参考. 先看下大概布局: 如 ...
web大屏展示用到的组件_从零开始设计数据大屏—基于Vue
为什么要做数据大屏? 现如今的大数据逐渐发挥出了它的力量,并无形的改变着我们的生活.但大数据在不是从事技术开发的人来说没有很明显的感受,很多人对大数据的概念只是停留在每年网易云音乐对个人听歌的汇总上. ...

vue大屏展示高度自适应

vue大屏展示获取当前屏幕盖度

vue大屏展示高度自适应相关推荐

最新文章

热门文章