在前端开发过程中，展示组件的样式和布局是非常重要的。@storybook/addon-viewport 是一个可以让我们快速且方便地预览组件在不同显示屏幕（viewport）下的展示效果的工具。本文将介绍如何使用该 npm 包。
安装
首先，需要确保安装了 Storybook。然后，通过 npm 函数库安装 @storybook/addon-viewport :
npm install --save-dev @storybook/addon-viewport
配置
在你的 Storybook 配置文件中添加该插件，以确保能够使用它的功能。对于大多数使用 Create React App 创建的项目，该文件位于 .storybook 目录下的 config.js 文件中。
import { configure, addDecorator } from '@storybook/react';
import { withViewport } from '@storybook/addon-viewport';
addDecorator(withViewport);
// automatically import all files ending in *.stories.js
configure(require.context('../src/stories', true, /\.stories\.js$/), module);使用方法
视口
@storybook/addon-viewport 工具提供了一些基于视口（viewport）配置的选项，帮助我们快速切换展示设备。open 参数可以接收一个字符串或一个对象。若是字符串，可以是以下的任意一种：
-- -------------------- ---- -------
---------------
--------- -
---------- -
-------- -
----- ------- ---
------- -
------ --------
------- --------
--
--
-------- -
----- ------- ---
------- -
------ --------
------- --------
--
--
-------- -
----- ------- ---
------- -
------ --------
------- --------
--
--
--------- -
----- ------- ----
------- -
------ --------
------- --------
--
--
--
---------------- ----------
--
---使用更为灵活的对象，具体配置可包含在将“打开视口”的对象之前。
示例代码
以下是一个使用 @storybook/addon-viewport 库的 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- -------------------
------ - -------- - ---- ------------------------
------ - ------ - ---- -----------
------------------- -------
----------------
----- -
------- -----
--
--------- -
---------- -
-------- -
----- ------- ---
------- -
------ --------
------- --------
--
--
-------- -
----- ------- ---
------- -
------ --------
------- --------
--
--
-------- -
----- ------- ---
------- -
------ --------
------- --------
--
--
--------- -
----- ------- ----
------- -
------ --------
------- --------
--
--
--
---------------- ----------
--
--
---------- ------ -- -- -
------------- ---------------
---在此示例中，我们将 Button 组件放在各种配置下的模拟设备上进行了展示。我们使用了默认值为 iphone5 的视口，它尺寸为 320px x 568px。
@storybook/addon-viewport 工具可以帮助我们迅速切换不同的屏幕尺寸来观察展示效果，从而确保组件在各种设备上都有良好的展示效果。
总结
在本文中，我们介绍了如何使用@storybook/addon-viewport 工具来预览组件在不同显示屏幕下的展示效果，同时提供了示例代码和配置信息。该工具在前端开发工作中非常实用，我们希望这篇文章可以帮助您更好地使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/128096