在前端开发过程中，我们需要使用各种 JavaScript 库和框架来快速实现功能，npm 的出现大大方便了管理和使用这些库和框架。@beisen-cmps/ux-m-platform-button 是一款用于 uni-app 开发的基于多人版本的移动端通用按钮组件库，本文将为大家介绍如何使用这个 npm 包来方便快速实现多种按钮效果。
安装
npm install @beisen-cmps/ux-m-platform-button --save
使用
在需要使用组件的页面中，引入 @beisen-cmps/ux-m-platform-button：
import BsnButton from '@beisen-cmps/ux-m-platform-button';
通过 components 属性注册组件：
export default {
components: {
BsnButton
}
}在页面中使用组件：
<bsn-button type="primary">Primary Button</bsn-button>
属性
组件支持以下属性：
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | String | default | 按钮类型：default、primary、danger、success。 |
| plain | Boolean | false | 是否镂空按钮。 |
| size | String | default | 按钮大小：default、small、large。 |
| disabled | Boolean | false | 是否禁用按钮。 |
| loading | Boolean | false | 是否显示加载状态。 |
| round | Boolean | false | 是否为圆形按钮。 |
| hairline | Boolean | false | 是否有边框线。 |
| square | Boolean | false | 是否为正方形按钮。 |
| block | Boolean | false | 是否为块级元素按钮。 |
| native-type | String | button | 原生 button 组件的 type 属性。 |
| tag | String | button | 按钮组件的标签类型。 |
| href | String | "" | 当 tag 属性为 a 时，按钮的跳转链接地址。 |
代码示例
以下代码演示了如何创建一些常见的按钮样式：
-- -------------------- ---- -------
----------
----- ------------------
----------- ---------------------- -------------------
----------- -------------------- -------------------
----------- ---------------------- -------------------
----------- ---------------------- -------------------
-------
-----------
--------
------ --------- ---- ------------------------------------
------ ------- -
----------- -
----------
--
--
---------
-------
---------- -
-------- -----
--------------- -------
------------ -------
-
----------- -
------- ---- --
-
--------以上代码将生成四个不同类型的按钮：
结语
@beisen-cmps/ux-m-platform-button 是一款非常实用的组件库，它为我们开发移动端按钮效果提供了很大的便利。通过本教程的介绍，相信大家已经掌握了如何使用这个组件库来创建不同类型的按钮了。希望这篇文章能够帮助到大家。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedabe8b5cbfe1ea06108c8