microvideo-component/lib/layout/utils.js

microvideo components

/**
 * 获取dom 属性值
 * @param {Array, String} val 属性值配置
 */
export const getDomProp = (val) => {
  if (val instanceof Array) {
    return val[0] && val[1] ? () => getStyle(val[0], val[1], val[2]) : null;
  }
  return val;
};

const isRem = (v) => String(v).indexOf("rem") > -1;

/**
 * 根据id获取对应元素的style key值
 * @param {String} id dom id
 * @param {String} type dom 属性类型
 * @param {String} add 增加值（正负值）
 */
export const getStyle = (id, type, add = 0) => {
  const dom = document.getElementById(id);
  if (!dom) {
    return console.error(`没有id为${id}的布局容器，请前往大屏管理重新配置`);
  }
  let num = type.includes("width") ? dom.offsetWidth : dom.offsetHeight;

  if (isRem(add)) {
    const rootSize =
      document.querySelector("html").style.fontSize.replace("px", "") || 0;
    const unitRem = add.replace("rem", "") || 0;
    return `${rootSize * unitRem + num}px`;
  }

  num = !isNaN(Number(add)) ? num + Number(add) : num;
  return num + "px";
};