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