Button

组件类型：UxButtonComponentPublicInstance

支持多种主题按钮、镂空按钮，可配置加载中状态，可开启节流等功能

平台兼容性

UniApp X

Android	iOS	web	鸿蒙 Next	小程序
√	√	√	x	√

UniApp Vue Nvue

Android	iOS	web	鸿蒙 Next	小程序
x	x	√	x	x

Props

属性名	类型	默认值	说明
theme	String	info	按钮类型
text	String		按钮文字
color	String		按钮文字颜色
darkColor	String		深色none-不显示，auto-自动适配深色模式，其他-颜色
width	Any		按钮宽度
height	Any		按钮高度
size	Any	`$ux.Conf.fontSize`	按钮文字大小
sizeType	String	small	字体大小类型
bold	Boolean	false	按钮文字加粗
background	String		按钮背景颜色
backgroundDark	String		深色none-不显示，auto-自动适配深色模式，其他-颜色
colors	Array		背景色多个渐变
gradientDirection	String	bottom	渐变色方向
border	Boolean	true	显示边框
corner	Any	5	圆角
plain	Boolean	false	是否镂空
loading	Boolean	false	显示加载中
loadingType	String	spinner	loading类型
loadingText	String	加载中...	加载中文字
loadingSize	Any	`$ux.Conf.fontSize`	加载中文字大小
loadingColor	String	`$ux.Conf.placeholderColor`	加载中颜色
icon	String		按钮图标
iconSize	Any	`$ux.Conf.fontSize`	图标大小
iconColor	String		图标文字颜色
iconColorDark	String		深色none-不显示，auto-自动适配深色模式，其他-颜色
customFont	String		自定义字体路径
customFamily	String		自定义字体family
direction	String	row	布局方向
path	String		点击跳转的页面路径
throttleTime	Number	0	节流，一定时间内只能触发一次，单位毫秒
hoverStartTime	Number	0	点击态出现时间，单位毫秒
hoverStayTime	Number	150	点击态保留时间，单位毫秒
hover	Boolean	true	是否显示点击态
margin	Array		边距[上右下左][上下左右][上下左右]
mt	Any		距上单位px
mr	Any		距右单位px
mb	Any		距下单位px
ml	Any		距左单位px
padding	Array		填充[上右下左][上下左右][上下左右]
pt	Any		上内边距单位px
pr	Any		右内边距单位px
pb	Any		下内边距单位px
pl	Any		左内边距单位px
xstyle	Array		自定义样式
stopPropagation	Boolean	false	阻止向上冒泡
disabled	Boolean	false	是否禁用

theme

值	说明
text	文字
info	默认
primary	主要
success	成功
warning	警告
error	错误

darkColor

值	说明
none不显示
auto自动适配深色模式
color其他颜色

sizeType

值	说明
normal正常
small较小
big较大

backgroundDark

值	说明
none不显示
auto自动适配深色模式
color其他颜色

gradientDirection

值	说明
top向上
bottom向下
left向左
right向右

loadingType

值	说明
circular圆环
spinner菊花

iconColorDark

值	说明
none不显示
auto自动适配深色模式
color其他颜色

direction

值	说明
row水平
column垂直

Events

事件名	说明	参数
click	非禁止并且非加载中，点击触发
longpress	非禁止并且非加载中，长按触发
touchstart	非禁止手指触摸动作开始时触发
touchend	非禁止手指触摸动作结束时触发
touchmove	非禁止手指触摸动作移动时触发
touchcancel	手指触摸动作被打断时触发

示例代码

htmlscriptstyle

html

