什么是 @custom-elements/button
@custom-elements/button 是一个基于 Web Components 技术实现的定制化按钮组件，它提供丰富的 API 和样式定制，可以满足不同场景下的需求。
如何使用 @custom-elements/button
安装
可以通过 npm 安装 @custom-elements/button：
npm install @custom-elements/button --save
引入
在 HTML 文件中引入 @custom-elements/button 的脚本：
<script src="./node_modules/@custom-elements/button/dist/button.js"></script>
也可以通过模块化的方式引入：
import '@custom-elements/button';
使用
@custom-elements/button 提供了多种 API 和样式定制选项，下面给出常用的几种用法。
创建按钮元素
使用 document.createElement 创建一个按钮元素：
const buttonEl = document.createElement('ce-button');指定按钮类型
通过设置 type 属性来指定按钮类型：primary、secondary、danger、warning、success。
buttonEl.type = 'primary';
指定按钮大小
通过设置 size 属性来指定按钮大小：small、medium、large。
buttonEl.size = 'large';
指定按钮文本
通过设置 text 属性来指定按钮文本。
buttonEl.text = 'Click me!';
切换禁用状态
通过设置 disabled 属性来切换禁用状态。
buttonEl.disabled = true; // 禁用 buttonEl.disabled = false; // 启用
监听按钮点击事件
使用 addEventListener 监听按钮的点击事件。
buttonEl.addEventListener('click', () => {
console.log('Button is clicked!');
});完整示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------------ ------------
------- ---------------------------------------------------------------------
-------
------
--------------------------- ---------
---------- -------------- ------------ ----------- ---- ------------------------
--------
----- -------- - ----------------------------------
---------------------------------- -- -- -
------------------- -- -----------
---
---------
-------
-------结语
@custom-elements/button 是一个非常有用的前端组件，可以大大提高开发效率。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056d5981e8991b448e6fc7