npm 包 @beisen-platform/platform-pop-component 使用教程

阅读时长 3 分钟读完

前言

在前端开发过程中,我们常常需要使用不同的组件来完成页面的设计和构建。这些组件有时需要自己编写,但很多时候我们可以直接使用已经成熟的组件库来提高我们的开发效率。今天我们要介绍的就是一款由贝聿铭前端团队开发的组件库 npm 包 @beisen-platform/platform-pop-component,这个组件库提供了各种常见的弹框组件。

安装

首先你需要在你的项目中安装 npm 包 @beisen-platform/platform-pop-component:

安装完成后,你就可以在你的项目中使用该组件库了。

使用

1. 引入组件

由于这个组件库是一个包含多个组件的库,因此你需要从这个库中引入你需要使用的具体组件。在引用组件之前,你需要先引入样式文件:

2. 使用组件

该组件库中包含多个弹窗组件,下面以 DialogButton 组件为例,展示如何使用该组件。

在你需要使用 DialogButton 的地方,你可以这样写:

其中 text 表示按钮上显示的文本, title 表示弹窗的标题, description 表示弹窗的详细描述。onOkonCancel 分别表示用户点击确认和取消按钮时需要执行的具体逻辑。

除了 DialogButton 组件外,该组件库还包含了其它常用的弹窗组件,比如 Modal、Tooltip 等,你可以根据自己的需求选择合适的组件使用。

示例代码

下面是一个完整且可运行的使用示例:

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

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

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

总结

通过本文,你已经对 npm 包 @beisen-platform/platform-pop-component 有了一定的了解,并且学习了如何使用该组件库及其其中的弹窗组件。使用该组件库可以帮助我们快速构建各种常见弹框,提高我们的开发效率。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/beisen-platform-platform-pop-component