简介
npm 包 ea-iview 是一个基于 iview UI 组件库的扩展组件库，该库中的组件封装了很多经验丰富的前端开发者在实际项目中遇到的经典问题的解决方案。它能够极大地节约开发时间，提高开发效率。
安装
你可以使用 npm 命令来安装 ea-iview:
npm install ea-iview
使用
引入组件
首先，你需要引入组件，以 Button 组件为例：
import eaButton from 'ea-iview/components/ea-button/index.vue'
在模板中使用组件:
<template>
<ea-button type="primary">Primary</ea-button>
</template>如果你想要全局使用该组件，可以在入口文件中引入并挂载到 Vue 的原型对象上，这样你就可以在任何组件中使用它了：
import Vue from 'vue' import eaButton from 'ea-iview/components/ea-button/index.vue' Vue.prototype.$eaButton = eaButton
组件列表
ea-button
用法:
<ea-button>内容</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
用法:
<ea-form :itemList="itemList" :model="model" :inline="inline"></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
用法:
<ea-modal :visible="isModalVisible" :title="modalTitle" :width="modalWidth" @ok="handleOk" @cancel="handleCancel">
<!-- 模态框内容 -->
<p>我是模态框内容</p>
</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