Storybook v6：如何通过操作动态更改“args”

vue.js

2024-03-11 23:32:51

使用 Storybook v6 从操作中动态更改“args”

问题

我们在 Storybook 中有一个 ToggleButton 组件，它具有一个 value prop 来控制按钮的样式。我们希望通过组件的操作来动态更改 value，从而在测试期间实现按钮样式的切换。

解决方案

为了在 Storybook 中从组件的操作动态地更改“args”，我们可以使用 @storybook/addon-actions 插件。

安装插件

首先，使用以下命令安装该插件：

npm install --save-dev @storybook/addon-actions

注册插件

接下来，在你的故事文件中注册插件：

import { action } from '@storybook/addon-actions';

export default {
  decorators: [
    action('onToggle')((storyFn, context) => {
      // ...
      return storyFn();
    }),
  ],
};

拦截操作

在装饰器中，我们拦截了 onToggle 操作，并手动调用它，将 value 更改为 true。这将导致按钮样式切换到“开”。

完整代码

完整的代码如下所示：

// ToggleButton.vue
<template>
  <button :class="value ? 'on' : 'off'" @click="handleClick">Toggle</button>
</template>

<script>
export default {
  props: {
    value: Boolean
  },
  methods: {
    handleClick() {
      this.$emit('toggle');
    }
  }
};
</script>

// ToggleButton.stories.js
import { action } from '@storybook/addon-actions';

export default {
  decorators: [
    action('onToggle')((storyFn, context) => {
      const { onToggle } = context.args;
      onToggle(true);
      return storyFn();
    }),
  ],
};