在 Vue 中创建条件输入字段组件

Posted 2023-02-23

【中文标题】在 Vue 中创建条件输入字段组件

【英文标题】：Creating a conditional input field component in Vue

【发布时间】：2019-12-31 16:08:45

【问题描述】：

我正在为输入字段创建一个可重用的组件，我可以在一个带有 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"。不？我做错了什么

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

【参考方案1】：

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

if (vm.password)

然而，

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

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

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

这应该可行：

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

但是，我建议您重新设计您的组件。与其定义这么多 props，不如使用一个名为 inputType 的 props，并将所需的输入类型作为字符串传递。那么你会有：

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

【讨论】：

我同意简单地传入输入类型而不是制作条件组件的想法，这似乎有点混乱。我对如何构建自定义输入组件 codesandbox.io/s/vue-template-7m29w

【参考方案2】：

我们以这个为例：

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

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

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

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

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

我可以想到一种方法，将道具的类型设为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 值（如果道具的类型也是布尔值）。