代码模版-前端vue实现记住我checkbox功能

引入依赖

需要引入 vue-cookies，element-plus 依赖，并且确保 src/main.js 中已经 use 了 ElementPlus，这个可以看我前面的教程

登录组件中写 html 记住我

使用 element plus 样式

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

登录组件中写 js 实现记住我

这里 js 实现的效果是，如果勾选了记住我，那么下次再打开这个界面时候，能发现 form 表单中已经保存了上次用户密码（实际就是 cookies）

如果没有勾选记住我，那么下次打开这个登录页面，会发现用户密码 form 表单还是空的，还需要你输入一遍

// 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")
}