Vue中创建条件输入框组件

Question

我正在为输入字段创建一个可重复使用的组件，我可以在一个带有道具的组件标签中更轻松地定义它们。但是，我想让它变得通用，以便能够将它用作文本、日期、密码、数字等。通过条件道具。但我无法让该道具绑定

这是我的输入字段组件

<template>
<div class="uk-margin">
    <label class="uk-form-label" for="trackid">{{label}}</label>
    <div class="uk-form-controls">
      <input v-if="number" class="uk-input" type="number" v-model="defaultvalue" />
      <input v-else-if="date" class="uk-input" type="date" v-model="defaultvalue" />
      <input v-else-if="email" class="uk-input" type="email" v-model="defaultvalue" />
      <input v-else-if="password" class="uk-input" type="password" v-model="defaultvalue" />
      <input v-else class="uk-input" type="text" v-model="defaultvalue" />
    </div>
</div>
</template>

<script>
export default {
  name: "input-text-field",
  props: {
    label: {
      type: String
    },
    defaultvalue: {
      type: String
    },
    type: {
      type: String
    },
    number: {
      type: Number
    },
    date: {
      type: Object
    },
    email: {
      type: String
    },
    password: {
      type: String
    }
  },
  data() {
    return {
      value: ""
    };
  }
};

</script>

我这样打电话或想这样使用它们

<InputField label="User Name" :defaultvalue="myName" />
<InputField label="User Email" email :defaultvalue="myEmail" />
<InputField label="User Password" password :defaultvalue="myPass" />
<InputField label="Tracking #" number :defaultvalue="trackingNumber" />

根据我的理解，如果我调用 password，它应该混淆值，因为它会在给定条件语句的情况下呈现 type="password"。不？我做错了什么

*P.S。默认值将被存储并用作状态。那部分有效。现在，我没有收到控制台错误，但无论如何组件都会呈现为文本。

Answer 1

v-else-if="password" 测试 password 属性的值。相当于：

if (vm.password)

然而，

<InputField label="User Password" password :defaultvalue="myPass" />

提供 password 属性，但没有与 :password="true" 相同的值。但是，密码道具需要一个字符串，而不是布尔值。在那种情况下，Vue 显然将空字符串分配给计算结果为 false 的 prop。这与所有其他示例相同，这就是为什么始终选择 else 子句的原因。

顺便说一句，您应该在控制台中收到有关此的警告。你不应该忽视这些。

这应该有效：

<InputField label="User Password" password="true" :defaultvalue="myPass" />

但是，我建议您重做您的组件。与其定义那么多道具，不如定义一个名为 inputType 的道具，并将所需的输入类型作为字符串传递。那么你会：

<InputField label="User Email" inputType="email" :defaultvalue="myEmail" />
<InputField label="User Password" inputType="password" :defaultvalue="myPass" />

Answer 2

我们以此为例：

<VInputField label="User Password" password :defaultvalue="'myPass'"/>

查看控制台后，我们可以看到传递password（当它的prop类型是String时）是不够的。

props: {
 /* ... */
 password: {
   type: String
  }
},

created () {
 console.log(this.$props);
 /*
  ...
  password: ""
  ...
 */
}

空字符串 ("", '') 的计算结果为 false。

我可以想到一种方法，将道具的类型设置为 Boolean:

password: {
   type: Boolean
}

<VInputField label="User Password" :password="true" :defaultvalue="'myPass'"/>

Here is a CodeSanbox example.

编辑

通过这种方式传递密码
<VInputField label="User Password" password :defaultvalue="'myPass'"/>
您将始终获得 true 值（如果道具的类型也是布尔值）。

Vue中创建条件输入框组件

Creating a conditional input field component in Vue

vue.js

vue-component

vuejs2

编辑