mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-06-22 09:49:28 +08:00
feat(core): 重新设置designWidth时,应该重新计算root font size
This commit is contained in:
parent
40adc77978
commit
3d9f38781a
@ -54,7 +54,7 @@ interface EventCache {
|
||||
}
|
||||
|
||||
class App extends EventEmitter {
|
||||
public env;
|
||||
public env: Env = new Env();
|
||||
public dsl?: MApp;
|
||||
public codeDsl?: CodeBlockDSL;
|
||||
|
||||
@ -73,26 +73,14 @@ class App extends EventEmitter {
|
||||
constructor(options: AppOptionsConfig) {
|
||||
super();
|
||||
|
||||
this.env = new Env(options.ua);
|
||||
this.setEnv(options.ua);
|
||||
// 代码块描述内容在dsl codeBlocks字段
|
||||
this.codeDsl = options.config?.codeBlocks;
|
||||
options.platform && (this.platform = options.platform);
|
||||
options.jsEngine && (this.jsEngine = options.jsEngine);
|
||||
options.designWidth && (this.designWidth = options.designWidth);
|
||||
|
||||
// 根据屏幕大小计算出跟节点的font-size,用于rem样式的适配
|
||||
if (this.jsEngine === 'browser') {
|
||||
const calcFontsize = () => {
|
||||
const { width } = document.documentElement.getBoundingClientRect();
|
||||
const fontSize = width / (this.designWidth / 100);
|
||||
document.documentElement.style.fontSize = `${fontSize}px`;
|
||||
};
|
||||
|
||||
calcFontsize();
|
||||
|
||||
document.body.style.fontSize = '14px';
|
||||
|
||||
globalThis.addEventListener('resize', calcFontsize);
|
||||
if (typeof options.designWidth !== 'undefined') {
|
||||
this.setDesignWidth(options.designWidth);
|
||||
}
|
||||
|
||||
if (options.transformStyle) {
|
||||
@ -110,6 +98,20 @@ class App extends EventEmitter {
|
||||
bindCommonEventListener(this);
|
||||
}
|
||||
|
||||
public setEnv(ua?: string) {
|
||||
this.env = new Env(ua);
|
||||
}
|
||||
|
||||
public setDesignWidth(width: number) {
|
||||
this.designWidth = width;
|
||||
// 根据屏幕大小计算出跟节点的font-size,用于rem样式的适配
|
||||
if (this.jsEngine === 'browser') {
|
||||
this.calcFontsize();
|
||||
globalThis.removeEventListener('resize', this.calcFontsize);
|
||||
globalThis.addEventListener('resize', this.calcFontsize);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 将dsl中的style配置转换成css,主要是将数值转成rem为单位的样式值,例如100将被转换成1rem
|
||||
* @param style Object
|
||||
@ -326,6 +328,10 @@ class App extends EventEmitter {
|
||||
public destroy() {
|
||||
this.removeAllListeners();
|
||||
this.page = undefined;
|
||||
|
||||
if (this.jsEngine === 'browser') {
|
||||
globalThis.removeEventListener('resize', this.calcFontsize);
|
||||
}
|
||||
}
|
||||
|
||||
private addEventToMap(event: EventCache) {
|
||||
@ -354,6 +360,12 @@ class App extends EventEmitter {
|
||||
const values = transform.join(' ');
|
||||
return !values.trim() ? 'none' : values;
|
||||
}
|
||||
|
||||
private calcFontsize() {
|
||||
const { width } = document.documentElement.getBoundingClientRect();
|
||||
const fontSize = width / (this.designWidth / 100);
|
||||
document.documentElement.style.fontSize = `${fontSize}px`;
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
Loading…
x
Reference in New Issue
Block a user