什么是 anno-ui
anno-ui 是一个基于 Vue.js 的 UI 组件库，提供了一系列常用的 UI 组件，如按钮、弹窗、表格等。
安装 anno-ui
可以通过 npm 进行安装：
npm install anno-ui --save
使用 anno-ui
引入 anno-ui
import Vue from 'vue'; import AnnoUI from 'anno-ui'; Vue.use(AnnoUI);
使用组件
组件使用方式和普通的 Vue.js 组件一样。
-- -------------------- ---- -------
----------
------------ -------------------------------------
-----------
--------
------ ------- -
-------- -
------------- -
----------------------
--
--
--
---------自定义主题
可以通过在项目中引入 scss 文件，覆盖默认变量来自定义主题。
// 替换主色调 $primary-color: #f40; // 引入 anno-ui 样式 @import '~anno-ui/dist/anno-ui.css';
组件列表
AnnoButton 按钮
按钮组件，提供一系列按钮类型。
- primary：主要按钮
- success：成功按钮
- warning：警告按钮
- danger：危险按钮
- link：链接按钮
<anno-button type="primary">主要按钮</anno-button> <anno-button type="success">成功按钮</anno-button> <anno-button type="warning">警告按钮</anno-button> <anno-button type="danger">危险按钮</anno-button> <anno-button type="link">链接按钮</anno-button>
AnnoModal 弹窗
弹窗组件，提供一系列弹窗类型。
- alert：警告弹窗
- confirm：确认弹窗
- prompt：输入弹窗
-- -------------------- ---- -------
----------- ------------ ----------------------- ---------- ------------------ -------------------------------
----------- -------------- ----------------------- ---------- ----------------- ----------------- ------------------------------
----------- ------------- ----------------------- ---------- ---------------- ----------------------------- ----------------- ------------------------------
---
------ -
------ -
-------- ------
------------- -
------------ ---------
------ ---
--------- ------- -- -
-- -------- -
------ ----------
-
-
-
-
-AnnoTable 表格
表格组件，提供基本的表格功能。
-- -------------------- ---- -------
----------- ----------------- ------------------------
--------- ------------- ------------- --- ---
------------ -----------------------------------------
------------ -------------------------------------------
-----------
-------------
---
------ -
------ -
---------- -
- --- -- ----- ----- ---- -- --
- --- -- ----- ----- ---- -- --
- --- -- ----- ----- ---- -- --
--
------------- -
- ------ ----- ---- ---- --
- ------ ----- ---- ------ --
- ------ ----- ---- ----- --
- ------ ----- --------- -------- --
--
--
--
-------- -
--------------- -
----------------- -----
--
----------------- -
----------------- -----
--
-总结
anno-ui 是一个方便实用的 Vue.js UI 组件库，可大大提高前端开发效率，同时也非常易于使用和定制。我们在实际项目中可以根据需求，选用合适的组件，优化用户体验，提高产品质量，受益匪浅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb081e8991b448dc4a2