vue3 element plus 实现记住密码功能

在Vue 3中，使用Element Plus实现记住密码功能可以通过以下步骤完成：

1. 首先，你需要在登录表单中添加一个复选框，用于用户选择是否记住密码。

<el-form-item label="记住密码">
  <el-checkbox v-model="rememberPassword"></el-checkbox>
</el-form-item>

2. 在Vue的data选项中添加一个记住密码的变量，并初始化为false。

data() {
  return {
    rememberPassword: false,
    // 其他data属性...
  }
},

3. 在登录表单提交时，将用户是否选择记住密码的状态保存到本地存储（localStorage）中。

methods: {
  login() {
    // 其他登录逻辑...
    
    // 判断用户是否选择了记住密码
    if (this.rememberPassword) {
      localStorage.setItem('username', this.username);
      localStorage.setItem('password', this.password);
    } else {
      localStorage.removeItem('username');
      localStorage.removeItem('password');
    }
  }
}

4. 在组件的`mounted`钩子函数中，检查本地存储中是否有保存的用户名和密码，并将其绑定到表单上。

mounted() {
  const savedUsername = localStorage.getItem('username');
  const savedPassword = localStorage.getItem('password');
  
  if (savedUsername && savedPassword) {
    this.username = savedUsername;
    this.password = savedPassword;
    this.rememberPassword = true;
  }
}

这样，当用户选择记住密码并成功登录后，下次打开页面时用户名和密码会自动填充，并且你可以在登录表单中的复选框中显示选中状态。