如何为Skeleton的SlideToggle组件添加变更事件监听器？

首先纠正你代码里的一处小问题：你绑定的变量是is_monitoring，但定义的变量是is_checked，两者名称不一致会导致双向绑定失效，需要保持统一。

针对获取变更事件的需求，有两种简洁的实现方式：

方式一：监听组件的change事件 #

Skeleton的SlideToggle组件基于原生<input type="checkbox">封装，支持标准的change事件，你可以直接在组件上绑定事件处理函数：

<script lang="ts">
    import { SlideToggle } from '@brainandbones/skeleton';
    let is_checked: boolean = false;

    // 处理切换变更事件
    function handleToggleChange(e: Event) {
        const inputElement = e.target as HTMLInputElement;
        is_checked = inputElement.checked;
        // 在这里编写状态变更后的业务逻辑
        console.log('当前切换状态:', is_checked);
    }
</script>

<div class="page-container">
    <SlideToggle checked={is_checked} on:change={handleToggleChange}>
        {is_checked ? 'Activated' : 'Disabled'}
    </SlideToggle>
</div>

方式二：使用Svelte的反应式语句 #

利用Svelte的$:反应式声明，当is_checked状态变化时自动执行对应逻辑，无需手动监听事件：

<script lang="ts">
    import { SlideToggle } from '@brainandbones/skeleton';
    let is_checked: boolean = false;

    // 当is_checked值变化时自动触发
    $: {
        console.log('当前切换状态:', is_checked);
        // 在这里编写状态变更后的业务逻辑
    }
</script>

<div class="page-container">
    <SlideToggle bind:checked={is_checked}>
        {is_checked ? 'Activated' : 'Disabled'}
    </SlideToggle>
</div>

两种方式都能避免手动轮询状态，推荐根据你的业务场景选择：如果需要直接操作事件对象，用第一种方式；如果只关注状态值变化，第二种更简洁。

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