npm 包 element-ui-meicloudmes 使用教程

阅读时长 6 分钟读完

前言

随着前端技术的发展,前端框架和库越来越多,但是对于企业级的应用,我们需要的不仅仅是一个简单的组件库,还需要一个符合业务场景的组件库。element-ui-meicloudmes 就是这样一个组件库,它提供了符合美云MES业务场景的一系列组件和工具。

本文将介绍 element-ui-meicloudmes 的使用方法,以及一些常用的组件和工具的示例代码。

安装

element-ui-meicloudmes 依赖于 element-ui,因此在使用之前需要先安装 element-ui。

然后安装 element-ui-meicloudmes。

使用

在使用前需要在 main.js 中引入 element-ui 和 element-ui-meicloudmes。

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

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

-------------------
------------------------------
展开代码

组件

下面我们来介绍一些常用的组件及使用方法。

MesForm

MesForm 组件是一个封装了基础的表单组件(el-form)和表单项组件(el-form-item)的组件,提供了一种快速构建表单的方式。

上面的代码中,我们通过 MesForm 组件封装了两个 MesInput 组件和一个 MesButton 组件,分别构成了一个表单。

MesTable

MesTable 组件是一个封装了基础的表格组件(el-table)和表格列组件(el-table-column)的组件,提供了一种快速构建表格的方式。

-- -------------------- ---- -------
---------- ------------------
  ----------------- ---------- -------------------------------
  ----------------- ---------- ------------------------------
  ----------------- ---------- ----------------------------------
  ----------------- -----------
    --------- -------------------
      ----------- ----------------------------------------
      ----------- ------------- ------------------------------------------
    -----------
  -------------------
------------
展开代码

上面的代码中,我们通过 MesTable 组件封装了三个 MesTableColumn 组件和一个 slot,分别构成了一个表格。

MesSelect

MesSelect 组件是一个封装了基础的下拉选择框组件(el-select)和选项组件(el-option)的组件,提供了一种快速构建下拉选择框的方式。

上面的代码中,我们通过 MesSelect 组件封装了一个标准的下拉选择框。

MesTree

MesTree 组件是一个封装了基础的树组件(el-tree)的组件,提供了一种快速构建树形结构的方式。

上面的代码中,我们通过 MesTree 组件封装了一个标准的树形组件,并且通过 node-click 事件绑定了一个点击节点时触发的回调函数。

工具

除了组件之外,element-ui-meicloudmes 也提供了一些实用的工具,下面我们来介绍一下这些工具。

MesHelper

MesHelper 提供了一些常用的操作,比如日期格式化、字符长度计算、数字千分位格式化等。

上面的代码中,我们通过导入 MesHelper 来使用其提供的常用操作。

MesRequest

MesRequest 是一个封装了 axios 的工具类,提供了一种在应用开发中方便的数据请求方式。

上面的代码中,我们通过导入 MesRequest 来使用其提供的 get 方法发送请求,并通过 then 方法处理响应结果。

结语

通过本文的介绍,我们了解了如何使用 element-ui-meicloudmes 来构建符合业务场景的组件和工具,希望读者在以后的企业级应用开发中能够更加高效地使用 element-ui-meicloudmes。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600556c681e8991b448d39a4

纠错
反馈

纠错反馈