npm 包 @beisen-platform/empty-component 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

@beisen-platform/empty-component 是一个基于 React 开发的空白组件，可以快速实现页面空状态的展示效果。它提供了丰富的可配置项，方便用户根据实际需求进行自定义。

该组件适用于各类 Web 项目，尤其适用于那些需要为多种状态下展示不同信息的场景。使用 @beisen-platform/empty-component 可以减轻开发者的工作量，提高开发效率，避免重复造轮子的情况出现。

本篇文章将详细介绍如何使用 @beisen-platform/empty-component，无论您是初学者还是有一定经验的前端开发人员，都可以轻松上手。

安装

使用 @beisen-platform/empty-component，需要先在项目中安装该包。可以通过以下命令行指令进行安装：

npm i @beisen-platform/empty-component --save

使用

基本使用方法

安装完成后，在需要使用空白组件的页面，在组件所在的上下文中引入该组件。最简单的使用方法如下所示：

import EmptyComponent from '@beisen-platform/empty-component';

<EmptyComponent />;

这个时候，你就可以在你的页面中成功使用 @beisen-platform/empty-component 了。

配置使用方法

除了基本的使用方法外，@beisen-platform/empty-component 还提供了许多可配置项。有这些可配置项能够帮助你自定义配置组件样式、文本内容、样式单元、样式覆盖等。

下面我们再来模拟一个有数据为空白状态的页面，更改 @beisen-platform/empty-component 默认的展示：

import EmptyComponent from '@beisen-platform/empty-component';

<EmptyComponent
  title="暂无数据"
  subTitle="当前无数据，请稍后再试"
  description="数据结果为空，请检查搜索条件后再试。"
  image="https://cdn.jsdelivr.net/gh/amazing-dj/test-picture/img-01.png"
/>;

现在，@beisen-platform/empty-component 就展示为我们自己设定的样式单元了。

可配置项

@beisen-platform/empty-component 提供了一些可配置项。可以根据实际需要来自定义修改一些页面元素。

`title`

接收一个字符串类型的参数，用于修改空白组件标题的内容。当这项参数不传入时，则以默认文案 “无数据” 来展示。

<EmptyComponent title="空状态标题" />;

`subTitle`

接收一个字符串类型的参数，用于修改空白组件子标题的内容。当这项参数不传入时，则以默认文案 “当前无数据，请稍后再试” 来展示。

<EmptyComponent subTitle="空状态子标题" />;

`description`

接收一个字符串类型的参数，用于修改空白组件描述文案的内容。当这项参数不传入时，则以默认文案 “数据结果为空，请检查搜索条件后再试。” 来展示。

<EmptyComponent description="空状态描述文案" />;

`image`

接收一个字符串类型的参数，用于修改空白组件展示的图片。当这项参数不传入时，则以默认图片（云朵状）来展示。

<EmptyComponent image="https://cdn.jsdelivr.net/gh/amazing-dj/test-picture/img-01.png" />;

`imageSize`

imageSize 接收一个数字类型的参数，用于设置图片尺寸。当这项参数不传入时，则以默认尺寸展示。

<EmptyComponent imageSize={150} />;

`onClick`

接收一个函数类型的参数，用于设置组件的点击事件。当这项参数不存在或未定义时，则不会触发点击事件。

const handleClick = () => {
  console.log('组件被点击啦！');
};

<EmptyComponent onClick={handleClick} />;

使用示例

以下是一个完整的，基于 React 的 @beisen-platform/empty-component 示例。你可以通过修改相关参数来达到自定义配置展示的目的。

-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- -----------------------------------

----- ----------- - -- -- -

  ----- ----------- - -- -- -
    -----------------------
  --

  ------ -
    ---------------
      --------------
      --------------------
      ---------------------------------------------
      ----------------------------------------------------------------------
      ---------------
      ---------------------
    --
  --
--

------ ------- ------------

结语

本篇文章对 @beisen-platform/empty-component 的安装、基本使用方法与可配置项做了详细介绍。使用 @beisen-platform/empty-component 相当简单，只需要引入，并进行参数配置等步骤即可。

使用 @beisen-platform/empty-component 有助于提高开发效率，避免在页面空状态的制作上浪费过多时间。同时，可配置项的使用也让页面展示效果逐渐与众不同，使其与业务场景更加契合。

希望本篇文章的介绍能够帮助到前端开发者，提高大家的工作效率，更好地完成每一项任务。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/161006