0

根据此文档，我正在尝试在 config.js 文件中添加自定义视口：

import { addParameters } from '@storybook/angular'; // changing from react to angular
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';

const newViewports = {
  kindleFire2: {
    name: 'Kindle Fire 2',
    styles: {
      width: '600px',
      height: '963px',
    },
  },
  kindleFireHD: {
    name: 'Kindle Fire HD',
    styles: {
      width: '533px',
      height: '801px',
    },
  },
};

addParameters({
  viewport: {
    viewports: {
      ...INITIAL_VIEWPORTS,
      ...newViewports,
    },
  },
});

但这对我不起作用，因为在角度库中我们没有 addParameters 方法的实现。我们如何为角度配置这个？

4

1 回答 1

0

该问题与 Storybook 上的扩展运算符有关，因此，要在 Angular 应用程序上解决此问题，您应该transform-object-rest-spread在 Playbook 上安装插件并配置 Babel。

您可以按照以下步骤操作：

  1. 安装插件：npm install --save-dev babel-plugin-transform-object-rest-spread.
  2. .babelrc在文件夹下创建文件.storybook/（不用担心，在这种情况下，Babel 只会影响 Playbook 配置。这里有更多信息https://storybook.js.org/docs/configurations/custom-babel-config/）
  3. 在文件中添加下一个代码.babelrc：
{
    "plugins": ["transform-object-rest-spread"]
}
  1. 将 Viewports 对象包裹在一个对象上 o 生成一个新对象：

选项 A

viewport: { viewports: {...INITIAL_VIEWPORTS, ...newViewports} }

选项 B

const myViewports = {...INITIAL_VIEWPORTS, ...newViewports};

addParameters({ viewport: { viewports: myViewports} });
  1. 再次运行 Storybook 并享受 ;)

希望这有效！

于 2019-10-26T08:52:02.253 回答