使用Alpine.js的:resize.window指令实现窗口resize时元素宽度变化失效问题

你的问题出在事件监听的指令语法错误：Alpine.js里，:xxx是属性绑定语法，仅在组件初始化时计算一次；而监听事件需要用@xxx语法。你写的:resize.window自然只会执行一次，后续窗口resize不会触发回调。

修复方案： #

• 将:resize.window替换为@resize.window，这才是正确的窗口resize事件监听指令
• 为了确保页面加载时aside就能拿到正确宽度，建议在组件初始化时也执行一次赋值操作

修改后的完整代码： #

<header x-data="{width: 0}" x-init="width = document.querySelector('.border-l').offsetLeft">
    <div class="flex justify-between items-center py-1">
        <x-blog.search/>
        <div class="flex">
            <div><x-blog.hamburger-right/></div>
            <div class="border-l sm:border-l-2 border-gray-100 dark:border-gray-800 my-2" @resize.window="width = $el.offsetLeft"></div>
            <div><x-blog.hamburger-left/></div>
        </div>
        <x-dark-mode-switch/>
    </div>

    {{-- aside of main --}}
    <aside class="flex absolute inset-y-0 left-0 bg-gray-400 z-20" :style="`width: ${width}px;`"></aside>
    {{-- aside of blog --}}
    <aside class="absolute -right-full w-52 bg-gray-400"></aside>
</header>

关键说明： #

• @resize.window会在每次窗口尺寸变化时触发回调，实时更新width值
• x-init中的代码在组件初始化时执行一次，保证页面加载状态下aside的宽度正确

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