npm 包 vue-awesome-ui 使用教程

阅读时长 10 分钟读完

前言

vue-awesome-ui 是一款基于 Vue.js 的 UI 组件库,它提供了包括按钮、表单、布局、弹框等基础组件以及图标库在内的丰富组件,并且易于扩展。本文将介绍 vue-awesome-ui 的使用方法,并提供示例代码以供参考。

安装

npm 安装:

使用

在 main.js 中引入 vue-awesome-ui:

然后就可以在组件中使用了:

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

--------
------ ------- -
  -------- -
    ------------- -
      -----------------
    -
  -
-
---------
展开代码

组件

vue-awesome-ui 提供了丰富的基础组件和图标库,下面介绍其中的几个常用组件。

Button

按钮组件,提供了多种类型和大小的按钮样式,支持禁用、加载状态等。

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

--------
------ ------- -
  ------ -
    ------ -
      -------- -----
    -
  -
-
---------
展开代码

Input

输入框组件,提供了多种类型的输入框,支持预设值、禁用、最大长度等。

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

--------
------ ------- -
  ------ -
    ------ -
      ------ --------
      ------- --
    -
  -
-
---------
展开代码

Grid

栅格组件,提供了多种布局方式,包括水平、垂直、响应式等,支持多种元素排列方式。

-- -------------------- ---- -------
----------
  -----
    -------------------
    -------
      ------ ------------- ------------------------ ----- ------- ---------------------
      ------ ------------- ------------------------ ------- ------- ---------------------
      ------ ------------- ------------------------ ----- ------- ---------------------
      ------ ------------- ------------------------ ----- ------- ---------------------
    --------
    -----------------
    ------ ----------- -----------------
      ------ ----------
        ---- ------------------------ ----- ------- -------------
        ---- ------------------------ ---------- ------- -------------
      --------
      ------ ----------
        ---- ------------------------ ------- ------- --------------
      --------
      ------ ----------
        ---- ------------------------ ----- ------- -------------
      --------
      ------ ----------
        ---- ------------------------ ----- ------- -------------
        ---- ------------------------ ------- ------- -------------
        ---- ------------------------ ----------- ------- -------------
      --------
    --------
    -------------------
    ------ -------------
      ------ -------- -------- ------- ------- --------
        ---- ------------------------ ----- ------- -------------
      --------
      ------ -------- -------- ------- ------- --------
        ---- ------------------------ ------- ------- -------------
      --------
      ------ -------- -------- ------- ------- --------
        ---- ------------------------ ----- ------- -------------
      --------
      ------ -------- -------- ------- ------- --------
        ---- ------------------------ ----- ------- -------------
      --------
    --------
  ------
-----------
展开代码

Icon

图标组件,提供了多种常用图标,并且支持自定义图标。

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

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

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

------ ------- -
  ----------- -
    ---------------
  --
  ------ -
    ------ -
      ----------- ------- -------
    -
  -
-
---------
展开代码

扩展

vue-awesome-ui 提供了丰富的扩展方法,可以自定义主题、图标库等,下面介绍其中的一些方法。

自定义主题

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

--------------------- -
  ----- -
    ------- -
      -------- -
        ------ ------
        ---------------- ------
      --
      -------- -
        ------ --------
        ---------------- ------
      --
      ------ -
        ------ -------
        ---------------- -------
        ------------ ------
      -
    -
  -
--
展开代码

自定义图标库

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

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

--------------------- -
  ----- -
    ---------- ---------------
  -
--
展开代码

总结

本文介绍了 npm 包 vue-awesome-ui 的基础组件、图标库以及扩展方法,希望读者可以通过本文了解并掌握 vue-awesome-ui 的使用技能,提高前端开发效率。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60057cbf81e8991b448ec013

纠错
反馈

纠错反馈