该组件内部实现以uni-appbutton组件为基础，进行二次封装，主要区别在于：
- 按钮
type值有更多的主题颜色 - 按钮
size值有更多的尺寸可选
注意
- 此组件内部使用uni-app
button组件为基础，除了开头中所说的增加的功能，另外暴露出来的props属性和官方组件的属性完全一致， uni-appbutton组件比较特殊，因为它有一些其他小程序平台的特定能力，请参考文档后面的参数列表，更详细说明请参uni-app方文档：
uni-app方button组件(opens new window) - 由于微信小程序的限制，在微信小程序中设置了
form-type的u-button无法触发form组件的submit事件(H5和APP正常)，详见微信小程序文档Bug & Tip部分(opens new window)
#平台差异说明
| App（vue） | App（nvue） | H5 | 小程序 |
| √ | √ | √ | √ |
#基本使用
文字内容通过text传入
<u-button text="月落"></u-button>
copy
#设置按钮的多种形态
type值可选的有default(默认)、primary、success、info、warning、error- 通过
plain值设置是否镂空 - 通过
hairline值设置是否细边 - 通过
disabled值设置是否禁用 - 通过
loading值设置是否开启加载图标，loadingText设置加载中文字 - 通过
icon值设置是否显示图标 - 通过
shape值设置按钮形状，circle为圆角 - 通过
color值设置按钮渐变颜色 - 通过
size值设置按钮的大小
<template> <view style="padding: 20px;"> <u-button type="primary" text="确定"></u-button> <u-button type="primary" :plain="true" text="镂空"></u-button> <u-button type="primary" :plain="true" :hairline="true" text="细边"></u-button> <u-button type="primary" :disabled="disabled" text="禁用"></u-button> <u-button type="primary" loading loadingText="加载中"></u-button> <u-button type="primary" icon="map" text="图标按钮"></u-button> <u-button type="primary" shape="circle" text="按钮形状"></u-button> <u-button text="渐变色按钮" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button> <u-button type="primary" size="small" text="大小尺寸"></u-button> </view> </template> <script> export default { data() { return { disabled: true }; } }; </script>
copy
#定义需要用到的外部样式
- 针对非微信小程序平台，组件的根元素就是uni-app
button组件，所以修改按钮的样式很容易，直接给组件定义类名或者嵌入内联样式即可。 - 如果是微信小程序，编译后页面会有组件同名的元素存在，导致样式传递有问题。
- 如果是为了修改按钮与其他元素之间的距离或者宽度等，可以给按钮外面套一个
view元素，控制这个view与其他元素的距离或者宽度，即可达到同等效果。
所以：我们提供了一个custom-style参数，推荐用户可以用对象形式传递样式给组件内部，注意驼峰命名。
<template> <view style="padding: 20px;"> <!-- 以下形式在微信小程序会无效，APP和H5有效 --> <u-button class="custom-style" text="雪月夜"></u-button> </view> </template> <script> export default { data() { return { disabled: true, customStyle: { marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象 color: 'red' } }; } }; </script> <style lang="scss" scoped> .custom-style { color: #ff0000; width: 400rpx; } </style>
