m2-button 是一款基于 Vue.js 框架的 UI 组件库。它封装了常见的 button 按钮，并提供了一些自定义样式和交互效果。在前端开发中，我们经常需要使用按钮来触发某些功能，m2-button 可以帮助我们快速构建标准美观的按钮组件。
安装 m2-button
使用 m2-button 需要先安装它，可以通过 npm 进行安装：
npm install m2-button --save
或者 yarn 安装：
yarn add m2-button
引入 m2-button
安装好 m2-button 后，就可以在项目中引入它了。在需要使用的地方添加如下代码：
import M2Button from 'm2-button' Vue.use(M2Button)
其中，M2Button 是从 npm 包中导入的组件。
使用 m2-button
m2-button 提供了多种类型的按钮，例如普通按钮、主题按钮、圆角按钮等。可以根据具体需求选择不同的按钮类型。以下是一些示例代码：
<!-- 普通按钮 --> <m2-button type="default">默认按钮</m2-button> <!-- 主题按钮 --> <m2-button type="primary">主题按钮</m2-button> <!-- 圆角按钮 --> <m2-button type="radius">圆角按钮</m2-button>
代码中的 type 属性是控制按钮类型的关键字。当属性值为 default 时，按钮是普通的样式；当属性值为 primary 时，按钮是主题颜色的样式；当属性值为 radius 时，按钮是圆角的样式。
另外，m2-button 也提供了多种大小的按钮，可以通过设置 size 属性来调整按钮的大小，示例代码如下：
<m2-button type="primary" size="large">大号按钮</m2-button> <m2-button type="primary" size="middle">中号按钮</m2-button> <m2-button type="primary" size="small">小号按钮</m2-button>
自定义 m2-button 样式
m2-button 组件提供了一些自定义样式的方法。可以通过修改 m2-button 的 LESS 变量来调整样式，这里以修改主题颜色为例。
首先，需要在项目中增加一个 LESS 文件，并定义一个名为 m2button-variables.less 的变量文件。在这个变量文件中，添加如下代码：
-- -------------------- ---- ------- ------- ----------------------------------- -- ------- --------------- -------- -- ----- --- ------ -- -- -- --------- ----- ---------------------- --------------- ---------------------------- --------------- ---------------------------- --------------- ----------------------------- ---------------------- ----
此处，@primary-color 定义了新的主题颜色，然后通过修改 @button-primary-* 变量来将按钮的主题颜色改为新的颜色。
在主 LESS 文件中导入该变量文件：
@import 'm2button-variables.less'; @import '~m2-button/lib/styles/index.less';
这样一来，m2-button 的主题颜色就被修改为了自定义的新颜色。
总结
在本文中，我们介绍了如何安装、引入和使用 m2-button 组件。同时，我们还提供了一些自定义样式的方法，并给出了修改主题颜色的示例。通过学习 m2-button，可以更快地开发常见的按钮组件，提升项目的开发效率和美观程度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f8d9381d61a3540f3a