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

fix: pxtorem

parent cae8fb42
import { Component, Vue } from 'vue-property-decorator'; import { Component, Vue } from 'vue-property-decorator';
import { pick, omit, omitBy } from 'lodash'; import { pick, omit, omitBy } from 'lodash';
import { transformStyle } from '@/service/utils.service'; import { transformStyle, isPx, pxToRem } from '@/service/utils.service';
@Component({ name: 'TransformStyleMixin' }) @Component({ name: 'TransformStyleMixin' })
export default class TransformStyleMixin extends Vue { export default class TransformStyleMixin extends Vue {
...@@ -13,16 +13,17 @@ export default class TransformStyleMixin extends Vue { ...@@ -13,16 +13,17 @@ export default class TransformStyleMixin extends Vue {
}; };
if (!styleObj) { return style; } if (!styleObj) { return style; }
for (const key of Object.keys(styleObj)) { 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]); } if (key === 'height') { styleObj[key] = Math.ceil(styleObj[key]); }
style[key] = `${(styleObj[key] / 37.5).toFixed(2)}rem`; style[key] = `${(styleObj[key] / 37.5).toFixed(2)}rem`;
} else { } 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) { if (key === 'backgroundImage' && style.backgroundImage) {
style.backgroundImage = `url(${style.backgroundImage})`; style.backgroundImage = `url(${style.backgroundImage})`;
// style.background = `url(${style.backgroundImage}) no-repeat 0 0 / cover`; // style.background = `url(${style.backgroundImage}) no-repeat 0 0 / cover`;
} }
} }
if (element !== 'container') { if (element !== 'container') {
style = omit(style, ['position', 'top', 'left']); style = omit(style, ['position', 'top', 'left']);
......
...@@ -88,7 +88,15 @@ export const convertPointStyle = (point, defaultStyle, directionKey = DK) => { ...@@ -88,7 +88,15 @@ export const convertPointStyle = (point, defaultStyle, directionKey = DK) => {
}; };
return style; 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) { export const getStyle = function(oElement, sName) {
const result = oElement.currentStyle ? oElement.currentStyle[sName] : getComputedStyle(oElement, null)[sName]; const result = oElement.currentStyle ? oElement.currentStyle[sName] : getComputedStyle(oElement, null)[sName];
return result.includes('px') ? result.slice(0, -2) : result; return result.includes('px') ? result.slice(0, -2) : result;
...@@ -110,7 +118,7 @@ export const transformStyle = function(styleObj = {}) { ...@@ -110,7 +118,7 @@ export const transformStyle = function(styleObj = {}) {
if ( typeof styleObj[key] === 'number') { if ( typeof styleObj[key] === 'number') {
style[key] = `${(styleObj[key] / 37.5).toFixed(3)}rem`; style[key] = `${(styleObj[key] / 37.5).toFixed(3)}rem`;
} else { } 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) { if (key === 'backgroundImage' && style.backgroundImage) {
style.background = `url(${style.backgroundImage}) no-repeat 0 0 / cover`; 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