youxi-app/pages/user/components/register.uvue

<template>
	<view class=" w-[80vw]">
		<cl-form-item prop="username" required :pt="{
			className: '!mb-4'
		}" :rules="[
			{
				required: true,
				message: '用户名不能为空'
			}
		] as ClFormRule[]
			">
			<cl-input clearable class="" :pt="{ className: '!h-[40px] !rounded-xxl !px-4 !w-[80vw]' }" v-model="form.username"
				placeholder="请输入用户名（必填）"></cl-input>
		</cl-form-item>
		<cl-form-item prop="password" required :pt="{
			className: '!mb-4'
		}" :rules="[
			{
				required: true,
				message: '密码不能为空'
			}, {
				min: 6,
				max: 12,
				message: '密码长度必须在6到16位之间'
			}
		] as ClFormRule[]
			">
			<cl-input :pt="{ className: '!h-[40px] !rounded-xxl !px-4 !w-[80vw]' }" clearable v-model="form.password" password
				placeholder="请输入密码（必填）">
			</cl-input>
		</cl-form-item>
		<cl-form-item prop="confirmPassword" required :pt="{
			className: '!mb-4'
		}" :rules="[
			{
				required: true,
				message: '确认密码不能为空'
			}, {
				validator: (val: string) => val === form.password,
				message: '两次密码输入不一致'
			}
		] as ClFormRule[]
			">
			<cl-input :pt="{ className: '!h-[40px] !rounded-xxl !px-4 !w-[80vw]' }" clearable v-model="form.confirmPassword"
				password placeholder="请确认密码（必填）">
			</cl-input>
		</cl-form-item>
		<cl-form-item :pt="{
			className: '!mb-4'
		}" prop="realName">
			<cl-input clearable :pt="{ className: '!h-[40px] !rounded-xxl !px-4 !w-[80vw]' }" v-model="form.realName"
				placeholder="请输入姓名"></cl-input>
		</cl-form-item>
		<cl-form-item :pt="{
			className: '!mb-4'
		}" prop="phone">
			<cl-input clearable :pt="{ className: '!h-[40px] !rounded-xxl !px-4 !w-[80vw]' }" v-model="form.phone"
				placeholder="请输入手机号"></cl-input>
		</cl-form-item>
	</view>
</template>

<script setup lang="ts">
import { type PropType } from "vue";
import type { LoginForm } from "./types";
import { useRefs, } from "@/.cool";

const props = defineProps({
	form: {
		type: Object as PropType<LoginForm>,
		default: () => ({})
	}
});

const emit = defineEmits(["success"]);

const refs = useRefs();

</script>