uni-app 【报Bug】uni-easyinput type="textarea"时输入框与type="text"没对齐

项目信息	详细信息
产品分类	uniapp/App
PC开发环境操作系统	Windows
PC开发环境操作系统版本号	win10
HBuilderX类型	正式
HBuilderX版本号	3.4.7
手机系统	Android
手机系统版本号	Android 11
手机厂商	小米
手机机型	全部
页面类型	vue
vue版本	vue2
打包方式	云端
项目创建方式	HBuilderX

操作步骤：

uni-forms中使用uni-easyinput, 分别用type=“text” 和type=“textarea” 作为uni-forms-item的内容

预期结果：

输入框对齐

实际结果：

输入框不对齐

bug描述：

uni-easyinput type="textarea"时输入框和type="text"的没对齐。

eggper 1楼•11 天前

提供可以复现的demo，方便排查

ionicwang 2楼•11 天前

<uni-forms :modelValue="formData" ref="form" :border="true" style="margin-top: 50rpx;" :rules="rules"> <uni-forms-item name="name" label="姓名"> <uni-easyinput type="text" :inputBorder="false" v-model="formData.name" placeholder="请输入姓名" /> </uni-forms-item> <uni-forms-item name="phone" label="电话"> <uni-easyinput type="text" :inputBorder="false" v-model="formData.phone" placeholder="请输入电话" /> </uni-forms-item> <uni-forms-item name="job" label="工作"> <uni-easyinput type="text" :inputBorder="false" placeholder="请输入工作" v-model="formData.job"></uni-easyinput> </uni-forms-item> <uni-forms-item name="summary" label="简介"> <uni-easyinput type="textarea" :inputBorder="false" placeholder="请输入简介" v-model="formData.summary" ></uni-easyinput> </uni-forms-item> </uni-forms>

sinazl 3楼•11 天前

在使用 uni-easyinput 组件时，如果你发现 type="textarea" 和 type="text" 的输入框没有对齐，可能是由于样式或布局问题导致的。以下是一些可能的解决方案：

1. 检查样式

确保 type="textarea" 和 type="text" 的样式一致，特别是 padding、margin、height 等属性。

.uni-easyinput {
  padding: 10px;
  margin: 0;
  height: 40px; /* 根据需要调整 */
}

.uni-easyinput[type="textarea"] {
  height: auto; /* 如果 textarea 需要自适应高度 */
}

2. 使用 Flex 布局

如果你希望输入框在容器中对齐，可以使用 flex 布局来确保它们在同一水平线上。

<view class="container">
  <uni-easyinput type="text" placeholder="请输入文本"></uni-easyinput>
  <uni-easyinput type="textarea" placeholder="请输入多行文本"></uni-easyinput>
</view>

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 根据需要调整对齐方式 */
}

3. 使用 `uni-form` 组件

如果你在表单中使用 uni-easyinput，可以尝试使用 uni-form 组件来自动对齐表单元素。

<uni-form>
  <uni-easyinput type="text" placeholder="请输入文本"></uni-easyinput>
  <uni-easyinput type="textarea" placeholder="请输入多行文本"></uni-easyinput>
</uni-form>

4. 检查 `uni-easyinput` 版本

确保你使用的是最新版本的 uni-easyinput 组件，因为旧版本可能存在样式或布局问题。

5. 自定义样式

如果以上方法都无法解决问题，你可以尝试自定义 uni-easyinput 的样式，或者直接使用原生的 textarea 和 input 标签来实现。

<view class="custom-input">
  <input type="text" placeholder="请输入文本" />
</view>
<view class="custom-textarea">
  <textarea placeholder="请输入多行文本"></textarea>
</view>

.custom-input, .custom-textarea {
  padding: 10px;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.custom-textarea {
  height: auto; /* 如果 textarea 需要自适应高度 */
}