3-14：密码框状态通用处理

3-14：密码框状态通用处理

对于密码框存在两种状态：

1. 密文状态
2. 明文状态

点击 眼睛 可以进行切换。

该功能实现为通用的处理方案，只需要动态修改 input 的 type 类型即可，其中：

1. password 为密文显示
2. text 为明文显示

根据以上理论，即可得出以下代码：

<template>
  <div class="login-container">
    <el-form class="login-form" :model="loginForm" :rules="loginRules">
      ...
        <el-input
          ...
          :type="passwordType"
        />
        <span class="show-pwd">
          <svg-icon
            :icon="passwordType === 'password' ? 'eye' : 'eye-open'"
            @click="onChangePwdType"
          />
        </span>
      ...
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
...

// 处理密码框文本显示状态
const passwordType = ref('password')
const onChangePwdType = () => {
  if (passwordType.value === 'password') {
    passwordType.value = 'text'
  } else {
    passwordType.value = 'password'
  }
}
</script>