San与s-ref

写在前面

最近在实习过程中有用到 san框架，遇到的一些问题记录下来：

如何使用

在 San 框架中，s-ref 指令用于为元素或组件分配引用名称，方便在组件实例中通过 this.ref 访问对应的 DOM 元素或子组件。

1、使用方法：

在模板中，使用 s-ref 为元素或子组件指定引用名称：

<template>
    <div s-ref="myDiv">内容</div>
    <child-component s-ref="myChild"></child-component>
</template>

在组件的脚本部分，可以通过 this.ref 访问这些引用：

this.ref('myDiv'); // 获取 <div> 元素
this.ref('myChild'); // 获取子组件实例

2、注意事项：

• s-ref 只能用于直接子元素或子组件，不能跨越组件层级访问。
• 在访问引用时，确保元素或组件已经被渲染。

通过 s-ref，开发者可以方便地在组件内部操作特定的 DOM 元素或子组件实例，增强了组件的交互能力。

具体例子

通过 s-ref 来获取到对应的 DOM 元素，然后通过 JavaScript 的 DOM 操作获取字体大小

1、代码实现

假设你已经将 s-ref="paragraph" 设置在 sc-paragraph 上，可以按照以下方式获取该元素的字体大小：

1. 确保在组件加载完成后操作 DOM
   San 框架提供了 attached 生命周期方法，可以在组件挂载到 DOM 后操作。

2. 通过 s-ref 获取 DOM 元素
   this.ref('paragraph') 可以获取到 sc-paragraph 的 DOM 节点。

3. 获取字体大小
   使用 window.getComputedStyle 获取样式属性。

attached() {
    // 获取 DOM 元素
    const paragraphElement = this.ref('paragraph');

    // 获取计算后的样式
    const computedStyle = window.getComputedStyle(paragraphElement);

    // 获取字体大小
    const fontSize = computedStyle.fontSize;

    console.log('字体大小:', fontSize); // 示例输出: "16px"
}

2、注意事项

1. 确认渲染时机
   确保 sc-paragraph 已正确渲染并附加到 DOM 中，否则 this.ref('paragraph') 可能为 undefined。

2. 处理跨组件的自定义组件
   如果 sc-paragraph 是自定义组件，this.ref('paragraph') 返回的是该组件实例，而不是直接的 DOM 元素。此时需要通过子组件的方法或属性访问具体 DOM。例如：

   attached() {
       const paragraphInstance = this.ref('paragraph');
       // 如果sc-paragraph是组件，通过el获取 DOM 元素
       const paragraphElement = paragraphInstance.el; 
       const computedStyle = window.getComputedStyle(paragraphElement);
       console.log('字体大小:', computedStyle.fontSize);
   }
   

示例输出

如果 font-size 被设置为 16px，console.log 输出：

字体大小: 16px

通过这种方式，可以轻松获取 s-ref 指定元素的字体大小属性！