npm 包 ea-iview 使用教程

简介

npm 包 ea-iview 是一个基于 iview UI 组件库的扩展组件库，该库中的组件封装了很多经验丰富的前端开发者在实际项目中遇到的经典问题的解决方案。它能够极大地节约开发时间，提高开发效率。

安装

你可以使用 npm 命令来安装 ea-iview:

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

使用

引入组件

首先，你需要引入组件，以 Button 组件为例：

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

在模板中使用组件:

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

如果你想要全局使用该组件，可以在入口文件中引入并挂载到 Vue 的原型对象上，这样你就可以在任何组件中使用它了：

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

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

组件列表

ea-button

用法:

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

属性:

属性 类型 默认值 描述
type String default 按钮的类型，可选值有 default、primary、success、warning、danger、info
size String default 按钮的尺寸，可选值有 large、small
icon String 无 按钮的图标 CSS 类名
loading Boolean false 按钮是否处于加载状态
disabled Boolean false 按钮是否被禁用
shape String default 按钮的形状，可选值有 circle 、round、square
long Boolean false 按钮是否使用长格式，长格式会增加按钮的宽度

ea-form

用法:

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

属性:

属性 类型 默认值 描述
itemList Array [] 表单项列表，列表中的每个元素是一个配置对象，对象结构见下方
model Object {} 表单的数据模型，会自动绑定到表单中的表单控件，格式为 { fieldName: fieldVal }
inline Boolean false 表单是否为行内布局

下面是一个表单项的配置对象的结构：

属性 类型 默认值 描述
label String 无 表单项的标题
field String 无 表单项对应的字段名
type String input 表单项的类型，可选值有 input、radio、checkbox、select、date-picker
rules Array | Object 无 表单项的验证规则
options Array 无 表单项的选项列表，只适用于 radio、checkbox、select
dateOptions Object 无 表单项为日期选择器时的选项

下面是一个示例：

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

ea-modal

用法:

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

属性:

属性 类型 默认值 描述
visible Boolean false 模态框是否可见
title String 无 模态框标题
width Number 520 模态框宽度
okButton Boolean true 是否显示确定按钮
cancelButton Boolean true 是否显示取消按钮

事件:

事件 参数 描述
ok 无 点击确定按钮时触发，会自动隐藏模态框并触发此事件，回调函数可选
cancel 无 点击取消按钮时触发，会自动隐藏模态框并触发此事件，回调函数可选
close 无 模态框被关闭时触发，包括确定、取消、点击模态框以外区域隐藏模态框等情况，回调函数可选

示例代码

下面是一个完整的示例代码，展示了如何使用 ea-iview 中的组件：

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

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

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

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006725e3660cf7123b3640f

阅读全文

