vue 计算样式无法转换px为vm？

Question

项目是移动端的，使用了postcss-px-to-viewport可以将px转换为vm，但在computed中返回样式时，无法转换成功

<li :style="activeFont">233</li>

props:{
  activeFontSize:{
      type:String,
      default: '34px'
  }
},
computed:{
  activeFont(){
      return {
          fontSize: this.activeFontSize
      }
  }
}

Answer 1

postcss等css预/后处理器只处理less,css等样式文件.

内联样式的尺寸需要自己手动计算.

  activeFont(){
      // 这里只匹配xxpx这种字符串,自己处理下兼容
      const size = this.activeFontSize.match(/^(\d*\.\d*)px$/)[1];
      return {
          fontSize: size / (375 / 100) + 'vw';
      }
  }

vw是一个相对于屏幕宽度的单位,设计稿一般按ipone 375的比例来.因此除以3.75就是转换后的vw

Answer 2

postcss-px-to-viewport无法将内联样式转成vm，只是支持class这样的