当前位置: 首页 > news >正文

「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 的数据绑定动态更新。

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

如果字体大小是通过组件的 dataprops 动态设置,可以监听数据变化,并在 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 监听 styleclass 的变化。
  • detached 生命周期中断开观察器。

方法四:CSS 自适应方案(无需 JS)

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

示例代码
.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 自适应可以避免额外开销。
http://www.lryc.cn/news/489015.html

相关文章:

  • 如何选择服务器
  • 嵌入式驱动面试总结
  • Uniapp 简单配置鸿蒙
  • 线程池的实现与应用
  • 基于Java Springboot单位考勤系统
  • 近源渗透|HID ATTACK从0到1
  • 【linux】插入新硬盘如何配置:格式化、分区、自动挂载(Ubuntu)
  • YOLOv8-ultralytics-8.2.103部分代码阅读笔记-block.py
  • 代码随想录算法训练营第五十三天|Day53 图论
  • LeetCode:203.移除链表元素
  • 知识见闻 - 数学: 均方根 Root Mean Square
  • 机器硬件调优
  • 如何更改手机GPS定位
  • HarmonyOS(57) UI性能优化
  • Mysql的加锁情况详解
  • hive3.1.2编译spark3安装包
  • 网络安全,文明上网(1)享科技,提素养
  • ESP32 烧录问题
  • CnosDB 实时流式计算:优化时序数据处理与降采样解决方案
  • ApiChain 从迭代测试用例到项目回归测试 核心使用教程
  • 数据集-目标检测系列- 花卉 玫瑰 检测数据集 rose >> DataBall
  • django从入门到实战(四)——模型与数据库
  • LeetCode:1008. 前序遍历构造二叉搜索树
  • gdb - 调试工具 - 入门 (一)
  • Swift内存访问冲突
  • 深入理解Spring(三)
  • TB6612电机驱动模块使用指南
  • Paper -- 洪水深度估计 -- 利用图像处理和深度神经网络绘制街道照片中的洪水深度图
  • 学习C#中的BackgroundWorker 组件
  • 【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!