简介
pjh-ui 是一款基于 vue.js 开发的前端 UI 组件库，使用 npm 进行安装和引入。pjh-ui 组件库提供了一系列丰富的常用 UI 组件，包括：按钮、输入框、表单、消息提示、弹出框、分页等等。
安装
使用 npm 安装 pjh-ui，命令如下：
npm install pjh-ui
引入
在 vue 项目中，可以在 main.js 文件中全局引入 pjh-ui：
import Vue from 'vue'; import PjhUi from 'pjh-ui'; import 'pjh-ui/dist/pjh-ui.css'; Vue.use(PjhUi);
组件列表
以下是 pjh-ui 组件库提供的组件列表：
- Button 按钮
- Input 输入框
- Form 表单
- Alert 消息提示
- Modal 弹出框
- Pagination 分页
组件使用
Button 按钮
使用 Button 组件，可以快速创建多种样式的按钮，使用示例如下：
<template> <pjh-button>默认按钮</pjh-button> <pjh-button type="primary">主要按钮</pjh-button> <pjh-button type="dashed">虚线按钮</pjh-button> <pjh-button type="danger">危险按钮</pjh-button> </template>
Input 输入框
使用 Input 组件，可以创建多种类型的输入框，例如文本框、密码框、数字框等。使用示例如下：
-- -------------------- ---- -------
----------
---------- ------------------------------
---------- --------------- -------------------------------
-----------
--------
------ ------- -
------ -
------ -
-------- ---
--------- --
--
-
-
---------Form 表单
使用 Form 组件，可以快速创建表单，例如登录表单、注册表单等。使用示例如下：
-- -------------------- ---- -------
----------
--------- ---------- ------------- ---------------
-------------- ----------- ----------------
---------- ------------------------------------
----------------
-------------- ---------- ----------------
---------- --------------- ------------------------------------
----------------
---------------
----------- -------------- ---------------------------------
----------------
-----------
-----------
--------
------ ------- -
------ -
------ -
----- -
--------- ---
--------- --
--
------ -
--------- -- --------- ----- -------- --------- -------- ------ ---
--------- -- --------- ----- -------- -------- -------- ------ --
-
--
--
-------- -
---------- -
------------------------------ -- -
-- ------- -
--------------
- ---- -
--------------
------ ------
-
---
-
-
--
---------Alert 消息提示
使用 Alert 组件，可以创建多种样式的消息提示框，例如成功提示、失败提示等。使用示例如下：
<template> <pjh-alert type="success" message="操作成功"></pjh-alert> <pjh-alert type="error" message="操作失败"></pjh-alert> </template>
Modal 弹出框
使用 Modal 组件，可以创建多种类型的弹出框，例如确认框、提示框等。使用示例如下：
-- -------------------- ---- -------
----------
----------- -------------- -------------------------------------
---------- ------------------------
-- -----------------------
-- ---------------------------------
---- ------------------
----------- --------------- - ----------------------
----------- -------------- ---------------------------------
------
------------
-----------
--------
------ ------- -
------ -
------ -
-------- -----
--
--
-------- -
----------- -
------------ - -----
--
---------- -
--------------
------------ - ------
-
-
--
---------Pagination 分页
使用 Pagination 组件，可以快速创建分页控件，使用示例如下：
-- -------------------- ---- -------
----------
--------------- -------------------------------- ------------------------------
-----------
--------
------ ------- -
------ -
------ -
------------ -
--
-
--
---------总结
本文介绍了 pjh-ui 的安装和引入，以及常用的组件使用方法。在实际项目中，可以灵活使用 pjh-ui 提供的组件，提升前端开发效率，减少代码量，同时使页面更具美观性和交互性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005777b81e8991b448ead5d