在前端开发中，UI 组件是不可或缺的一部分，可以极大地提高开发效率和用户体验。而 Element UI 是一款非常著名的前端 UI 组件库，凭借着简洁明了的设计风格和极佳的易用性，已经成为了很多项目的首选 UI 组件库。
而我的这个 npm 包 my-element-ui，就是基于 Element UI 的定制化拓展，为了解决在实际项目中，Element UI 无法满足某些需求，同时又不希望自己从头造轮子的情况下而诞生。它提供了一些实用的组件和封装，可以带来更加便捷和高效的前端开发体验。
安装
首先，我们需要先安装 my-element-ui，可以直接使用 npm 命令进行安装：
npm install my-element-ui --save
使用
引入样式与组件
安装完成后，在项目中的 main.js 文件中引入 my-element-ui 的样式和组件：
import Vue from 'vue' import 'my-element-ui/lib/my-element-ui.css' import MyElementUI from 'my-element-ui' Vue.use(MyElementUI)
引入样式比较简单，注重的是组件的引入。这里，我们使用 Vue.js 的插件机制，通过 Vue.use() 方法安装 MyElementUI。这样，我们在编写 Vue 组件时，就可以使用 MyElementUI 提供的组件和 API。
组件列表
下面列出了 MyElementUI 目前提供的组件：
MyButton按钮MyInput输入框MyIcon图标MyDialog弹窗MyTooltip文字提示MyLoading加载中
组件示例
现在，我们来看一些具体的组件示例。
MyButton
-- -------------------- ---- -------
----------
-----
---------- -------------------------- ---------------
------
-----------
--------
------ ------- -
-------- -
------------- -
----------------------
-
-
-
---------我们可以在 MyButton 组件上绑定 @click 事件，并在方法中处理点击事件。这里，我们只是简单地在控制台打印一些文本，实际场景下可能会发起一些请求或者进行其他操作。
MyInput
-- -------------------- ---- -------
----------
-----
--------- -------------------- ----------------- --------- ---------------------- --
--------------- ---------- ---------
------
-----------
--------
------ ------- -
------ -
------ -
----------- --
-
--
-------- -
-------------- -
----------------------------------------
-
-
-
---------我们可以使用 v-model 指令来绑定输入框的值，并监听 @change 事件来获取输入变化。此外，还可以使用 placeholder 属性来设置输入框的占位符，使用 clearable 属性来实现清空输入框的功能。
MyIcon
<template>
<div>
<my-icon name="el-icon-search" />
<my-icon name="el-icon-menu" />
<my-icon name="el-icon-edit" />
<my-icon name="el-icon-delete" />
</div>
</template>直接使用 MyIcon 组件，设置 name 属性为 Element UI 自带的图标样式名即可。这里只是展示一些常用的图标，实际上 Element UI 支持的图标非常多，可以根据实际需求自行选择。
MyDialog
-- -------------------- ---- -------
----------
-----
---------- ------------------------------
--------------------
---- --------------
---------- -------------- -----------------------------------------
------
------------
---------- -------------- ------------------------------------------
------
-----------
--------
------ ------- -
------ -
------ -
-------------- -----
-
--
-------- -
------------------- -
------------------ - -----
--
------------------ -
------------------ - ----
-
-
-
---------MyDialog 组件提供了一个弹窗的封装，可以和 MyButton 组件一起使用，实现打开和关闭弹窗的功能。注意到 MyDialog 有一个 visible 属性，这里我们使用 .sync 修饰符来实现双向数据绑定。同时，在弹窗组件内部，我们还可以使用 slot 插槽来自定义内容和样式。
MyTooltip
<template>
<div>
<my-tooltip content="这是一段提示文字">
<span>鼠标移上来试试？</span>
</my-tooltip>
</div>
</template>MyTooltip 组件可以为任意元素添加鼠标悬停提示，只需要设置 content 属性即可。这里，我们把 span 元素包裹在 MyTooltip 组件内部，来实现提示功能。
MyLoading
-- -------------------- ---- -------
----------
-----
----------- ---------------------
--------- ------------------
------------------
-----------
-------------
---------- -------------- -------------------------------------
------
-----------
--------
------ ------- -
------ -
------ -
---------- -----
-
--
-------- -
------------- -
-------------- - ----
------------- -- -
-------------- - -----
-- -----
-
-
-
---------MyLoading 组件可以为任意元素添加一个加载中的样式，只需要设置 loading 属性即可。在这里，我们使用 v-if 指令来根据 isLoading 来控制显示。同时，在点击按钮后，可以通过设置 isLoading 为 true 来激活加载状态，在加载完成后再设置为 false，即可还原状态。
结语
MyElementUI 还有很多其他的组件，这里只是列举了一部分。相较于纯粹使用 Element UI，使用 MyElementUI 在很多场景下能够实现更加便利的开发体验和视觉效果。当然，如果你想自己定制一些 UI 组件，完全可以通过 Element UI 的相关代码进行二次开发，并发布到 npm 上供他人使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566c281e8991b448e3204