控件、操作与参数
使用 argTypes 配置控件界面、使用 actions addon 记录事件日志，以及使用 play() 进行交互测试
控件、操作与参数 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。
交互式控制
Storybook 的控制面板会将故事的 args 转换为实时表单字段。您更改属性后，组件会立即重新渲染，无需编辑代码。您可以使用 argTypes 定义这些字段。
定义 argTypes
argTypes 描述每个属性：控制类型、选项和文档说明。它与 args 一起放在元数据对象上。
export default {
component: Button,
argTypes: {
label: { control: "text" },
},
}文本和布尔值控制项
控制类型决定所使用的控件。text 提供输入框；boolean 提供切换开关。
argTypes: {
label: { control: "text" },
disabled: { control: "boolean" },
}使用选项的选择控制项
对于固定的一组值，请将 select 控制类型与 options 数组一起使用。面板会渲染下拉菜单。
argTypes: {
variant: {
control: "select",
options: ["primary", "secondary", "danger"],
},
}颜色和数字控制项
其他实用的控制项包括：color 会打开颜色选择器，number（或 range）会提供数字输入。
argTypes: {
background: { control: "color" },
count: { control: { type: "range", min: 0, max: 10 } },
}操作插件
操作插件会在面板中记录事件，以便您确认组件是否正确发出事件。您可以使用 fn() 将某个参数连接到记录函数。
import { fn } from "@storybook/test"
export default {
component: Button,
args: {
onClick: fn(),
},
}fn() 的工作方式
fn() 会创建一个间谍函数，将调用记录到操作面板中。当组件调用处理函数时（例如，将发出的 click 映射到 onClick），您可以看到调用及其参数。
args: {
onSubmit: fn(),
}
// Clicking submit logs "onSubmit" with payload in the Actions panel将事件映射到处理函数
Vue 会发出事件；Storybook 会将 on<Event> 参数映射到对应的事件。发出的 update 事件会通过 onUpdate 操作参数显示出来。
argTypes: {
onUpdate: { action: "update" },
}交互函数
故事可以包含一个 play 函数，在渲染后运行，用于模拟用户交互（点击、输入），并对结果进行断言。这样，故事就变成了交互测试。
import { expect, userEvent, within } from "@storybook/test"
export const Clicks = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement)
await userEvent.click(canvas.getByRole("button"))
},
}在 play 中进行断言
在 play 中，您可以使用 expect 进行断言，并检查某个操作是否被调用，让交互测试直接显示在 Storybook 中。
export const Submits = {
args: { onSubmit: fn() },
play: async ({ args, canvasElement }) => {
const canvas = within(canvasElement)
await userEvent.click(canvas.getByRole("button"))
await expect(args.onSubmit).toHaveBeenCalled()
},
}为什么控制面板、操作和交互功能很重要
三者结合后，故事会变得非常强大：控制面板用于探索属性，操作用于验证事件是否触发，交互功能用于自动执行交互和断言——在同一个地方完成文档编写和测试。
快速检查
检查您对控制项和操作的理解。
回顾
您学习了控制项、操作和 args：
argTypes定义控制面板的形式：text、boolean、select（配合options）、color、number/range。- 操作插件会记录事件；使用
fn()连接处理函数，或通过action映射事件。 play函数在渲染后运行，使用userEvent模拟交互，并使用expect进行断言。- 三者结合后，故事变得可探索、可验证，并且能够自动说明自身。
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 42
- 课程
- 156
常见问题解答
「控件、操作与参数」课时是免费的吗？
是的 — 「控件、操作与参数」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。
「控件、操作与参数」这节课中我会学到什么？
使用 argTypes 配置控件界面、使用 actions addon 记录事件日志，以及使用 play() 进行交互测试 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「控件、操作与参数」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。