「San」监听DOM变化的方法

news2024/11/23 0:56:44

在 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>
    `;
}