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 包 corestore 使用教程

    什么是 corestore? corestore 是一个基于 Hypercore 和 Hyperdrive 的 npm 包。它提供了一种创建和管理多个 Hypercores 和 Hyperdrives...

    5 年前
  • npm 包 @avro/types 使用教程

    什么是 Avro Apache Avro 是一种数据序列化系统,可用于跨语言和平台的数据交换。 Avro 提供了一种定义数据结构的方式,并且支持自描述。这意味着可以使用 Avro 来在不同的编程语言之...

    5 年前
  • npm 包 kappa-view-level 使用教程

    前言 Kappa-view-level 是一款适用于基于级别存储的 Kappa 架构的视图层,它是基于 kappa-view 和 level 实现的。本文将介绍 kappa-view-level 的使...

    5 年前
  • npm 包 kappa-core 使用教程

    随着前端技术的不断发展,npm 包成为了前端开发中必不可少的一部分。其中,kappa-core 是一款非常实用的 npm 包,可以帮助前端开发人员快速构建一个拥有核心功能的 Web 应用程序。

    5 年前
  • npm 包 charwise 使用教程

    在前端开发中,我们经常需要对数据进行排序、搜索、筛选等操作。而在这些操作中,字符串比较是一个非常基础的需求。在 JavaScript 中,我们可以使用内置的 String.prototype.loca...

    5 年前
  • npm 包 @jimpick/dat-log 使用教程

    简介 @jimpick/dat-log 是一个用于浏览 DAT 协议数据的 Web 应用程序。它通过连接到一个 dat-node peer,读取内容并使用 React 渲染到页面上。

    5 年前
  • 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 年前

相关推荐

    暂无文章