猜你喜欢

  • NPM 包 gulp-slang 使用教程

    前言 gulp-slang 是一个用于在 gulp 构建系统中运行 Slang 的 NPM 包。Slang 是微软开发的一种领域专用语言 (DSL)，用于简化数据处理和转换。

    4 年前
  • npm 包 laoyi 使用教程

    前言 在前端开发中，npm 包是不可或缺的一部分，它们可以帮助我们更快，更好地完成项目开发。但是，由于市面上的 npm 包极之繁多，选择适合自己的包并不容易，这就需要一定的筛选和学习的过程。

    4 年前
  • npm 包 @web3/buzz 使用教程

    简介 @web3/buzz 是一个基于 web3.js 的库，用于订阅以太坊网络事件，对于需要实时获取以太坊网络事件的前端应用非常有用。 安装 使用 npm 进行安装： --- ------- ---...

    4 年前
  • npm 包 salve 使用教程

    前言 在前端开发中，我们时常需要对字符串进行处理，比如去除多余的空格、将字符串转为大写、将字符串进行编码等等。这时候，我们需要使用一些字符串相关的工具库来帮助我们处理这些任务。

    4 年前
  • npm 包 jayson-db 使用教程

    jayson-db 是一个简单易用的 npm 包，它为开发者提供了一种方便快捷地管理本地 JSON 数据库的方法。通过 jayson-db，我们可以轻松地创建、查询、更新、删除本地的 JSON 数据。

    4 年前
  • npm 包html-reporter-mobile-test使用教程

    简介 html-reporter-mobile-test是一个基于Mocha和Chai的HTML测试报告生成器，它能够运行并测试Web页面、移动端应用以及Hybrid应用。

    4 年前
  • 使用 @fereactproject/react-data-grid-no-style 的教程

    前言 在前端开发中，表格展示是一个非常常见的需求。React Data Grid 是一个非常强大的表格组件库。但是，他自带的样式会影响到我们的页面整体样式。这时候，@fereactproject/re...

    4 年前
  • npm 包 sails-hook-uploads 使用教程

    前言 随着互联网技术的快速发展，Web 应用程序的图片上传功能越来越普遍。然而，开发者在实现图片上传过程中往往面临许多挑战。例如，如何实现有效的图片管理、如何在多种文件上传方式中进行区分等等。

    4 年前
  • npm 包 hubot-ping-thread 使用教程

    介绍 hubot-ping-thread 是一个针对 Hubot 的 npm 包，可以在讨论线程中发送“ping”消息，并做出响应。该包功能强大，易于实现，更适合用于协同工作场合中。

    4 年前
  • npm 包 tsv-reader 使用教程

    TSV (Tab-Separated Values) 是一种常用的数据格式，通常用来存储表格数据。在前端开发中，我们经常需要处理 TSV 文件数据，tsv-reader 就是一个方便快捷地读取 TSV...

    4 年前
  • npm 包 Janus.Framework.Indexer 使用教程

    在前端开发中，我们经常需要使用一些工具来帮助我们完成一些重复性的工作。今天，我要介绍的是一个非常实用的工具——npm 包 Janus.Framework.Indexer。

    4 年前
  • npm 包 react-dom-components 使用教程

    如果你是一名前端工程师，那么你肯定知道 npm 是什么。npm 是一个包管理器，它允许开发人员发布和共享可重用的代码。在这篇文章中，我们将介绍一个 npm 包：react-dom-components...

    4 年前
  • npm 包 @pedro-rodalia/cache 使用教程

    在前端开发中，我们需要使用各式各样的 npm 包来提高代码的效率与质量。其中，@pedro-rodalia/cache 是一款非常实用的缓存库，本文将为大家详细介绍该库的使用教程，帮助大家更好地了解和...

    4 年前
  • npm 包 percentage-diff 使用教程

    在前端开发中，我们通常需要计算一个数值相比于另一个数值的增长或者减少百分比。npm 包 percentage-diff 可以帮助我们轻松地完成这一任务。 1. 安装 percentage-diff 可...

    4 年前
  • npm 包 mindmint-common 使用教程

    在前端开发中，我们经常会使用一些第三方的库来提升开发效率和质量。其中，npm 是当前最流行的第三方包管理工具之一。而 mindmint-common 则是一个非常实用的 npm 包，它提供了许多常用的...

    4 年前
  • npm 包 nega-editable-text 使用教程

    简介 nega-editable-text 是一个基于 React 开发的可编辑文本组件。它提供了简单易用的 API，通过使用这个组件，你可以让用户直接在网页上进行文本编辑。

    4 年前
  • npm包@whinc/web-console的使用教程

    简介 在前端开发的过程中，控制台(console)是非常重要的一个工具。它可以帮助我们输出程序的运行结果、调试程序、分析错误等等。但是在某些场景下，控制台并不是十分方便和易用。

    4 年前
  • npm 包 statsd-lambda 使用教程

    在前端的开发过程中，我们需要对应用进行监控与统计，以便及时发现和解决问题。而 NPM 中的 statsd-lambda 包便是一个为 AWS Lambda 设计的统计工具。

    4 年前
  • NPM包GraphQL-Stitcher使用教程

    GraphQL是一种先进的查询语言，用于API的构建和查询数据，已经成为现代Web API的首选方案之一。而GraphQL的一个重要特点是能够将多个API（或者说服务）组合成一个API，从而实现任意查...

    4 年前
  • npm 包 react-dynamic-input 使用教程

    在前端开发中，我们经常需要动态生成表单元素以及对用户输入的响应。React-dynamic-input 是一个可以轻松生成各种类型的动态表单元素的 npm 包。本文将为大家介绍 react-dynam...

    4 年前

相关推荐

    暂无文章