Vue 大屏可视化 铺满全屏

本文主要是介绍Vue 大屏可视化 铺满全屏，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 

之前写了一篇帖子Vue 大屏可视化屏幕自适应，是针对在知道大屏尺寸的情况下，保证还原UI设计的显示比例，这样在非标准比例的屏幕上显示，会出现上下或左右留白，若想完全铺满全屏，使用vw/vh 计算。

设计全局样式文件mixin.styl

//存放全局变量 全局函数designWidth=1920;//设计宽度
designHeight=1080;//设计高度
fontScale=100;//1rem=100px
bgColor=#003669;
borderColor=#00bcfe;/*** 由设计尺寸获取实际显示宽度占比* @param {Number} w  设计宽度  * @return  **vw    */
getWidth(w){return (w/designWidth*100)vw
}/*** 由设计尺寸获取实际显示高度占比* @param {Number} h  设计高度  * @return  **vh    */
getHeight(h){return (h/designHeight*100)vh
}/*** 由设计尺寸获取实际字体大小* @param {Number} f  设计字体大小 * @return  **rem    */
getFontSize(f){return (f/fontScale)rem
}

全局引入方式

在build文件夹下找到utils.js文件，在exports.cssLoaders中加入以下内容

exports.cssLoaders = function (options) {...//全局的styl文件const stylusOptions = {import: [path.join(__dirname, "../src/styles/mixin.styl") // minin.styl全局样式文件路径],paths: [path.join(__dirname, "../src/styles/"),//样式路径path.join(__dirname, "../")]}...
}

在return部分加入两行

  // https://vue-loader.vuejs.org/en/configurations/extract-css.htmlreturn {css: generateLoaders(),postcss: generateLoaders(),less: generateLoaders('less'),sass: generateLoaders('sass', { indentedSyntax: true }),scss: generateLoaders('sass'),stylus: generateLoaders('stylus',stylusOptions), //新增部分styl: generateLoaders('stylus',stylusOptions)   //新增部分}

在vue页面或组件中写样式时，使用方法

 .righttop_panel{z-index:20;position:absolute;right:getWidth(55);top:getHeight(140);height:getHeight(335); //设计尺寸高度 335width:getWidth(820);  //设计尺寸宽度  820box-sizing: border-box;display:flex;flex-direction :row;padding:getHeight(20) getWidth(30); //上下Padding 使用getHeight  左右使用getWidthfont-size:getFontSize(14);  //字体14}

横向方向尺寸全部使用 getWidth(设计尺寸)，竖向方向采用 getHeight();  字体大小使用getFontSize()

 

注：此种平铺方式，会铺满任意屏幕，不能保证原始设计尺寸比例。

这篇关于Vue 大屏可视化 铺满全屏的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---