vuevite-style-pxtovm/dist/stylePxToVw.mjs

vue vite 项目行内样式px转vw的js库

let n = {
  // unitToConvert: "px",
  viewportWidth: 750,
  //UI设计稿的宽度
  unitPrecision: 2,
  // 转换后的精度，即小数点位数,行内样式只能小数点后4位
  viewportUnit: "vw",
  //转换后的单位（包括字体）
  // fontViewportUnit: "vw",
  minPixelValue: 1
  //小于多少px的不转换
};
function p(i, t) {
  var r = Math.pow(10, t + 1), e = Math.floor(i * r);
  return Math.round(e / 10) * 10 / r;
}
function c(i, t, r, e) {
  return function(a, l) {
    if (l) {
      var o = parseFloat(l);
      if (!(o <= t))
        return p(o / i * 100, r) + e;
    }
  };
}
const u = /<template>([\s\S]+)<\/template>/gi, s = /(\d+)px/gi, f = (i) => (Object.assign(n, i), {
  // 插件名称
  name: "stylePxToVw",
  // transform 钩子
  async transform(t, r) {
    if (/.vue$/.test(r)) {
      let e = "";
      if (u.test(t) && (e = t.match(u)[0]), s.test(e)) {
        let a = e.replace(
          s,
          c(
            n.viewportWidth,
            n.minPixelValue,
            n.unitPrecision,
            n.viewportUnit
          )
        );
        t = t.replace(e, a);
      }
    }
    return { code: t };
  }
});
export {
  f as default
};