VueJS 在不改变“类型”属性的情况下切换密码可见性

如何解决VueJS 在不改变“类型”属性的情况下切换密码可见性

我正在使用一个基本的输入组件，它具有 type 作为属性，并且到目前为止一直运行良好。但是，尝试将其用于密码并实施混淆处理有点棘手。

如何在不改变道具的情况下切换密码的隐藏/显示？我认为从 type = 'password' 到 type = 'text 是最好的方法，但显然不是。

我已经制作了一个 Codesandbox 来复制组件的那部分，但任何建议或指导将不胜感激！

PasswordInput.vue：

<template>
  <div>
    <input :type="type" />
    <button @click="obfuscateToggle" class="ml-auto pl-sm _eye">
      <div>
        <img :src="`/${eyeSvg}.svg`" alt="" />
      </div>
    </button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",data() {
    return {
      passwordVisible: false,eyeSvg: "eye-closed",};
  },props: {
    type: { type: String,default: "text" },},methods: {
    obfuscateToggle() {
      if (this.eyeSvg === "eye-closed") {
        this.eyeSvg = "eye";
      } else this.eyeSvg = "eye-closed";
      // this.eyeSvg = "eye-closed" ? "" : (this.eyeSvg = "eye");
      if ((this.type = "password")) {
        this.type = "text";
      } else this.type = "password";
    },};
</script>

App.vue

<template>
  <div id="app">
    <PasswordInput type="password" />
  </div>
</template>

解决方法

唯一的方法是改变 type 属性。因为这就是浏览器决定将它呈现为文本框还是密码的方式。因此，您以正确的方式这样做。

您会遇到的一个问题是，您将在控制台中抛出错误，因为您正在尝试改变道具。

这是快速且容易修复的。首先，您将创建一个新的数据属性，并将其分配给默认值 type

data(){
   return{
      fieldType:'text'
   }
}

然后您将使用 mounted lifecycle hook，并更新您的数据属性以匹配您的道具值`

mounted(){
   this.fieldType = this.type;
}

如果您知道 type 道具将从父组件更改，您还可以使用 watcher 进行更改并分配 type

watch:{
   type(val){
      this.fieldType = val;
   }
}

然后您将更新您的 obfuscateToggle 方法以使用 fieldtype 变量：

obfuscateToggle() {
  if (this.eyeSvg === "eye-closed") {
    this.eyeSvg = "eye";
  } else this.eyeSvg = "eye-closed";


  //You can simplify this by using this.fieldType = this.fieldType == "text" ? "password" : "text"
  if (this.fieldType == "password") {
    this.fieldType = "text";
  } else this.fieldType = "password";
}

最后，在您的模板中，您需要将 type 更改为 fieldType

<template>
  <div>
    <input :type="fieldType" />
    <button @click="obfuscateToggle" class="ml-auto pl-sm _eye">
      <div>
        <img :src="`/${eyeSvg}.svg`" alt="" />
      </div>
    </button>
  </div>
</template>

综合起来

<script>
export default {
  name: "HelloWorld",data() {
    return {
      passwordVisible: false,eyeSvg: "eye-closed",fieldType: "text"
    };
  },props: {
    type: { type: String,default: "text" },},methods: {
    obfuscateToggle() {
      if (this.eyeSvg === "eye-closed") {
        this.eyeSvg = "eye";
      } else this.eyeSvg = "eye-closed";
 

      //You can simplify this by using this.fieldType = this.fieldType == "text" ? "password" : "text"
      if (this.fieldType == "password") {
        this.fieldType = "text";
      } else this.fieldType = "password";


    },watch:{
    type(val){
       this.fieldType = val;
    }
  },mounted(){
    this.fieldType = this.type;
  },};
</script>

这是一个关于 CodeSandBox

的例子

---

此外，您的 obfuscateToggle 方法中有一个小错误。

if(this.type = 'password')

这是分配 type 而不是将其与文字进行比较 :)