Article directory
Introduce dependencies
Need to introduce vue-cookies, element-plus dependencies, and ensure that ElementPlus has been used in src/main.js, which can be seen in my previous tutorial
Write html in the login component remember me
Use element plus styles
<el-form :model="formData" label-width="90px">
<!--...-->
<el-form-item>
<el-checkbox v-model="formData.rememberMe" :true-label="true">记住我</el-checkbox>
</el-form-item>
</el-form>
Write js in the login component to realize remember me
The effect of the js implementation here is that if you check Remember me, when you open this interface next time, you can find that the last user password (actually cookies) has been saved in the form form
If remember me is not checked, then next time you open this login page, you will find that the user password form is still empty, and you need to enter it again
// formData 初始化声明等各种变量初始化，表单中进行了 v-model 绑定
// init 函数，并这里执行
const init = () => {
// 这里如果 cookies 中有数据就赋给 formData，于是在界面表单中能显示
}
init()
// 登录函数，点击登录触发
if (formData.rememberMe) {
// 如果勾选了记住我
const loginInfo = {
account: formData.account,
password: formData.password,
rememberMe: formData.rememberMe,
}
// cookie 设置保留 7 天
VueCookies.set("loginInfo", loginInfo, "7d")
}