vue3 登录记住密码和input框显示密码

代码

<el-form-item prop="password">
            <el-input
              v-model.trim="ruleForm.password"
              placeholder="密码"
              :type="showPass ? '' : 'password'"
              type="password"
            >
              <template #suffix>
                <img
                  v-if="showPass"
                  alt=""
                  class="pass-icon"
                  src="@/assets/login/open_eye.png"
                  @click="showPass = !showPass"
                />
                <img
                  v-else
                  alt=""
                  class="pass-icon"
                  src="@/assets/login/close_eye.png"
                  @click="showPass = !showPass"
                />
              </template>
            </el-input>
          </el-form-item>

<el-form-item prop="type">
            <el-checkbox
              v-model="checkedPsd"
              label="记住密码"
              size="large"
              class="right_tips"
            />
          </el-form-item>

记住密码 (通过base64对密码进行加密)

1. 安装Base64 加解密
   npm install --save js-base64

2. 当前文件中引入

import { Base64 } from 'js-base64';

const showPass = ref(false); // 是否显示密码
const checkedPsd = ref(false); // 是否选中记住密码
const ruleForm = reactive({
  name: '',
  password: '',
});
const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
});

onMounted(() => {
  let username = localStorage.getItem('name');
  if (username) {
    ruleForm.name = localStorage.getItem('name');
    ruleForm.password = Base64.decode(localStorage.getItem('password')); // base64解密
    checkedPsd.value = true;
  }
});

// 登录
const submitForm = () => {
  ruleFormRef.value.validate((valid: boolean) => {
      if (valid) {
      // 是否记住密码
        if (checkedPsd.value) {
          let password = Base64.encode(ruleForm.password); // base64加密
          localStorage.setItem('name', ruleForm.name);
          localStorage.setItem('password', password);
        } else {
          localStorage.removeItem('name');
          localStorage.removeItem('password');
        }
      //  请求接口。。。。。。

    } else {
      console.log('error submit!');
    }
  });
}