前言
在前端开发中，构建一个优秀的组件库尤为重要。在构建组件时，新人或者没太多经验的同学往往重复造轮子，浪费了大量的时间和精力。为了解决这个问题，现在有很多成熟的组件库可以直接拿来使用，比如 iView、Element UI 等。
在这里，我们想向大家推介一个新的组件库- nuomi-ui，这是一款由百度团队独立开发的Javascript组件库，涵盖了诸多常用的移动端UI组件，如下拉菜单、弹出框、底部导航、搜索框等。该库主要目的是减少前端工程师的工作量，同时兼顾用户体验和代码质量。
安装 nuomi-ui
安装 nuomi-ui 非常简单，只需要使用 npm 命令即可：
npm install nuomi-ui --save
或者使用 yarn 安装：
yarn add nuomi-ui
使用 nuomi-ui
安装好之后，就可以在工程中使用 nuomi-ui 了。首先，在你的项目中引入 nuomi-ui，可以使用以下方式：
-- -------------------- ---- ------- -- ---- ------ ------- ---- ---------- ---------------- -- ---- ------ - ------- ------ - ---- ---------- -------------------------- ------- -------------------------- -------
引入成功之后，你就可以在项目中使用 nuomi-ui 的官方组件了。
官方组件
这里我们介绍一些官方推荐的组件:
Button
该组件是一个基本的按钮组件，它有以下属性：
- type: String，用于指定按钮的类型，可以是 primary、success、warning、danger、info，默认是 primary。
- size: String，用于指定按钮的大小，可以是 large、normal、small、mini，默认是 normal。
- disabled: Boolean，用于禁用按钮。
- loading: Boolean，用于显示加载状态。
以下示例代码展示了 Button 如何使用：
-- -------------------- ---- -------
----------
-----
---------- ---------------------- ------------------
---------- ---------------------- ------------------
---------- ---------------------- ------------------
---------- -------------------- ------------------
---------- ---------------- ------------------
---------- ------------------ ------------------
---------- -------------------- ------------------
---------- ------------------ ------------------
---------- ---------------- ------------------
---------- ----------------- ------------------
---------- --------------- ------------------
------
-----------Dialog
该组件是一个弹出框组件，它具有以下属性：
- title: String，用于指定弹出框标题。
- visible: Boolean，用于控制弹出框是否可见。
- width: String，用于指定弹出框的宽度，默认是 520px。
- height: String，用于指定弹出框的高度，默认是 auto。
- ok-text: String，用于指定 ok 按钮的文本值，默认是 '确定'。
- cancel-text: String，用于指定 cancel 按钮的文本值，默认是 '取消'。
以下示例代码展示了 Dialog 如何使用：
-- -------------------- ---- -------
----------
-----
---------- -------------------------- ------------------
---------- ---------------------
---- -------------------- ------------
--------- -----------
---- --------------
---------- ------------ - -------------------------
---------- -------------- ------------ - ---------------------
------
------------
------
-----------
--------
------ ------- -
------ -
------ -
----- -----
-
--
-------- -
------------ -
--------- - ----
-
-
-
---------Dropdown
该组件是一个下拉组件，它具有以下属性：
- placement: String，用于指定下拉的位置，可以是 top、top-start、top-end、bottom、bottom-start、bottom-end、left、left-start、left-end、right、right-start、right-end，默认是 bottom。
- trigger: String，用于指定下拉的触发方式，可以是 click、hover，默认是 click。
- visible: Boolean，用于控制下拉菜单是否可见。
以下示例代码展示了 Dropdown 如何使用：
-- -------------------- ---- -------
----------
-----
-------------
---------- ---------------------- ------------------
------------------
-------------------------- ---- --------------------
-------------------------- ---- --------------------
-------------------------- ---- --------------------
-------------------
--------------
----
------------ ---------------------- ----------------
---------- ------------------- --------------
------------------
-------------------------- ---- --------------------
-------------------------- ---- --------------------
-------------------------- ---- --------------------
-------------------
--------------
------
-----------Toast
该组件是一种消息提示框组件，它有以下属性：
- type: String，用于指定消息提示框类型，可以是 success、warning、info、error，默认是 info。
- message: String，用于指定消息框显示的信息。
- duration: Number，用于指定消息框显示的时间，默认是 3000 毫秒。
- position: String，用于指定消息框的位置，可以是 top、middle、bottom，默认是 middle。
以下示例代码展示了 Toast 如何使用：
-- -------------------- ---- -------
----------
-----
---------- ------------------------- -----------------
------
-----------
--------
------ ------- -
-------- -
----------- -
-------------
-------- ----- -- - ----- ----------
--------- -----
--------- --------
--
-
-
-
---------结束语
以上介绍了 nuomi-ui 的一些基本使用方法和官方组件，为大家解决了开发中常见的一些问题，希望这篇文章对你有帮助。同时，也鼓励大家多去拓展自己的组件库，提高自己的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558a481e8991b448d5f57