Button 按钮

该组件内部实现以uni-appbutton组件为基础，进行二次封装，主要区别在于：

• 按钮type值有更多的主题颜色
• 有可选的按钮点击水波纹效果
• 按钮size值有更多的尺寸可选

注意

此组件内部使用uni-appbutton组件为基础，除了开头中所说的增加的功能，另外暴露出来的props属性和官方组件的属性完全一致， uni-appbutton组件比较特殊，因为它有一些其他小程序平台的特定能力，请参考文档后面的参数列表，更详细说明请参uni-app方文档：
uni-app方button组件

平台差异说明

基本使用

文字内容通过slot传入

<u-button>月落</u-button>

设置按钮的主题

type值可选的有default(默认)、primary、success、info、warning、error

<u-button >默认按钮</u-button>
<u-button type="primary">主要按钮</u-button>
<u-button type="success">成功按钮</u-button>
<u-button type="info">信息按钮</u-button>
<u-button type="warning">警告按钮</u-button>
<u-button type="error">危险按钮</u-button>

设置按钮为半圆形

shape默认值为square(按钮为圆角矩形)，设置为circle，则按钮两边为半圆形

<u-button shape="square">乌啼</u-button>

设置尺寸

button组件的size（可选值为default(默认)，mini(小尺寸)和medium(中等尺寸)）

<u-button size="default">江湖</u-button>
<u-button size="medium">夜雨</u-button>
<u-button size="mini">十年灯</u-button>

设置按钮的镂空状态

镂空状态按钮背景为白色，边框和文字同色，通过plain来设置

<u-button plain>披荆</u-button>
<!-- 或者显式设置为true -->
<u-button :plain="true">斩棘</u-button>

设置点击按钮的水波纹效果

该效果通过给按钮绝对定位形式覆盖一个view，点击时改变view的scale，opacity样式属性，形成扩散再消失的水波纹效果。

<u-button :ripple="true">十年</u-button>
<!-- 通过rippleBgColor设置水波纹的背景颜色 -->
<u-button :ripple="true" ripple-bg-color="#909399">之约</u-button>

如何修改按钮的样式

1. 针对非微信小程序平台，组件的根元素就是uni-appbutton组件，所以修改按钮的样式很容易，直接给组件定义类名或者嵌入内联样式即可。
2. 如果是微信小程序，编译后页面会有组件同名的元素存在，导致样式传递有问题。
3. 如果是为了修改按钮与其他元素之间的距离或者宽度等，可以给按钮外面套一个view元素，控制这个view与其他元素的距离或者宽度，即可达到同等效果。

所以：我们提供了一个custom-style参数，推荐用户可以用对象形式传递样式给组件内部，注意驼峰命名。

/* 以下形式在微信小程序会无效，APP和H5有效 */
<u-button class="custom-style">雪月夜</u-button>
<style scoped>
    .custom-style {
        color: #606266;
        width: 400rpx;
    }
</style>
/* 推荐如下 */
<u-button :custom-style="customStyle">雪月夜</u-button>
<script>
    customStyle: {
        marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        color: 'red'
    }
</script>

各家小程序开放能力的对接

uView已对接uni-app档关于uni-app方button组件](https:uni-app.dcloud.io/component/button)的所有开放能力(截止2020-04-14)uni-app-app文档说明使用即可，如果有发现遗漏的地方，请加群反馈。

API

Props

Events

说明：目前经测试(Hbuilder X 2.6.8)，在H5，APP，微信小程序，可以直接对组件监听tap事件，等同组件内部发出的click事件效果。