组件介绍

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

组件名称

gui-submit-button

兼容平台

组件属性

样式说明

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

组件插槽

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