在前端开发中，我们常常需要使用到各种 UI 组件来实现页面的展示和交互功能。其中，radio 是一种常用的单选框组件，可以帮助用户从多个选项中选择一个。
在本文中，我们将介绍如何使用 npm 包 radio，一个简单易用的纯 JavaScript 实现的 radio 组件，并提供详细的使用教程和示例代码。
安装
首先，我们需要安装 radio 包。可以通过以下命令在项目中安装：
npm install @egjs/radio
基本用法
安装完成后，我们可以在 JavaScript 中引入并使用 radio：
-- -------------------- ---- ------- ------ ----- ---- -------------- -- ---- ----- -- ----- ----- - --- -------- -- ---- ------------------- -------------------- -------------------- -- ------ ------------------------ -- -------- ------------------ --- -- - ---------------- ------------- ---
在上面的示例中，我们首先通过 import 引入了 radio 包，并创建了一个 radio 实例。然后，我们使用 add 方法添加了三个选项，并使用 setValue 方法设置了默认选项为 "apple"。最后，我们通过 on 方法监听了选项变化事件，并在事件处理函数中输出了选中的选项值。
进阶用法
除了基本用法外，radio 还提供了一些进阶用法，可以帮助我们更灵活地使用这个组件。下面介绍其中的几个重要特性。
自定义模板
默认情况下，radio 会使用内置的模板来渲染选项。如果需要自定义选项的展示方式，可以通过 setTemplate 方法来指定自定义模板：
radio.setTemplate((item) => {
return `<label>
<input type="radio" name="${radio.id}" value="${item.value}" ${
item.checked ? "checked" : ""
}>
${item.value}
</label>`;
});上述代码中，我们通过 setTemplate 方法设置了一个自定义模板函数。这个函数接受一个参数 item，表示当前正在渲染的选项对象。在模板函数内部，我们可以根据需要自由组合 HTML 结构，并通过 ${} 形式插入选项值和其他属性。
手动触发事件
默认情况下，radio 会在用户点击选项时自动触发 change 事件。如果需要手动触发 change 事件，可以通过 setValue 方法的第二个参数来控制：
// 设置选项值，并手动触发 change 事件
radio.setValue("banana", true);在上述代码中，我们调用了 setValue 方法，并将第二个参数设置为 true，表示需要手动触发 change 事件。
动态添加/删除选项
除了在初始化时添加选项外，我们还可以在运行时动态向 radio 中添加/删除选项：
// 动态添加一个选项
radio.add("pear");
// 动态删除一个选项
radio.remove("banana");在上述代码中，我们分别调用了 add 和 remove 方法来动态添加和删除选项。
总结
通过本文的介绍，我们了解了如何使用 npm 包 radio 实现单选框组件，并掌握了基本用法和进阶特性。希望本文对前端开发者们有所启发，能够帮助大家更加轻松地实现页面交互功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37097