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

<template>
	<view class="flex flex-col 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>


	</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>