前端插件库之vue3使用element-plus实现登录、注册页面和忘记密码弹窗，以及已有样式的覆盖

vue3使用element-plus实现登录/注册页面

登录/注册页面组件

vue3 的登录和注册页面
目前只有框架和函数框架, 根据具体需要填充,
已有功能:
1.没有勾选同意使用手册, 登录和注册按钮是处于隐藏状态的
2.密码与确认密码不一致确认
3.其余功能处于待填充状态

<template><divclass="layout"><el-tabstype="border-card"><el-tab-panelabel="登录"><el-formlabel-position="right"label-width="60px"style="max-width: 460px"class="loginForm"><el-form-itemlabel="邮箱："><el-inputv-model="Email"/></el-form-item><el-form-itemlabel="密码："><el-inputtype="password"v-model="password"/></el-form-item><el-row><el-checkboxclass="checkBox"v-model="isAgree"label="同意用户使用准则"name="type"/></el-row><el-buttonv-if="isAgree"type="primary"class="loginBtn"@click="login">
            登录
          </el-button></el-form></el-tab-pane><el-tab-panelabel="注册"><el-formlabel-position="right"label-width="100px"style="max-width: 460px"class="loginForm"><el-form-itemlabel="邮箱："><el-inputv-model="rEmail"/></el-form-item><el-form-itemlabel="密码："><el-inputtype="password"v-model="rPassword"/></el-form-item><el-form-itemlabel="确认密码："><el-inputtype="password"v-model="confirmPassword"@blur="confirmFunc"/></el-form-item><el-form-itemlabel="验证码："><el-row><el-inputtype="password"v-model="identifyCode"class="inpWidth"/><el-buttontype="primary"@click="getIdentifyCode"plain>
                获取验证码
              </el-button></el-row></el-form-item><el-row><el-checkboxclass="checkBox"v-model="rAgree"label="同意用户使用准则"name="type"/></el-row><el-buttonv-if="rAgree"type="primary"class="loginBtn"@click="register">
            注册
          </el-button></el-form></el-tab-pane></el-tabs></div></template><script>import{ reactive, toRefs }from"@vue/reactivity";import{ ElMessage }from"element-plus";exportdefault{setup(){const form =reactive({Email:"",password:"",isAgree:0,});const registerForm =reactive({rEmail:"",rPassword:"",confirmPassword:"",identifyCode:"",rAgree:0,});// 方法// 登录functionlogin(){
      console.log(form);}// 注册functionregister(){
      console.log("注册", registerForm);}// 获取验证码functiongetIdentifyCode(){
      console.log("获取验证码");}// 确认密码// function confirmFunc() {//   if (registerForm.confirmPassword !== registerForm.rPassword)//     alert("密码与确认密码不一致");// }constconfirmFunc=()=>{if(registerForm.confirmPassword !== registerForm.rPassword)
        ElMessage.error("密码与确认密码不一致.");};return{...toRefs(form),...toRefs(registerForm),
      login,
      register,
      getIdentifyCode,
      confirmFunc,};},};</script><stylescoped>.layout{position: absolute;left:calc(50% - 200px);top: 20%;width: 400px;}.loginBtn{width: 100px;}.loginForm{text-align: center;}.checkBox{margin-left: 7px;}.inpWidth{width: 165px;}</style>

预览

添加忘记密码弹窗