<template>
	<ux-page :stack="showDoc">
		<ux-navbar :title="title" :bold="true">
			<template v-slot:right>
				<!-- #ifndef MP -->
				<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
				<!-- #endif -->
			</template>
		</ux-navbar>
		
		<ux-scroll>
			<ux-card direction="column" icon="flag-filled" title="按钮" :bold="true">
				<ux-text text="支持多种主题按钮、镂空按钮，可配置加载中状态，可开启节流等功能"></ux-text>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="主题" :bold="true">
				<ux-text text="多种主题可配置，适配暗黑模式" :mb="15"></ux-text>
				<ux-row>
					<ux-button theme="info" text="默认" :mr="10"></ux-button>
					<ux-button theme="primary" text="主要" :mr="10"></ux-button>
					<ux-button theme="success" text="成功" :mr="10"></ux-button>
					<ux-button theme="warning" text="警告" :mr="10"></ux-button>
					<ux-button theme="error" text="错误" :mr="10"></ux-button>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="镂空按钮" :bold="true">
				<ux-text text="支持镂空按钮，适配暗黑模式" :mb="15"></ux-text>
				<ux-col>
					<ux-button :plain="true" theme="info" text="默认"></ux-button>
					<ux-button :plain="true" theme="primary" text="主要" :mt="10"></ux-button>
					<ux-button :plain="true" theme="success" text="成功" :mt="10"></ux-button>
					<ux-button :plain="true" theme="warning" text="警告" :mt="10"></ux-button>
					<ux-button :plain="true" theme="error" text="错误" :mt="10"></ux-button>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="自定义样式" :bold="true">
				<ux-text text="支持配置图标、加载状态、圆角、背景色、渐变色" :mb="15"></ux-text>
				<ux-col>
					<ux-row>
						<ux-button width="40px" height="40px" :corner="40" theme="primary" icon="to-top"></ux-button>
						<ux-button width="40px" height="40px" corner="20rpx" theme="error" icon="to-bottom" :ml="10"></ux-button>
						<ux-button width="80px" height="40px" :corner="20" theme="success" icon="to-left" :ml="10"></ux-button>
						<ux-button width="80px" height="40px" corner="20rpx" theme="warning" icon="to-right" :ml="10"></ux-button>
					</ux-row>
					
					<ux-button :corner="20" theme="error" text="圆角按钮" :mt="10"></ux-button>
					<ux-button theme="primary" :loading="true" loadingText="loading..." loadingColor="white" :mt="10"></ux-button>
					<ux-button theme="success" icon="click-outline" text="带图标" color="#fff" :mt="10"></ux-button>
					<ux-button background="#14C9C9" color="#fff" text="背景色" :mt="10"></ux-button>
					<ux-button theme="info" :colors="['#3491FA', '#F5319D']" gradientDirection="right" color="#fff" text="渐变色" :mt="10"></ux-button>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="禁用按钮" :bold="true">
				<ux-text text="支持禁用按钮，适配暗黑模式" :mb="15"></ux-text>
				<ux-col>
					<ux-button :disabled="true" theme="info" text="默认"></ux-button>
					<ux-button :disabled="true" theme="primary" text="主要" :mt="10"></ux-button>
					<ux-button :disabled="true" theme="success" text="成功" :mt="10"></ux-button>
					<ux-button :disabled="true" :plain="true" theme="warning" text="警告" :mt="10"></ux-button>
					<ux-button :disabled="true" :plain="true" theme="error" text="错误" :mt="10"></ux-button>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="功能" :bold="true">
				<ux-text text="支持节流、跳转页面、阻止冒泡等功能" :mb="15"></ux-text>
				<ux-row>
					<ux-button theme="info" :throttleTime="200" text="开启节流" :mr="10"></ux-button>
					<ux-button theme="info" :throttleTime="200" path="/pages/component/text?title=From Button按钮" text="跳转页面" :mr="10"></ux-button>
					<ux-button theme="info" :stopPropagation="true" text="阻止冒泡"></ux-button>
				</ux-row>
			</ux-card>
			
			<ux-placeholder :height="200">
				<ux-row justify="center" align="center" style="height: 100%;">
					<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
				</ux-row>
			</ux-placeholder>
		</ux-scroll>
	</ux-page>
</template>

