leihong-ui-01 是一款针对前端开发的 UI 组件库，它包含了多种实用的 UI 组件，如按钮、表单、弹窗等。本文将介绍如何使用 leihong-ui-01。
安装
你可以通过 npm 安装 leihong-ui-01，在终端中输入以下命令进行安装：
npm install leihong-ui-01 --save
引入
使用 leihong-ui-01 前，需要在 JavaScript 中引入它。可以用以下方式声明依赖：
import LeihongUI from 'leihong-ui-01';
在使用的页面中，你可以直接使用该组件库的 UI 组件。
组件列表
以下是 leihong-ui-01 中包含的一些组件，以及它们的使用说明。
Button
Button 组件是一个按钮组件，它支持设置多种样式、大小、以及点击事件。
在 import 后，你可以在 Vue 组件中使用该组件（假设你用的是 Vue）:
<leihong-button color="primary" size="medium" @click="handleClick">Click me</leihong-button>
Options
- color - 按钮颜色，取值有
primary、secondary、success、warning、danger和info，默认为primary。 - size - 按钮大小，取值有
small、medium、large，默认为medium。
Events
- click - 点击事件，返回一个事件对象。
Input
Input 组件是一个输入框组件，它支持多种样式和输入类型，例如文本、密码和数字等。
<leihong-input type="text" placeholder="Please enter username" />
Options
- type - 输入类型，取值有
text、password和number。 - placeholder - placeholder 占位符，即输入框提示文本。
Modal
Modal 组件是一个弹窗组件，它支持多种 trigger 事件和内容模板。
<leihong-modal trigger="click" title="Modal Title">
<p>This is some content in modal.</p>
<template slot="footer">
<leihong-button color="primary" @click="handleOK">OK</leihong-button>
<leihong-button @click="handleClose">Close</leihong-button>
</template>
</leihong-modal>Options
- trigger - 触发方式，取值有
click和hover，默认为click。 - title - 弹窗标题。
Events
- opened - 弹窗打开事件，返回一个事件对象。
- closed - 弹窗关闭事件，返回一个事件对象。
示例代码
下面是一个使用 leihong-ui-01 的代码示例：
-- -------------------- ---- -------
----------
-----
---------- ---------
--------------- --------------- ------------- -------------------------- -------------------
--------- ---------
-------------- ----------- ------------------- ----- --------- --
--------- ---------
-------------- --------------- ------------ -------
------- -- ---- ------- -- ----------
--------- --------------
--------------- --------------- -------------------------------------
--------------- -------------------------------------------
-----------
----------------
------
-----------
--------
------ --------- ---- ----------------
------ ------- -
----------- -
-------------- -----------------
------------- ----------------
------------- ----------------
----------------- --------------------
------------------- ----------------------
--
-------- -
------------- -
------------------- ----------
--
---------- -
------------------ -- ----------
--
------------- -
------------------ ----- ----------
--
--
-
---------通过以上介绍，我们可以看到在使用 leihong-ui-01 时，只需要 import 对应的模块即可，非常方便。同时，我们还可以根据组件的选项和方法来个性化定制我们的组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d730d0927023822e16