<template><divclass="layout"><el-tabstype="border-card"><el-tab-panelabel="登录"><el-formlabel-position="right"label-width="60px"style="max-width: 460px"class="loginForm"><el-form-itemlabel="邮箱："><el-inputv-model="Email"/></el-form-item><el-form-itemlabel="密码："><el-inputtype="password"v-model="password"/></el-form-item><el-row><el-checkboxclass="checkBox"v-model="isAgree"label="同意用户使用准则"name="type"/></el-row><el-row><el-buttontext><aclass="floatR"@click="isChangePassword = true">忘记密码</a></el-button></el-row><el-buttonv-if="isAgree"type="primary"class="loginBtn"@click="login">
            登录
          </el-button></el-form></el-tab-pane><el-tab-panelabel="注册"><el-formlabel-position="right"label-width="100px"style="max-width: 460px"class="loginForm"><el-form-itemlabel="邮箱："><el-inputv-model="rEmail"/></el-form-item><el-form-itemlabel="密码："><el-inputtype="password"v-model="rPassword"/></el-form-item><el-form-itemlabel="确认密码："><el-inputtype="password"v-model="confirmPassword"@blur="confirmFunc"/></el-form-item><el-form-itemlabel="验证码："><el-row><el-inputtype="password"v-model="identifyCode"class="inpWidth"/><el-buttontype="primary"@click="getIdentifyCode"plain>
                获取验证码
              </el-button></el-row></el-form-item><el-row><el-checkboxclass="checkBox"v-model="rAgree"label="同意用户使用准则"name="type"/></el-row><el-buttonv-if="rAgree"type="primary"class="loginBtn"@click="register">
            注册
          </el-button></el-form></el-tab-pane></el-tabs></div><!-- 忘记密码弹窗 --><teleportto="body"><el-dialogv-model="isChangePassword"title="修改密码"width="40%"><el-formlabel-position="right"label-width="100px"style="max-width: 460px"class="loginForm"><el-form-itemlabel="邮箱："><el-inputv-model="rEmail"/></el-form-item><el-form-itemlabel="密码："><el-inputtype="password"v-model="rPassword"/></el-form-item><el-form-itemlabel="确认密码："><el-inputtype="password"v-model="confirmPassword"@blur="confirmFunc"/></el-form-item><el-form-itemlabel="验证码："><el-row><el-inputtype="password"v-model="identifyCode"class="inpWidth"/><el-buttontype="primary"@click="getIdentifyCode"plain>
              获取验证码
            </el-button></el-row></el-form-item><el-row><el-checkboxclass="checkBox"v-model="rAgree"label="同意用户使用准则"name="type"/></el-row><el-buttonv-if="rAgree"type="primary"class="loginBtn"@click="changePassword">
          修改密码
        </el-button><el-buttonv-if="rAgree"type="primary"class="loginBtn"@click="isChangePassword = false">
          关闭页面
        </el-button></el-form></el-dialog></teleport></template><script>import{ reactive, toRefs, ref }from"@vue/reactivity";import{ ElMessage }from"element-plus";exportdefault{setup(){const form =reactive({Email:"",password:"",isAgree:0,});const registerForm =reactive({rEmail:"",rPassword:"",confirmPassword:"",identifyCode:"",rAgree:0,});// 方法// 登录 将账号密码写入后台,获取用户数据,后登录// 需要修改共享数据functionlogin(){
      console.log(form);}// 注册 -- 将账号密码写入后台, 自动登录// 需要修改共享数据functionregister(){
      console.log("注册", registerForm);}// 获取验证码functiongetIdentifyCode(){
      console.log("获取验证码");}// 确认密码constconfirmFunc=()=>{if(registerForm.confirmPassword !== registerForm.rPassword)
        ElMessage.error("密码与确认密码不一致.");};// 修改密码let isChangePassword =ref(false);// 用的是注册参数functionchangePassword(){}return{
      isChangePassword,...toRefs(form),...toRefs(registerForm),
      login,
      register,
      getIdentifyCode,
      confirmFunc,
      changePassword,};},};</script><stylescoped>.layout{position: absolute;left:calc(50% - 200px);top: 20%;width: 400px;}.loginBtn{width: 100px;}.loginForm{text-align: center;}.checkBox{margin-left: 7px;}.inpWidth{width: 165px;}.floatR{font-size: 10px;margin-left: 9px;color: blue;}</style>

预览

已有样式的修改

1.字体大小

首先获取对应选择器

然后修改字体大小

<style>/deep/.el-form-item__label{font-size: 18px !important;font-weight: 900;}/* vue3 中*/:deep(.el-textarea__inner){min-width: 487px;}</style>

结果：

2.router-link默认样式

<style>/* .router-link-active {
  text-decoration: none;
  color: blue;
} */a{text-decoration: none;color: blue;}</style>

亲测效果: