「San」监听DOM变化的方法

在 San框架 中监听组件内部字体大小并调整宽度，可以结合 自定义事件 或 数据绑定 来实现动态调整。San 框架没有直接的监听 DOM 尺寸变化的内置方法，但可以通过以下步骤实现：

---

方法一：使用 ResizeObserver 监听字体变化

在组件的 attached 生命周期中，使用 ResizeObserver 来监听组件内部的 DOM 元素变化，并更新 San 组件的数据。

示例代码

import { Component } from 'san';export default class MyComponent extends Component {initData() {return {width: 'auto'};}attached() {const targetElement = this.ref('content');const resizeObserver = new ResizeObserver((entries) => {for (const entry of entries) {const contentRect = entry.contentRect;const fontSize = parseFloat(window.getComputedStyle(entry.target).fontSize);this.data.set('width', `${fontSize * 2}px`); // 动态调整宽度}});if (targetElement) {resizeObserver.observe(targetElement);}// 确保观察器在组件销毁时释放资源this.resizeObserver = resizeObserver;}detached() {if (this.resizeObserver) {this.resizeObserver.disconnect();}}static template = `<div class="my-component" style="width: {{width}}"><div ref="content" class="content">{{text}}</div></div>`;
}

关键点：

• this.ref('content') 引用内部 DOM 元素。
• 使用 ResizeObserver 动态监听字体大小变化。
• 宽度通过 San 的数据绑定动态更新。

---

方法二：手动触发字体变化的监听逻辑

如果字体大小是通过组件的 data 或 props 动态设置，可以监听数据变化，并在 watch 或事件中更新宽度。

示例代码

import { Component } from 'san';export default class MyComponent extends Component {initData() {return {fontSize: 16,width: 'auto'};}inited() {this.watch('fontSize', (fontSize) => {const width = fontSize * 2; // 依据字体大小计算宽度this.data.set('width', `${width}px`);});}static template = `<div class="my-component" style="width: {{width}}"><div class="content" style="font-size: {{fontSize}}px">{{text}}</div></div>`;
}

关键点：

• 使用 watch 方法监听字体大小的变化。
• 通过 data 绑定宽度和字体大小。

---

方法三：结合 MutationObserver

在 attached 生命周期中，通过 MutationObserver 监听内部 DOM 元素的样式变化。

示例代码

import { Component } from 'san';export default class MyComponent extends Component {attached() {const targetElement = this.ref('content');const observer = new MutationObserver(() => {const fontSize = parseFloat(window.getComputedStyle(targetElement).fontSize);this.data.set('width', `${fontSize * 2}px`);});if (targetElement) {observer.observe(targetElement, {attributes: true,attributeFilter: ['style', 'class']});}this.observer = observer;}detached() {if (this.observer) {this.observer.disconnect();}}static template = `<div class="my-component" style="width: {{width}}"><div ref="content" class="content">{{text}}</div></div>`;
}

关键点：

• 使用 MutationObserver 监听 style 或 class 的变化。
• 在 detached 生命周期中断开观察器。

---

方法四：CSS 自适应方案（无需 JS）

如果字体大小和宽度的关系可以直接用 CSS 描述，可以通过 em 或 calc() 实现自动调整。

示例代码

.my-component {display: inline-block;width: calc(1.5em + 10px); /* 根据字体大小自动调整宽度 */
}.content {font-size: 16px;
}

San 模板

export default class MyComponent extends Component {static template = `<div class="my-component"><div class="content">{{text}}</div></div>`;
}

---

选择合适方案

• 字体大小频繁变化：ResizeObserver 更加高效。
• 依赖 San 数据绑定：通过 watch 或直接监听数据更简单。
• 简单静态布局：使用 CSS 自适应可以避免额外开销。