vant2输入框clearable

### Vant2 输入框 `clearable` 属性使用方法

对于 Vant2 中的输入框组件，当希望提供清除功能时，可以通过设置 `clearable` 属性来启用此特性。然而，在某些情况下可能会遇到显示异常的问题。

#### 示例代码展示如何正确应用 `clearable`

<template>
  <div>
    <!-- 正确使用 clearable -->
    <van-field v-model="inputValue" placeholder="可清空的输入框" clearable />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  }
};
</script>

如果遇到了类似于在其他框架（如 Element-UI）中提到的双关闭图标问题[^2]，这通常是因为样式冲突或是额外插件的影响所引起的。为了防止此类情况发生：

- 确认项目内仅引入了一次 Vant 库；
- 检查是否有第三方库覆盖了默认样式；
- 查看是否存在自定义 CSS 影响到了 `.van-icon-clear` 类的选择器优先级；

针对上述可能的原因逐一排查可以帮助解决问题。另外值得注意的是，Vant 的文档并没有提及有关 double-close 图标的 bug 报告，因此更可能是由于外部因素造成的。

相关问题

vant2输入框自动换行

根据提供的引用内容，您可以通过设置`type="textarea"`和`rows="5"`来让Vant2的输入框自动换行。同时，您可以在处理输入内容时使用`replace(/\r\n/g, '<br/>')`来将输入的回车换行符转换为HTML的换行标签`<br/>`，从而实现在页面上显示换行的效果。

vant 并列输入框

你可以使用 Vant UI 库中的 `van-field` 组件来创建并列的输入框。以下是一个示例代码：

<van-row>
  <van-col span="12">
    <van-field label="姓名" placeholder="请输入姓名"></van-field>
  </van-col>
  <van-col span="12">
    <van-field label="年龄" placeholder="请输入年龄"></van-field>
  </van-col>
</van-row>

在这个示例中，我们使用 `van-row` 和 `van-col` 组件来实现输入框的并列。`van-row` 表示一行，`van-col` 表示一列，我们将两个输入框分别放在两个列中，每个列的宽度为 50%（`span="12"` 表示占用总宽度的一半）。这样就可以实现两个输入框的并列了。