状态管理 - element-plus 如何在弹窗中独立管理密码输入框的明文/密文状态？

Question

element-plus 一个弹窗里使用了form表单，其中有个密码输入框，使用show-password显示切换密码图标时，发现打开一个弹窗将密码设置成了明文，关闭弹窗打开另外一个内容，密码也依然会显示成明文。

后面有尝试过:show-password="showPassword"，弹窗关闭时showPassword设置为false，打开时设置为true，然而还是没有用。

<el-dialog
      v-model="dialogVisible"
      title="新建运营商账号"
      width="450"
      class="form-dialog"
      :close-on-click-modal="showDetail"
      :before-close="handleClose"
    >
      <el-form
        ref="addFormRef"
        :rules="rules"
        :model="addForm"
        :disabled="showDetail"
        class="dialog-form"
      >
        <el-form-item label="密码" required prop="password">
          <el-input
            v-model="addForm.password"
            type="password"
            :show-password="showPassword"
            clearable
            placeholder="请输入密码"
            style="width: 100%;"
            maxlength="30"
          />
        </el-form-item>
      </el-form>
    </el-dialog>

// 关闭弹窗
const handleClose = () => {
  state.dialogVisible = false;
  state.showPassword = false;
};

// 打开弹窗
const addAccount = (formEl: FormInstance | undefined) => {
  state.dialogVisible = true;
  state.showPassword = true;
  nextTick(() => {
    if (formEl) {
      formEl.resetFields();
    }
  });
};

如何让密码框不共享明文密文这个状态？

Answer 1

你在点击关闭的时候，或者重新打开弹窗的时候，重置一下这个密码框的状态

Answer 2

这和Element-plus没什么关系，假设你有一个变量用于控制弹窗显示或隐藏，你应该在变量变化时，将用于控制密码框显示或隐藏的属性值重置.

//伪代码如下

<template>
  <el-input
    v-model="input"
    style="width: 240px"
    type="password"
    placeholder="Please input password"
    :show-password="showPwd"
  />
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
const input = ref('')
const showPwd = ref(false)

// 弹窗变量
const dialogShow = ref(false)

watch(dialogShow, (newVal) => {
  showPwd.value = newVal;
})

// ....
</script>