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.html
  return {
    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); //设计尺寸高度 335
        width:getWidth(820);  //设计尺寸宽度  820

        box-sizing: border-box;
        display:flex;
        flex-direction :row;
        padding:getHeight(20) getWidth(30); //上下Padding 使用getHeight  左右使用getWidth
        font-size:getFontSize(14);  //字体14
        
    }

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

 

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