vue3-登录表单--输入密码框小眼睛切换问题

	<el-form-item prop="password">
			<el-input
				:type="flagType"  //设置type
				v-model="loginForm.password"
				placeholder="请输入密码"
				:show-password="false"
				autocomplete="new-password">
				<template #prefix>
					<el-icon class="el-input__icon"><lock /></el-icon>
				</template>
				<template #suffix>  //手动插入小眼睛图标
					<span @click="changeView">
					<el-icon class="el-input__icon" v-if="flag == true"><Hide /></el-icon>
			<el-icon class="el-input__icon" v-else-if="flag == false"><View /></el-icon>
					</span>
				</template>
			</el-input>
	</el-form-item>

<el-button :icon="CircleClose" round @click="resetForm(loginFormRef)" size="large">重置</el-button>

登录表单下方有一个重置按钮，点击重置按钮使密码和用户名清空，小眼睛重新回到隐藏密码状态

const flagType = ref("password");
const flag = ref(true);

// resetForm重置表单事件
const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	flag.value = true;
	flagType.value = "password";
	formEl.resetFields();
};
//切换小眼睛事件
const changeView = () => {
	flag.value = !flag.value;
	flagType.value = flag.value ? "password" : "text";
};

el-input直接设置type值也可以实现密码显示隐藏，但是当点击重置按钮前密码为明文，重置后再次输入密码依然为明文状态。