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

简介

@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

阅读全文

猜你喜欢

  • npm 包 appapp 使用教程

    npm 是前端工程师必不可少的工具之一，而 npm 包 appapp 是一个十分实用的 npm 包，它可以轻松地帮你生成可嵌入手机 APP 的 HTML5 应用。 安装使用 首先，我们需要在项目的根目...

    2 年前
  • npm 包 @jasoeight/bootstrap-material-design 使用教程

    在前端开发中，使用 Bootstrap 可以加速我们的开发过程，而使用 Material Design 可以让我们的界面更加美观。@jasoeight/bootstrap-material-desig...

    2 年前
  • NPM 包 Eggs-benny 的使用教程

    Eggs-benny 是一个前端开发者常用的 NPM 包，主要用于构建多页面应用程序。在本文中，我们将介绍 Eggs-benny 的安装、配置及用法，并提供相关示例代码，以供学习和参考。

    2 年前
  • npm 包 gulp-graybullet-asciidoctor 使用教程

    在前端开发中，我们常常需要将 AsciiDoc 格式的文档转换成 HTML 格式以供网站显示。而转换工具中的 gulp-graybullet-asciidoctor 包则是一种非常方便的工具，可以快速...

    2 年前
  • npm 包 cordova-plugin-amap-navi 使用教程

    前言 cordova-plugin-amap-navi 是一款基于高德地图的导航插件，可以帮助开发者在 Cordova 应用中集成导航功能。本篇文章将详细介绍该插件的使用方法，并提供示例代码参考。

    2 年前
  • npm 包 is-in-view 使用教程

    is-in-view 是一个非常有用的 npm 包，它可以用来检测元素是否在浏览器窗口中可见。在页面滚动过程中，我们可能需要做一些特定的处理来提高用户体验，比如：加载更多数据、懒加载图片等。

    2 年前
  • npm 包 tiny-event-emitter 使用教程

    在前端开发中，事件机制是一个非常重要的概念，它可以帮助我们更好地处理各种异步事件。而 tiny-event-emitter 这个 npm 包就是一个可以帮助我们实现事件机制的工具。

    2 年前
  • npm包sketch-module-console-polyfill使用教程

    在使用Sketch开发插件的过程中，我们往往会使用到Sketch的自带控制台输出方法console.log()来打印信息。但是在Sketch早期版本中，它的console对象缺乏一些标准的打印方法，比...

    2 年前
  • npm 包 storage-mock 使用教程

    在前端开发中，经常会使用浏览器的 Web Storage API 来实现本地存储。对于单元测试以及开发初期，我们可能需要使用一个本地存储的模拟器来进行测试。在这种情况下，一个名为 storage-mo...

    2 年前
  • npm 包 ember-cli-deploy-redis-publish-revision 使用教程

    前言 在现代 web 开发中，持续集成和部署已经成为非常重要的一部分。而 Ember 作为一款流行的前端框架，也不例外。在 Ember 中，使用 ember-cli-deploy 工具可以轻松实现持续...

    2 年前
  • npm 包 gumga-query-action-ng 使用教程

    npm 是全球最大的开源软件包管理系统，它提供了丰富的开源 JavaScript 库和工具。gumga-query-action-ng 是一个用于 AngularJS 应用程序的 npm 包，它提供了...

    2 年前
  • npm 包 nonin-3230-ble 使用教程

    nonin-3230-ble 是一个基于蓝牙的医疗设备，可以通过蓝牙协议与前端应用程序进行连接，并获取实时的生理参数数据。这个 npm 包提供了一系列的 API，可以帮助你获取到这些参数数据。

    2 年前
  • npm 包 sketch-expander 使用教程

    在前端开发过程中，有时候需要将设计师提供的 Sketch 设计稿转化为开发所需的代码。而这样的转化可以通过使用 sketch-expander 这个 npm 包来实现。

    2 年前
  • 介绍 spidey-heart

    在前端开发中，npm 包是极其常见的工具之一。而 spidey-heart 就是一款非常实用的 npm 包。 spidey-heart 是一款基于 Vue.js 的自定义验证指令工具。

    2 年前
  • npm 包 wrap-component-with-valour 使用教程

    在前端开发中，我们经常需要对组件进行一些通用的逻辑封装，比如对用户登录状态的检测、对表单的校验等等。而每次手动编写这些通用逻辑是非常繁琐且容易出错的。 为了解决这个问题，我们可以使用 npm 包 wr...

    2 年前
  • npm 包 bitcore-message-pivx 使用教程

    简介 bitcore-message-pivx 是一个基于 bitcore-message 的针对 PIVX 加密货币的 npm 包。它提供了一个简单易用的 API，可以用来签署和验证 PIVX 交易...

    2 年前
  • npm 包 net-localgroup 使用教程

    简介 net-localgroup 是一个 npm 包，可以让你方便地在本地管理本机的用户组，它提供了一系列的 API，可以让你增加、删除、查询本机用户组等操作。 此外，它还提供了一些附加功能，如获取...

    2 年前
  • npm 包 fis3-lint-iot-eslint 使用教程

    前言 随着前端开发的不断升级，代码质量越来越受到重视。而 eslint 作为目前比较流行的代码检测工具，可以帮助我们自动检测代码中的错误和不规范的写法，提高代码的质量和可维护性。

    2 年前
  • npm 包 node-th-cached-request 使用教程

    在前端开发中，经常需要向后台请求数据。但是，每次请求数据都需要和后台进行一次网络交互，这无疑会造成很多不必要的等待时间。为了解决这个问题，可以使用缓存技术，将已经请求过的数据缓存下来，下次请求相同的数...

    2 年前
  • npm 包 gulp-vg 使用教程

    前言 在前端开发中，自动化工具已经成为必不可少的一部分。Gulp 是自动化工具中非常流行的一个，它的插件库也相当丰富。其中一个叫做 gulp-vg 的插件，它可以方便地将 SVG 图标转换为包含 in...

    2 年前

相关推荐

    暂无文章