Question

我正在为输入字段创建一个可重用组件，在其中我可以使用props在一个组件标签中更轻松地定义它们。但是，我想使其具有通用性，以便能够将其用作文本，日期，密码，数字等。但是我在绑定那个道具时遇到了麻烦

这是我的输入字段组件

<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" />

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

* P.S。默认值将被存储并用作状态。那部分起作用。现在，我没有收到控制台错误，但是无论如何，该组件均以文本形式呈现。

Answer 1

v-else-if="password"测试password道具的值。等效于：

if (vm.password)

但是，

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

提供password道具，但没有与:password="true"相同的值。但是，密码prop需要一个字符串，而不是布尔值。在这种情况下，Vue显然会将空字符串分配给评估为false的道具。其他所有示例都一样，这就是为什么总是选择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中创建条件输入字段组件

2 个答案:

编辑