vue3+Element Plus功能组件封装——登录（用户名，密码，验证码，记住密码，登录正则验证）

目录

1.html部分

2.js部分

2.1变量的定义和验证

2.2验证码的生成

2.3点击登录

3.部分css(自行调整)

注意

---

省流贴，直接开整！上图↓

登录页面，无外乎这几个部分

1.html部分

<el-form ref="ruleFormRef" class="login_form" :model="ruleForm" status-icon :rules="rules" label-position="left"
	label-width="auto">
	<!-- 用户名 -->
	<el-form-item prop="username">
		<el-input class="user" v-model="ruleForm.username" :placeholder="$t('LP.username')" type="text"
			autocomplete="off" />
	</el-form-item>
	<!-- 密码 -->
	<el-form-item prop="password">
		<el-input class="password" v-model="ruleForm.password" :placeholder="$t('LP.password')" type="password"
			autocomplete="off" />
	</el-form-item>
	<!-- 验证码 -->
	<el-form-item prop="verificationcode">
		<el-input class="verify" v-model="ruleForm.verificationcode" style="width: 250px;margin-right: 10px;"
			:placeholder="$t('LP.verificationcode')" type="text" @keydown.enter="submitForm(ruleFormRef)"
			autocomplete="off" />
		<canvas ref="verify" style="height: 40px;width: 140px;border-radius: 5px;" @click="handleDraw"></canvas>
	</el-form-item>
<!-- 记住密码 -->
	<el-form-item>
		<el-checkbox :label="$t('LP.rememberPwd')" v-model="ruleForm.isRemember"></el-checkbox>
	</el-form-item>
	<!-- 登录 -->
	<el-form-item>
		<el-button type="primary" class="submit" @click="submitForm(ruleFormRef)">
			{