「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 自适应可以避免额外开销。