npm 包 digger-reception 使用教程

什么是 digger-reception?

digger-reception 是一款基于 Vue.js 的前端组件库。其中包含的组件主要是与 PC 网页应用开发相关的 UI 控件。

安装 digger-reception

可以通过以下命令安装 digger-reception:

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

使用 digger-reception

在 Vue 项目中使用 digger-reception 非常简单。只需在组件中引入所需的 digger-reception 组件即可。

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

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

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

在上面的例子中,我们同时引入了 dr-button 和 dr-dialog 两个组件。在模板中,我们只需把它们放在需要使用的位置即可。

digger-reception 组件列表

digger-reception 中包含了很多常用的组件,例如按钮、文本框、下拉菜单等。下面是完整的组件列表:

按钮组件

dr-button - 按钮组件,支持点击事件和样式配置。

输入框组件

dr-input - 输入框组件,支持常用的输入类型以及验证功能。

下拉框组件

dr-select - 下拉框组件,支持数据源、选中效果、可搜索等功能。

表格组件

dr-table - 表格组件,支持分页、排序、选择、编辑等功能。

分页组件

dr-pagination - 分页组件,支持页码跳转、上一页下一页等功能。

布局组件

dr-grid - 布局组件,支持栅格系统、响应式布局等功能。

弹窗组件

dr-dialog - 弹窗组件,支持自定义样式、关闭事件等功能。

示例代码

以下是一个简单的示例,演示了如何使用 digger-reception 中的按钮组件。

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

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

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

在上面的例子中,我们在按钮组件上设置了一个 click 事件处理函数,当用户点击按钮时会触发这个函数。函数中 alert 了一个简单的提示框用于演示。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/88153


猜你喜欢

  • npm 包 fs.promises 使用教程

    在前端开发中,我们经常需要操作文件,例如读取、写入、删除等等。Node.js 提供了内置的 fs 模块让我们可以轻松地完成这些操作。然而,这个模块的 API 是基于回调函数的,使用起来略显麻烦。

    5 年前
  • npm 包 discovery-swarm-web 使用教程

    前言 本文将介绍如何使用 npm 包 discovery-swarm-web 实现浏览器之间的 p2p 连接,同时深入探讨它的工作原理和学习价值。如果你是前端开发者且对浏览器端的 p2p 技术感兴趣,...

    5 年前
  • npm 包 beaker-error-constants 使用教程

    简介 beaker-error-constants 是一个 npm 包,它提供了一组常用的错误常量,可以在前端应用程序中方便地使用,防止在代码中出现不必要的硬编码字符串。

    5 年前
  • npm 包 @beaker/datignore 使用教程

    在使用分布式 Web 内容协议 Dat 创建网站时,一个需要注意的点是如何快速地忽略不需要下载或上传的文件。这些文件包括不想被包含在网站资料夹中的本地缓存,编辑器生成的文件等等。

    5 年前
  • npm 包@beaker/dat-session-data-ext-msg 使用教程

    前言 在 Web 开发中,前后端传递数据是必不可少的,而 @beaker/dat-session-data-ext-msg 是一个非常好的 npm 包,可以帮助我们更快更方便地实现前端和后端之间的数据...

    5 年前
  • npm 包 @beaker/dat-ephemeral-ext-msg 使用教程

    前言 在前端开发中,随着业务的不断扩展,数据传递也变得越来越复杂,需要处理的数据也越来越庞大。为此,我们需要使用各种工具来帮助我们更高效和便捷的进行开发。而其中,npm 作为 Node.js 的包管理...

    5 年前
  • npm 包 neat-spinner 使用教程

    在前端开发中,我们经常需要使用 Loading 动画来提升用户体验。使用 npm 包 neat-spinner 可以快速构建出简洁美观的 Loading 动画,本文将介绍 neat-spinner 的...

    5 年前
  • npm 包 @friendsof/spaghetti 使用教程

    介绍 @friendsof/spaghetti 是一个用于组织 Web 应用程序的模块引擎和模块加载程序。它可用于浏览器环境和 Node.js 环境,支持异步加载和动态导入模块。

    5 年前
  • npm 包 @friendsof/roll 使用教程

    随着前端技术的不断发展,现代前端开发中使用的工具和技术日益复杂。其中,npm 包成为了前端开发中不可或缺的重要组成部分。在本篇文章中,我们将为大家介绍一个 npm 包,即 @friendsof/rol...

    5 年前
  • npm 包 diffy 使用教程

    前言 在前端开发中,我们经常需要对比两个文本或者字符串之间的差异,以便于进行比较和分析。这时候,一个好用的 npm 包 diffy 就可以派上用场了。它是一个基于命令行环境下的文本对比工具,可以快速地...

    5 年前
  • npm 包 hyperdb-explorer 使用教程

    前言 在前端领域,数据管理是非常重要的一部分。然而,如何管理、储存和访问数据,一直是一个技术难题。hyperdb-explorer 是一个npm包,它提供了一种可以在前端浏览器中管理数据的方式。

    5 年前
  • npm包 `36c3-shitty` 使用教程

    在前端开发中,我们常常需要使用各种各样的npm包来辅助我们快速开发。今天,我将介绍一个npm包——36c3-shitty,它提供了一些辅助函数,让我们的前端开发更加高效。

    5 年前
  • npm包 35c3使用教程

    前言 在前端开发中,构建工具是必不可少的一部分。Npm作为Node.js的包管理器,为我们提供了很多优秀的模块和工具包,使我们的开发变得更加高效、灵活和可维护。如今,35c3成为了前端开发中一个不可或...

    5 年前
  • npm 包 34c3 使用教程

    前言 npm 是当前 Node.js 生态系统中最流行的包管理工具,它为前端开发提供了广泛的模块化解决方案。在这篇文章中,我们将介绍一个非常有用的 npm 包,它就是 34c3。

    5 年前
  • npm 包 lru 使用教程

    前言 在前端开发中,我们常常需要使用缓存以提高页面加载速度和用户体验。而 LRU 缓存则是一种常见的缓存策略。npm 上有一个名为 lru 的开源包可以帮助我们轻松地实现 LRU 缓存的操作。

    5 年前
  • npm 包 circular-append-file 使用教程

    简介 circular-append-file 是一个 Node.js 模块,用于轮番追加数据到指定文件的末尾。它支持手动设置轮番写入的数据长度,并且可以自动删除旧的数据。

    5 年前
  • npm 包 utp-native 使用教程

    什么是 utp-native utp-native 是一个基于 Node.js 为创建面向可靠且无连接的用户数据报协议(UTP)流的 npm 包。它可以让开发者在 Node.js 中方便地使用 UTP...

    5 年前
  • npm 包 length-prefixed-message 使用教程

    在前端开发过程中,我们有时需要在不同的浏览器之间传输数据。不同的浏览器对数据的处理方式不尽相同,因此我们需要一种通用的方式来处理数据。在这种情况下,我们可以使用 npm 包 length-prefix...

    5 年前
  • npm 包 discovery-channel 使用教程

    在前端开发中,使用第三方库和包是不可避免的。npm(Node Package Manager)是目前最受欢迎的 JavaScript 包管理器之一,提供了方便的安装、升级和管理第三方包的方式。

    5 年前
  • npm 包 connections 使用教程

    在前端开发中,经常需要使用 HTTP 请求来获取数据或者上传文件。而在使用 HTTP 请求时,我们需要处理请求连接、请求头、请求体等相关信息,这些操作会占用较多的开发时间。

    5 年前

相关推荐

    暂无文章