在前端开发中，很多时候需要使用一些开源的库来提高效率。@mistong/eui-tab 就是一款能够帮助我们实现标签页功能的 npm 包。
安装
使用 npm 安装 @mistong/eui-tab ：
npm install @mistong/eui-tab --save
使用
加载样式文件：
<link rel="stylesheet" href="/node_modules/@mistong/eui-tab/dist/index.css">
引入 eui-tab 组件：
<script src="/node_modules/@mistong/eui-tab/dist/index.js"></script>
需要注意的是，@mistong/eui-tab 是一个自定义元素（Custom Element），因此不能直接使用 <script> 标签引入，需要使用 document.createElement 方法将其转换为 DOM 元素：
const EuiTab = document.createElement('eui-tab');
document.body.appendChild(EuiTab);或者使用 web components 支持库：
<script src="/node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
<eui-tab></eui-tab>
这样就可以在 HTML 中使用 eui-tab 标签了。
属性
eui-tab 支持的属性如下：
current当前激活的标签页索引（从 0 开始）tab-list标签页列表，格式为[{label: 'Tab1', content: 'Content1'}, {label: 'Tab2', content: 'Content2'}]
事件
eui-tab 支持的事件如下：
eui-tab-change切换标签页时触发，携带 event.detail.index 表示切换后的标签页索引
可以通过监听 eui-tab-change 事件来处理标签页切换的逻辑。
示例
以下是一个基本的 eui-tab 示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------------- ------------
----- ---------------- -----------------------------------------------------
-------
------
-------- ----------------------
------- ------------------------------------------------------------
--------
----- --- - ----------------------------------
---------------------------- ----------------
------- ------- -------- ------------
------- ------- -------- ------------
------- ------- -------- -----------
----
-------------------------------------- ------- -- -
-------------------------- --------------------
---
---------
-------
-------总结
通过使用 @mistong/eui-tab，我们可以很容易地实现标签页功能，提高项目开发效率。在使用过程中，需要注意自定义元素的引入方式和相关属性、事件的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b6251ab1864dac67378