tf-business-card/components/thorui/tui-form/tui-form.vue

<template>
	<view class="tui-form__box" :style="{backgroundColor:backgroundColor,padding:padding,borderRadius:radius}">
		<slot></slot>
		<view class="tui-form__errmsg"
			:style="{top:tipTop+'px',padding:tipPadding,backgroundColor:tipBackgroundColor,borderRadius:tipRidus}"
			v-if="showMessage" :class="{'tui-message__show':errorMsg}"><text class="tui-form__text"
				:style="{fontSize:tipSize+'rpx',color:tipColor}">{{errorMsg}}</text></view>
		<view class="tui-form__mask" v-if="disabled"></view>
	</view>
</template>

<script>
	import form from "./tui-validation.js"
	export default {
		name: "tui-form",
		props: {
			//表单数据对象，即将废弃
			model: {
				type: Object,
				default () {
					return {}
				}
			},
			//表单验证规则，即将废弃
			rules: {
				type: Array,
				default () {
					return []
				}
			},
			//表单背景颜色
			backgroundColor: {
				type: String,
				default: 'transparent'
			},
			//表单padding值
			padding: {
				type: String,
				default: '0'
			},
			//是否显示校验错误信息
			showMessage: {
				type: Boolean,
				default: true
			},
			//表单圆角值
			radius: {
				type: String,
				default: '0'
			},
			//是否禁用该表单内的所有组件,透明遮罩层
			disabled: {
				type: Boolean,
				default: false
			},
			//提示框top值 px
			tipTop: {
				type: Number
					// #ifdef H5
					,
				default: 44
					// #endif
					// #ifndef H5
					,
				default: 0
				// #endif
			},
			//错误提示框padding值
			tipPadding: {
				type: String,
				default: '20rpx'
			},
			//错误提示框背景色
			tipBackgroundColor: {
				type: String,
				default: '#f74d54'
			},
			//错误提示字体大小
			tipSize: {
				type: Number,
				default: 28
			},
			//错误提示字体颜色
			tipColor: {
				type: String,
				default: '#fff'
			},
			//错误提示框圆角值
			tipRidus: {
				type: String,
				default: '12rpx'
			},
			//错误消息显示时间 ms
			duration: {
				type: Number,
				default: 2000
			}
		},
		data() {
			return {
				errorMsg: '',
				timer: null
			};
		},
		// #ifndef VUE3
		beforeDestroy() {
			this.clearTimer()
		},
		// #endif
		// #ifdef VUE3
		beforeUnmount() {
			this.clearTimer()
		},
		// #endif
		methods: {
			clearTimer() {
				clearTimeout(this.timer)
				this.timer = null;
			},
			//{Object} model 表单数据对象
			//{Array} rules 表单验证规则
			validate(model, rules) {
				model = model || this.model
				rules = rules || this.rules
				return new Promise((resolve, reject) => {
					let checkRes = form.validation(model, rules);
					let obj = {
						isPass: true,
						errorMsg: checkRes
					};
					if (!checkRes) {
						resolve(obj)
					} else {
						if (this.showMessage) {
							this.clearTimer()
							this.errorMsg = checkRes;
							this.timer = setTimeout(() => {
								this.errorMsg = ''
							}, this.duration)
						}
						obj.isPass = false;
						reject(obj)
					}
				})
			}
		}
	}
</script>

<style scoped>
	.tui-form__box {
		/* #ifndef APP-NVUE */
		width: 100%;
		box-sizing: border-box;
		/* #endif */
		flex: 1;
		position: relative;
	}

	.tui-form__errmsg {
		position: fixed;
		z-index: 900;
		text-align: center;
		left: 20rpx;
		right: 20rpx;
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		display: flex;
		word-break: break-all;
		/* #endif */
		align-items: center;
		justify-content: center;
		padding: 24rpx;
		opacity: 0;
		transform: translateZ(0) translateY(-100%);
		transition-property: transform, opacity;
		transition-duration: 0.25s;
		transition-delay: 0s;
		transition-timing-function: ease-in-out;
	}

	.tui-form__text {
		text-align: center;
	}

	.tui-message__show {
		transform: translateY(0) translateZ(0);
		opacity: 1;
	}

	.tui-form__mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0);
		z-index: 99;
	}
</style>