uView Button 按钮

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

  • 按钮type值有更多的主题颜色
  • 按钮size值有更多的尺寸可选

注意

  1. 此组件内部使用uni-appbutton组件为基础,除了开头中所说的增加的功能,另外暴露出来的props属性和官方组件的属性完全一致, uni-appbutton组件比较特殊,因为它有一些其他小程序平台的特定能力,请参考文档后面的参数列表,更详细说明请参uni-app方文档:
    uni-app方button组件(opens new window)
  2. 由于微信小程序的限制,在微信小程序中设置了form-typeu-button无法触发form组件的submit事件(H5和APP正常),详见微信小程序文档Bug & Tip部分(opens new window)

#平台差异说明

App(vue) App(nvue) H5 小程序

#基本使用

文字内容通过text传入

复制代码
<u-button text="月落"></u-button>

copy

#设置按钮的多种形态

  • type值可选的有default(默认)、primarysuccessinfowarningerror

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

#定义需要用到的外部样式

  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>
相关推荐
前端太佬2 小时前
小程序登录与授权功能全解析:从原理到设计的实战指南 (2025年最新规范实践版)
前端·微信·微信小程序
2401_890665865 小时前
免费送源码:Java+ssm+HTML 三分糖——甜品店网站设计与实现 计算机毕业设计原创定制
java·python·微信小程序·html·php·课程设计·android-studio
Maitians5 小时前
微信小程序 - 根据经纬度打开导航
微信小程序·小程序
前端太佬6 小时前
微信小程序支付全流程实战指南(Node.js后端篇)
前端·javascript·微信小程序
xuanjiong8 小时前
微信小程序,基于uni-app的轮播图制作,调用文件中图片
微信小程序·小程序·uni-app
gurenchang16 小时前
实现从一个微信小程序跳转到另一个微信小程序
微信小程序·小程序
编程毕设19 小时前
【含文档+PPT+源码】基于微信小程序的校园快递平台
微信小程序·小程序
mon_star°21 小时前
搭建基于火灾风险预测与防范的消防安全科普小程序
安全·微信小程序·小程序·微信公众平台
换日线°1 天前
CSS常遇到自适应高度动画、带三角气泡阴影一行样式解决
css·微信小程序
yuanmenglxb20041 天前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序