Button 按钮

常用的操作按钮组件,支持多种类型、尺寸和状态。

代码示例

				
<template>
	<zk-theme type="page" :padding="30" showBack navbarTitle="Button按钮">
		<!-- 基础按钮 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础按钮" />
			<view class="button-row">
				<view class="button-item">
					<zk-button text="主要按钮" @click="click1" type="primary" />
				</view>
				<view class="button-item">
					<zk-button text="成功按钮" type="success" />
				</view>
				<view class="button-item">
					<zk-button text="警告按钮" type="warning" />
				</view>
				<view class="button-item">
					<zk-button text="危险按钮" type="danger" />
				</view>
				<view class="button-item">
					<zk-button text="信息按钮" type="info" />
				</view>
			</view>
		</zk-theme>

		<!-- 朴素按钮 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="朴素按钮" />
			<view class="button-row">
				<view class="button-item">
					<zk-button text="朴素按钮" type="primary" plain />
				</view>
				<view class="button-item">
					<zk-button text="朴素按钮" type="success" plain />
				</view>
				<view class="button-item">
					<zk-button text="朴素按钮" type="warning" plain />
				</view>
				<view class="button-item">
					<zk-button text="朴素按钮" type="danger" plain />
				</view>
			</view>
		</zk-theme>

		<!-- 轻按钮 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="轻按钮" />
			<view class="button-row">
				<view class="button-item">
					<zk-button text="轻按钮" type="primary" light />
				</view>
				<view class="button-item">
					<zk-button text="轻按钮" type="success" light />
				</view>
				<view class="button-item">
					<zk-button text="轻按钮" type="warning" light />
				</view>
				<view class="button-item">
					<zk-button text="轻按钮" type="danger" light />
				</view>
			</view>
		</zk-theme>

		<!-- 按钮尺寸 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="按钮尺寸" />
			<view class="button-row">
				<view class="button-item button-item--large">
					<zk-button text="大号按钮" type="primary" size="large" />
				</view>
				<view class="button-item">
					<zk-button text="默认按钮" type="primary" />
				</view>
				<view class="button-item button-item--small">
					<zk-button text="小型按钮" type="primary" size="small" />
				</view>
				<view class="button-item button-item--mini">
					<zk-button text="迷你按钮" type="primary" size="mini" />
				</view>
			</view>
		</zk-theme>

		<!-- 圆角按钮 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="圆角按钮" />
			<view class="button-row">
				<view class="button-item">
					<zk-button text="圆角按钮" type="primary" round />
				</view>
				<view class="button-item">
					<zk-button text="圆角按钮" type="success" round />
				</view>
				<view class="button-item">
					<zk-button text="圆角按钮" type="warning" round />
				</view>
				<view class="button-item">
					<zk-button text="圆角按钮" type="danger" round />
				</view>
			</view>
		</zk-theme>

		<!-- 图标按钮 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="图标按钮" />
			<view class="button-row">
				<view class="button-item">
					<zk-button text="搜索" type="primary" icon="search-line" color="#fff" />
				</view>
				<view class="button-item">
					<zk-button text="新增" type="success" icon="add-large-line" color="#fff" />
				</view>
				<view class="button-item button-item--circle">
					<zk-button type="warning" icon="edit-line" circle color="#fff" />
				</view>
				<view class="button-item button-item--circle">
					<zk-button type="danger" icon="delete-back-2-line" circle color="#fff" />
				</view>
			</view>
		</zk-theme>

		<!-- 加载状态 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="加载状态" />
			<view class="button-row">
				<view class="button-item">
					<zk-button text="加载中..." type="primary" loading />
				</view>
				<view class="button-item">
					<zk-button text="加载中..." type="success" loading />
				</view>
				<view class="button-item">
					<zk-button text="加载中..." type="primary" loading plain />
				</view>
			</view>
		</zk-theme>

		<!-- 禁用状态 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="禁用状态" />
			<view class="button-row">
				<view class="button-item">
					<zk-button text="禁用按钮" type="primary" disabled />
				</view>
				<view class="button-item">
					<zk-button text="禁用按钮" type="success" disabled />
				</view>
				<view class="button-item">
					<zk-button text="禁用按钮" type="primary" disabled plain />
				</view>
			</view>
		</zk-theme>

		<!-- 自定义颜色 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义颜色" />
			<view class="button-row">
				<view class="button-item">
					<zk-button text="紫色背景白字" background="#8b2671" color="#fff" />
				</view>
				<view class="button-item">
					<zk-button text="灰色背景紫字" background="#f0f0f0" color="#8b2671" />
				</view>
				<view class="button-item">
					<zk-button text="紫色边框" background="#8b2671" plain />
				</view>
				<view class="button-item">
					<zk-button text="浅紫背景" background="#8b2671" light />
				</view>
				<view class="button-item button-item--gradient">
					<zk-button text="渐变背景" background="linear-gradient(45deg, #ff6034, #ee0a24)" />
				</view>
				<view class="button-item button-item--gradient">
					<zk-button text="自定义渐变" background="linear-gradient(45deg, #4CAF50, #2196F3)" color="#fff" round />
				</view>
			</view>
		</zk-theme>

		<!-- 自定义尺寸 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义尺寸" />
			<view class="button-row">
				<view class="button-item button-item--custom-width">
					<zk-button text="650rpx 宽度按钮" type="primary" width="600rpx" />
				</view>
				<view class="button-item">
					<zk-button text="100rpx 高度按钮" type="success" height="100rpx" />
				</view>
				<view class="button-item button-item--custom-width">
					<zk-button text="自定义宽高按钮" type="warning" width="300rpx" height="120rpx" />
				</view>
			</view>
		</zk-theme>

		<!-- 更多示例 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="更多示例" />
			<view class="button-row button-row--custom">
				<view class="button-item button-item--custom-width">
					<zk-button text="加入购物车" background="#ff9800" width="300rpx" height="88rpx" icon="cart" round />
				</view>
				<view class="button-item button-item--custom-width">
					<zk-button text="提交订单" background="linear-gradient(to right, #00b09b, #96c93d)" width="600rpx"
						height="100rpx" round />
				</view>
			</view>
		</zk-theme>
	</zk-theme>
