vue大屏开发 pc登录需要实现记住密码功能，想到以后也会用到这个功能，就把对应的逻辑代码封装为一个组件，到时候可以直接拿来用。

使用组件

vue2

<rememberPassword :username.sync="userName" :password.sync="userPassword" ref="rememberPassword"></rememberPassword>

vue3

<rememberPwd ref="rememberPassword" v-model:password="passwd" v-model:username="uname"></rememberPwd>

login() {
  var that = this
  if (!that.userName) {
    that.$message({
      message: '请输入用户名',
      type: 'warning'
    });
    return;
  }
  if (!that.userPassword) {
    that.$message({
      message: '请输入密码',
      type: 'warning'
    });
    return;
  }
  if (!that.vrifyCode) {
    that.$message({
      message: '请输入验证码',
      type: 'warning'
    });
    return;
  }
  bsLogin({
    userName: encrypt(this.userName),
    userPassword: encrypt(this.userPassword),
    vrifyCode: this.vrifyCode
  }).then((res) => {
    if (res.status == 200) {
      that.$message({
        message: '登录成功',
        type: 'success'
      });
      that.$refs.rememberPassword.rememberPassword();
      localStorage.setItem('token', res.data.sessionKey)
      if (res.data.useType == 10) {
        this.$router.push({path: '/'});
      }
      if (res.data.useType == 20) {
        this.$router.push({path: '/home2'});
      }
    }
  })
},

记住密码组件

/**
* @Author: 858834013@qq.com
* @Name: rememberPwd
* @Date: 2022-07-09
* @Desc: 记住密码
*/
<template>
  <div class="rememberPwd">
    <el-checkbox fill="#24cdff" v-model="rememberPwd">记住密码</el-checkbox>
  </div>
</template>

<script>

export default {
  name: "rememberPwd",
  components: {},
  props: {
    password: {
      type: String,
      default() {
        return '';
      }
    },
    username: {
      type: String,
      default() {
        return '';
      }
    },
  },
  data() {
    return {
      rememberPwd: false
    }
  },
  watch: {
    rememberPwd() {
      localStorage.setItem('rememberPwd', this.rememberPwd)
    }
  },
  mounted() {
    const username = localStorage.getItem('username');
    const password = localStorage.getItem('password');
    const rememberPwd = localStorage.getItem('rememberPwd');
    if (rememberPwd) {
      this.rememberPwd = true
    } else {
      this.rememberPwd = false
    }
    if (this.rememberPwd) {
      this.$emit('update:username', username)
      this.$emit('update:password', password)
    } else {
      // this.$emit('update:username', '')
      // this.$emit('update:password', '')
    }
  },
  methods: {
    rememberPassword() {
      if (this.rememberPwd) {
        localStorage.setItem('username', this.username);
        localStorage.setItem('password', this.password);
        localStorage.setItem('rememberPwd', true);
      } else {
        localStorage.removeItem('username');
        localStorage.removeItem('password');
        localStorage.removeItem('rememberPwd');
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.rememberPwd {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  ::v-deep {
    .el-checkbox__label {
      color: #fff;
    }

    .el-checkbox.is-checked {
      color: #24cdff;

      .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #24cdff;
        border-color: #24cdff;
      }
    }

    .el-checkbox__label {
      color: #24cdff;
    }
  }
}
</style>