npm 包 @nylira/vue-modules 使用教程

阅读时长 7 分钟读完

简介

@nylira/vue-modules 是一个 Vue.js 的插件,它提供了一些常用的功能模块,比如 loading、message、dialog、toast 等。使用 @nylira/vue-modules 可以方便快捷地添加这些功能到你的 Vue.js 项目中。

安装

@nylira/vue-modules 可以通过 npm 安装,使用以下命令:

使用

使用 @nylira/vue-modules 非常简单。

引用

在 Vue 组件中,可以通过以下方式引用 @nylira/vue-modules:

使用组件

引用了 @nylira/vue-modules 后,即可使用其中提供的组件了。以下是一些示例:

loading

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

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

message

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

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

dialog

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

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

toast

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

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

配置

可以通过 Vue.use() 传递配置对象来配置 @nylira/vue-modules。以下是一些示例:

自定义 message 样式

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

自定义 dialog 样式

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

API

@nylira/vue-modules 提供了一些 API,可以在组件中使用。以下是一些示例:

message

dialog

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

toast

结语

@nylira/vue-modules 是一个非常实用的 Vue.js 插件,它提供了一些常用的功能模块,能够大大提高开发效率。希望本篇文章能够对大家的学习和开发工作有所帮助。

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

纠错
反馈

纠错反馈