</template>

<script>
	export default {
		methods: {
			click1() {
				console.log("按钮点击")
			}
		}
	}
</script>

<style>
	/* 按钮行容器 */
	.button-row {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-wrap: wrap;
		margin: -10rpx;
		/* width: calc(100% + 20rpx); */
		/* #endif */

		/* #ifdef APP-NVUE */
		flex-direction: row;
		flex-wrap: wrap;
		margin: -10rpx;
		/* #endif */
	}

	/* 按钮项容器 */
	.button-item {
		/* #ifndef APP-NVUE */
		padding: 10rpx;
		box-sizing: border-box;

		/* #endif */

		/* #ifdef APP-NVUE */
		margin: 10rpx;
		flex: 1;
		/* #endif */
	}

	/* 大尺寸按钮容器 */
	.button-item--large {
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
	}

	/* 小尺寸按钮容器 */
	.button-item--small {
		/* #ifndef APP-NVUE */
		width: 33.333%;
		/* #endif */
	}

	/* 迷你尺寸按钮容器 */
	.button-item--mini {
		/* #ifndef APP-NVUE */
		width: 25%;
		/* #endif */
	}

	/* 圆形按钮样式 */
	.button-item--circle {
		/* #ifndef APP-NVUE */
		width: auto;
		/* #endif */
	}

	/* 自定义宽度的按钮容器 */
	.button-item--custom-width {
		/* #ifndef APP-NVUE */
		width: auto;
		/* #endif */
	}

	/* 圆形按钮 */
	.zenkuai-btn--circle {
		width: 80rpx !important;
		height: 80rpx !important;
		padding: 0 !important;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.zenkuai-btn--circle .btn-icon {
		margin: 0 !important;
	}

	/* 响应式布局 */
	@media screen and (min-width: 768px) {
		.button-item {
			/* #ifndef APP-NVUE */
			width: 33.333%;
			/* #endif */
		}

		.button-item--small {
			/* #ifndef APP-NVUE */
			width: 25%;
			/* #endif */
		}

		.button-item--mini {
			/* #ifndef APP-NVUE */
			width: 20%;
			/* #endif */
		}
	}

	/* 特定场景的按钮样式 */
	.button-row--custom {
		/* #ifndef APP-NVUE */
		justify-content: center;
		/* #endif */
	}

	.button-row--custom .button-item {
		/* #ifndef APP-NVUE */
		width: auto;
		/* #endif */
	}

	/* 渐变按钮容器 */
	.button-item--gradient {
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
	}
</style>
			

API

Props 属性

参数 说明 类型 可选值 默认值 是否必填
type 按钮类型 string default / primary / success / warning / danger / info default
size 按钮尺寸 string large / small / mini -
plain 是否为朴素按钮 boolean true / false false
round 是否为圆角按钮 boolean true / false false
circle 是否为圆形按钮 boolean true / false false
disabled 是否禁用 boolean true / false false
loading 是否显示加载状态 boolean true / false false
block 是否为块级元素 boolean true / false false
icon 图标名称 string - ''
iconPosition 图标位置 string left / right left
iconSize 图标大小 number / string - 28
iconColor 图标颜色 string - ''
background 自定义背景颜色 string - ''
color 自定义文字颜色 string - ''
width 自定义宽度 string - ''
height 自定义高度 string - ''
light 是否为浅色按钮 boolean true / false false
formType 用于 form 组件,点击分别会触发 form 组件的 submit/reset 事件 string submit / reset ''
openType 开放能力 string - ''

Events 事件

事件名称 说明 回调参数
click 点击按钮时触发 event: Event