<template>
	<ux-page :stack="showDoc">
		<ux-navbar :title="title" :bold="true">
			<template v-slot:right>
				<!-- #ifndef MP -->
				<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
				<!-- #endif -->
			</template>
		</ux-navbar>
		
		<ux-scroll>
			<ux-card direction="column" icon="flag-filled" title="按钮" :bold="true">
				<ux-text text="支持多种主题按钮、镂空按钮，可配置加载中状态，可开启节流等功能"></ux-text>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="主题" :bold="true">
				<ux-text text="多种主题可配置，适配暗黑模式" :mb="15"></ux-text>
				<ux-row>
					<ux-button theme="info" text="默认" :mr="10"></ux-button>
					<ux-button theme="primary" text="主要" :mr="10"></ux-button>
					<ux-button theme="success" text="成功" :mr="10"></ux-button>
					<ux-button theme="warning" text="警告" :mr="10"></ux-button>
					<ux-button theme="error" text="错误" :mr="10"></ux-button>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="镂空按钮" :bold="true">
				<ux-text text="支持镂空按钮，适配暗黑模式" :mb="15"></ux-text>
				<ux-col>
					<ux-button :plain="true" theme="info" text="默认"></ux-button>
					<ux-button :plain="true" theme="primary" text="主要" :mt="10"></ux-button>
					<ux-button :plain="true" theme="success" text="成功" :mt="10"></ux-button>
					<ux-button :plain="true" theme="warning" text="警告" :mt="10"></ux-button>
					<ux-button :plain="true" theme="error" text="错误" :mt="10"></ux-button>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="自定义样式" :bold="true">
				<ux-text text="支持配置图标、加载状态、圆角、背景色、渐变色" :mb="15"></ux-text>
				<ux-col>
					<ux-row>
						<ux-button width="40px" height="40px" :corner="40" theme="primary" icon="to-top"></ux-button>
						<ux-button width="40px" height="40px" corner="20rpx" theme="error" icon="to-bottom" :ml="10"></ux-button>
						<ux-button width="80px" height="40px" :corner="20" theme="success" icon="to-left" :ml="10"></ux-button>
						<ux-button width="80px" height="40px" corner="20rpx" theme="warning" icon="to-right" :ml="10"></ux-button>
					</ux-row>
					
					<ux-button :corner="20" theme="error" text="圆角按钮" :mt="10"></ux-button>
					<ux-button theme="primary" :loading="true" loadingText="loading..." loadingColor="white" :mt="10"></ux-button>
					<ux-button theme="success" icon="click-outline" text="带图标" color="#fff" :mt="10"></ux-button>
					<ux-button background="#14C9C9" color="#fff" text="背景色" :mt="10"></ux-button>
					<ux-button theme="info" :colors="['#3491FA', '#F5319D']" gradientDirection="right" color="#fff" text="渐变色" :mt="10"></ux-button>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="禁用按钮" :bold="true">
				<ux-text text="支持禁用按钮，适配暗黑模式" :mb="15"></ux-text>
				<ux-col>
					<ux-button :disabled="true" theme="info" text="默认"></ux-button>
					<ux-button :disabled="true" theme="primary" text="主要" :mt="10"></ux-button>
					<ux-button :disabled="true" theme="success" text="成功" :mt="10"></ux-button>
					<ux-button :disabled="true" :plain="true" theme="warning" text="警告" :mt="10"></ux-button>
					<ux-button :disabled="true" :plain="true" theme="error" text="错误" :mt="10"></ux-button>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="功能" :bold="true">
				<ux-text text="支持节流、跳转页面、阻止冒泡等功能" :mb="15"></ux-text>
				<ux-row>
					<ux-button theme="info" :throttleTime="200" text="开启节流" :mr="10"></ux-button>
					<ux-button theme="info" :throttleTime="200" path="/pages/component/text?title=From Button按钮" text="跳转页面" :mr="10"></ux-button>
					<ux-button theme="info" :stopPropagation="true" text="阻止冒泡"></ux-button>
				</ux-row>
			</ux-card>
			
			<ux-placeholder :height="200">
				<ux-row justify="center" align="center" style="height: 100%;">
					<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
				</ux-row>
			</ux-placeholder>
		</ux-scroll>
	</ux-page>
</template>

<script setup>
	
	import * as plus from '@/uni_modules/ux-plus'
	
	const title = ref('')
	
	const showDoc = ref(false)
	
	function onDoc() {
		plus.openWeb({
			title: '在线文档',
			url: 'https://www.uxframe.cn/component/button.html',
			// blur: 1,
			success: () => {
				showDoc.value = true
			},
			complete: () => {
				showDoc.value = false
			}
		})
	}
	
	onLoad((e) => {
		title.value = e['title'] ?? ''
	})
</script>

<script setup>
	
	import * as plus from '@/uni_modules/ux-plus'
	
	const title = ref('')
	
	const showDoc = ref(false)
	
	function onDoc() {
		plus.openWeb({
			title: '在线文档',
			url: 'https://www.uxframe.cn/component/button.html',
			// blur: 1,
			success: () => {
				showDoc.value = true
			},
			complete: () => {
				showDoc.value = false
			}
		})
	}
	
	onLoad((e) => {
		title.value = e['title'] ?? ''
	})
</script>

css

<style lang="scss">
	
</style>

<style lang="scss">
	
</style>

Button ​

平台兼容性 ​

UniApp X ​

UniApp Vue Nvue ​

Props ​

Events ​

示例代码 ​

Button

平台兼容性

UniApp X

UniApp Vue Nvue

Props

Events

示例代码