Svelte内联样式无法随传入值动态更新问题求助

核心问题 #

偏移值无法同步到内联样式的原因有两个：

1. 缺少长度单位：top和left属于CSS位置属性，必须搭配长度单位（如px）才能被浏览器识别，直接写数字会被浏览器忽略，默认使用0。
2. 样式分隔符错误：CSS样式属性之间需要用分号;分隔，你代码里用了逗号, ，不符合CSS语法规范。

另外需要注意：默认情况下元素的position是static，这种定位模式下top和left属性不会生效，必须将元素设置为relative/absolute/fixed/sticky定位。

修复方案 #

修改Dropdown.svelte中的内联样式部分，以下两种方式任选其一：

方式一：修复字符串模板写法

<div
    style="position: absolute; top: {yOffset}px; left: {xOffset}px"
    class=""
>
    <!-- 原有内容 -->
</div>

方式二：使用Svelte推荐的样式对象绑定（更可靠）

<div
    style={{ 
        position: 'absolute',
        top: `${yOffset}px`, 
        left: `${xOffset}px` 
    }}
    class=""
>
    <!-- 原有内容 -->
</div>

验证效果 #

修改后点击按钮，xOffset和yOffset的数值会带上px单位生效，浏览器调试工具中就能看到内联样式的top和left值随点击位置动态更新了。

内容的提问来源于stack exchange，提问作者plutownium