面试题：Svelte中如何结合Slot与Action实现简单的动态按钮交互组件

Question

请你用Svelte编写一个包含Slot和Action的动态按钮交互组件。该按钮初始显示为“点击我”，点击后显示“已点击”，同时在按钮周围添加一个简单的边框动画效果（使用Action实现），并在按钮内部通过Slot插入自定义文本。

Answer 1

<script>
    let clicked = false;
    function handleClick() {
        clicked = true;
    }
    function borderAnimation(node) {
        const originalBorder = node.style.border;
        node.style.border = '2px solid blue';
        setTimeout(() => {
            node.style.border = originalBorder;
        }, 500);
        return {
            destroy() {
                node.style.border = originalBorder;
            }
        };
    }
</script>

<button on:click={handleClick} use:borderAnimation>
    {clicked? '已点击' : '点击我'}
    <slot></slot>
</button>