uniapp中各种状态的按钮

当涉及状态按钮时，UniApp提供了丰富的选择。UniApp中的状态按钮可以是开关按钮、单选按钮、多选按钮等。开发者可以根据具体需求选择使用合适的状态按钮组件。对于状态按钮，UniApp提供了丰富的API和事件，可以轻松实现状态切换、状态监听等功能。

在UniApp中，状态按钮的使用非常简单。只需要在template中引入相应的组件，设置好相应的属性和事件即可。例如，对于开关按钮，可以使用uni-switch组件；对于单选按钮，可以使用uni-radio组件；对于多选按钮，可以使用uni-checkbox组件等。通过设置不同的属性和事件监听，可以实现各种状态按钮的功能。

除了基本的状态按钮组件外，UniApp还提供了丰富的插件和扩展组件，例如uni-icons、uni-badge等，可以进一步丰富状态按钮的样式和功能。开发者可以根据自己的需求选择合适的组件，快速构建出符合设计需求的状态按钮。

基本使用：

文字内容通过text传入

<u-button text="月落"></u-button>

设置按钮的多种形态

• 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>

定义需要用到的外部样式

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

总的来说，UniApp中各种状态按钮的使用非常灵活，开发者可以根据自己的需求选择合适的组件和配置，快速实现各种状态按钮的功能。UniApp提供了丰富的API和事件，可以轻松实现状态按钮的各种功能，为开发者提供了极大的便利。

API

#Props

#Events

说明：目前经测试(Hbuilder X 2.6.8)，在H5，APP，可以直接对组件监听tap事件，等同组件内部发出的click事件效果，某些HX版本上， 微信小程序对组件使用tap事件可能无效，故建议对按钮组件的点击事件监听统一使用组件内部发出的click事件。