【H5】input 组件 placeholder 位置错乱

[xiaoyucoding]

问题描述
H5 平台下，使用 placeholder-class 属性设置 top 值后，placeholer 的位置错乱，不符合预期。

复现步骤

<template>
  <view class="content">
    <input class="input" placeholder-class="placeholder" type="text" placeholder="input placeholder" />
  </view>
</template>

<script>
  export default {
    data() {
      return {};
    },
    methods: {},
    onLoad() {}
  };
</script>

<style>
  .input {
    border: 1px solid #007AFF;
  }

  .placeholder {
    top: 0;
  }
</style>

运行示例代码后，placeholder 的文字内容向上超出了容器，而非处于top: 0px;的预期位置。

预期结果
placeholder 的文字位于top: 0px;位置。

实际结果
placeholder 的文字向上超出了容器范围。

系统信息:

• 发行平台: H5平台
• 操作系统 [如 iOS 12.1.2、Android 7.0]
• HBuilderX版本 [如使用HBuilderX，则需提供 HBuilderX 版本号]
• uni-app版本
  • uni-app v2.5.1
  • uni-app cli v2.0.0-alpha-25120200103006
• 设备信息 Chrome

补充信息
解决 input 组件默认宽度异常的问题以及文字无法自动垂直居中的问题 中设置了uni-input-placeholder的样式：

.uni-input-placeholder {
  top: 50%;
  transform: translateY(-50%);
}

限制了自定义样式去设置 top 值，进而引发了此问题。

实际应用中，此问题出现在引用了 vant-weapp 组件的项目中。vant-weapp 的 input 组件中有如下样式：

.van-field__placeholder {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  pointer-events: none;
  color: #969799;
  color: var(--field-placeholder-text-color, #969799);
}