Vue大屏數據展示示例
高效實現需求,避免臃腫的組件庫和重復造輪子,前段時間做瞭很多大屏展示類的項目,今天來跟大傢分享一下,大屏的實踐過程,最開始我是使用瞭dataview 這個組件庫,然後發現是自己並不需要它太多的封裝好的組件,而且在移動端,有樣式錯亂的問題。所以自己看瞭他的實現方式,搞瞭一個大屏自適應的組件。話不多說,直接上效果圖:
效果圖
需要適配所有尺寸的大型顯示屏,並且在手機上,可以縮放查看效果。我這裡添加瞭這樣一段代碼,通過縮放body的大小,進行等比例放大縮小,達到不變形,整體適配的效果。
<script> //頁面縮放公共 function resizePage() { // 獲取window的高度 var clientW = window.innerWidth var clientH = window.innerHeight // 初始window與body的比值 var bi = clientW / 1920 // 設置body的寬高-可根據實際情況進行調節 document.getElementsByTagName('body')[0].style.width = "1920px" document.getElementsByTagName('body')[0].style.height = "1080px" document.getElementsByTagName('body')[0].style.transform ='scale(' + bi + ',' + bi + ')' document.getElementsByTagName('body')[0].style.transformOrigin ='left top 0' } resizePage() // resizePage(); window.onresize = function () { setTimeout(()=>{ resizePage(); },200) } </script>
代碼實現:
封裝一個適配的大的組件,可以設大屏的背景圖和整體效果。其他的基本都是使用的echart的組件庫,因沒有什麼特別的定制的需求圖標。所以也沒有做太多的個性化操作
<template> <div id="dv-full-screen-container"> <template > <slot></slot> </template> </div> </template> <script> export default { mounted(){ } } </script> <style lang="less"> #dv-full-screen-container { position: fixed; top: 0px; left: 0px; overflow: hidden; transform-origin: left top; z-index: 999; width:100%; height:1080pxee } </style>
<template> <div class="full"> <dv-full-screen-container ref="full"> content </dv-full-screen-container> </div> </template> <script> import fullScreenContainer from './fullscreen' export default { components:{ 'dv-full-screen-container':fullScreenContainer }, mounted(){ }, created(){ }, methods:{ } } </script> <style lang="less"> .full { #dv-full-screen-container { background:#000222 url(../assets/images/bg.png); background-size: 100% 100%; overflow: auto; .full-big-border { .content { padding: 0 38px 0 38px; width: calc(100% - 76px); display: flex; } } } } </style>
總結:
以上就是自己實現大屏整體適配的效果和方法,一開始想偷懶,直接使用dataview 可以直接使用,但是可能在自己的需求的時候,難以達到,或則想的是安裝一套太臃腫的組件庫,難以扶平自己的強迫癥。希望大傢有更好的封裝方法,我這隻是實現一點皮毛,希望對剛入門的同學有所幫助。
到此這篇關於Vue大屏數據展示示例的文章就介紹到這瞭,更多相關Vue大屏數據內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!