账户中心 退出系统
5.0 版本 3.0 版本
使用手册 模板中心 账户中心 合作 · 服务
快速开始
动画库介绍
下载及部署
基础组件
animate.css 动画组件
animate.css 连贯动画
gal-api-animate 组件
文本动画
文本淡入淡出
文本背景动画
数值展示动画
按钮动画
提交按钮动画
边框动画按钮
点赞按钮动画
常用动画
全屏加载动画
渐变背景动画
时钟动画
红包雨动画
提交按钮动画

组件介绍

01. 提交按钮组件专为表单提交打造,组件本身提供了交互动画、成功提示、失败提示等数据提交相关的过程展示。
02. 提交按钮依然使用原生按钮为基础,但对原生按钮进行了隐藏,实现了多平台按钮样式统一的目标。

组件名称

gui-submit-button

兼容平台

H5APP小程序

组件属性

属性名称类型默认值作用
titleClassStringgui-sbutton-text按钮标题颜色名称
loaingPointClassStringgui-sbutton-loading-point按钮加载圆点样式名称
baseClassStringgui-sbutton按钮基础样式名称,用于规划尺寸 圆角等基础样式
defaultClassStringgui-sbutton-default按钮默认样式
loadingClassStringgui-sbutton-loading按钮数据交互时加载样式
successClassStringgui-sbutton-success提交成功时按钮样式
failClassStringgui-sbutton-fail提交失败是按钮样式

样式说明

以上样式都保存在框架基础样式内,您封装一套自己的提交按钮样式,然后复制给组件属性即可。

组件插槽

01. <slot name="default"></slot> 按钮默认展示元素
02. <slot name="success"></slot> 提交成功展示元素
03. <slot name="error"></slot> 提交失败展示元素
04. <slot name="realBtn"></slot> 原生按钮原生( 真正起到表单提交作用,但元素会被透明化 )

演示代码

<template>
	<view class="gal-padding"
	style="padding:30rpx;">
		<view>
			<text class="gal-block-text gal-h4 gal-color-gray">提交按钮动画</text>
		</view>
		<view class="gal-margin-top-large">
			<form @submit="submit">
				<view class="gal-margin-top">
					<text class="gal-text-small gal-color-gray">小字 Label</text>
				</view>
				<view style="margin-top:10rpx;">
					<textarea v-model="formData.name" name="name" placeholder="说点什么..." 
					class="gal-textarea gal-bg-gray gal-border-box" style="width:690rpx;" />
				</view>
				<view class="gal-flex gal-rows gal-nowrap gal-space-between gal-align-items-center" 
				style="margin-top:20rpx;">
					<view class="">
					</view>
					<view class="">
						<gal-submit-button ref="guibtn1">
							<text class="gal-block-text gal-sbutton-text gal-text-center gal-color-white" slot="default">提交</text>
							<button type="default" slot="realBtn" form-type="submit">提交</button>
							<text class="gal-block-text gal-sbutton-text gal-text-center gal-color-white" slot="success">提交成功</text>
							<text class="gal-block-text gal-sbutton-text gal-text-center gal-color-white" slot="error">提交失败</text>
						</gal-submit-button>
					</view>
				</view>
			</form>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			formData:{name:'GraceUI'}
		}
	},
	methods: {
		submit : function (e) {
			// 检查按钮状态 按钮状态不为 1 阻止重复提交
			var btnStatus = this.$refs.guibtn1.status;
			if(btnStatus != 1){return ;}
			this.$refs.guibtn1.loading();
			// 提交
			console.log(e);
			// 模拟 api 请求, 使用箭头函数保持 this
			setTimeout(()=>{
				
				this.$refs.guibtn1.success();
				// 其他逻辑 比如 弹出 toast 提示成功
				// 然后页面跳转
				uni.showToast({ title:"提交成功", icon:"none"});
				setTimeout(()=>{
					// 页面跳转代码
				}, 1500);
				
				// 提交失败演示
				/*
				this.$refs.guibtn1.fail();
				// 其他逻辑 比如 弹出 toast 提示失败
				// 然后页面跳转
				uni.showToast({ title:"提交失败", icon:"none"});
				setTimeout(()=>{
					// 重置按钮
					this.$refs.guibtn1.reset();
				}, 1500);
				*/
			}, 2000)
		}
	}
}
</script>
<style>
</style>

gitee 仓库地址

https://git.weixin.qq.com/hcoder/GraceUI52021/blob/master/pages/1.base/submitbutton/submitbutton.vue