Commit f47e6aed authored by 郭志伟's avatar 郭志伟

fix: pxtorem

parent cae8fb42
import { Component, Vue } from 'vue-property-decorator';
import { pick, omit, omitBy } from 'lodash';
import { transformStyle } from '@/service/utils.service';
import { transformStyle, isPx, pxToRem } from '@/service/utils.service';
@Component({ name: 'TransformStyleMixin' })
export default class TransformStyleMixin extends Vue {
......@@ -13,16 +13,17 @@ export default class TransformStyleMixin extends Vue {
};
if (!styleObj) { return style; }
for (const key of Object.keys(styleObj)) {
if ( typeof styleObj[key] === 'number') {
if (typeof styleObj[key] === 'number') {
if (key === 'height') { styleObj[key] = Math.ceil(styleObj[key]); }
style[key] = `${(styleObj[key] / 37.5).toFixed(2)}rem`;
} else {
style[key] = styleObj[key]?.includes('px') ? `${(+(styleObj[key].slice(0, -2)) / 37.5).toFixed(2)}rem` : styleObj[key];
style[key] = isPx(styleObj[key]) ? pxToRem(styleObj[key]) : styleObj[key];
}
if (key === 'backgroundImage' && style.backgroundImage) {
style.backgroundImage = `url(${style.backgroundImage})`;
// style.background = `url(${style.backgroundImage}) no-repeat 0 0 / cover`;
}
}
if (element !== 'container') {
style = omit(style, ['position', 'top', 'left']);
......
......@@ -88,7 +88,15 @@ export const convertPointStyle = (point, defaultStyle, directionKey = DK) => {
};
return style;
};
export const isPx = str => /(\d+(\.\d*)?)+(px)/gi.test(str);
export const pxToRem = (str, width = 37.5) => {
const reg = /(\d+(\.\d*)?)+(px)/gi; //可以匹配浮点数
let newStr = str.replace(reg, function (_x) {
_x = _x.replace(/px"/gi, '');
return parseFloat(parseFloat(_x) / width).toFixed(2) + 'rem';
});
return newStr;
}
export const getStyle = function(oElement, sName) {
const result = oElement.currentStyle ? oElement.currentStyle[sName] : getComputedStyle(oElement, null)[sName];
return result.includes('px') ? result.slice(0, -2) : result;
......@@ -110,7 +118,7 @@ export const transformStyle = function(styleObj = {}) {
if ( typeof styleObj[key] === 'number') {
style[key] = `${(styleObj[key] / 37.5).toFixed(3)}rem`;
} else {
style[key] = styleObj[key].includes('px') ? `${(+(styleObj[key].slice(0, -2)) / 37.5).toFixed(3)}rem` : styleObj[key];
style[key] = isPx(styleObj[key]) ? pxToRem(styleObj[key]) : styleObj[key];
}
if (key === 'backgroundImage' && style.backgroundImage) {
style.background = `url(${style.backgroundImage}) no-repeat 0 0 / cover`;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment