输入字段内的图像没有输入溢出

Question

我有一个输入字段，其中包含输入字段右侧的 svg 图像。但实际上，当我在输入字段中输入内容并且输入到达图像时，输入会溢出我的图像。有什么办法可以防止输入溢出我的图像，以便我的输入字段在图像之前“停止”几个 px？我想用顺风在 vue 中做所有事情。

到目前为止我的代码：

<div
class="flex relative w-500px h-48px group justify-center items-center z-1001 pl-8">
<input
  v-model="input"
  type="text"
  placeholder="Input..."
  class="flex h-48px w-500x px-3 py-3 placeholder-gray-600 text-black text-18px flex-none border border-transparent rounded focus:border-gray-400 outline-none"
/>
<span
  class="flex absolute right-0 bg-transparent rounded text-base text-gray-600"
>
  <svg      
    class="fill-current"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    ...
   </svg>
</span>

整个东西应该是这样的：

Answer 1

你不能。

你必须使结果的其他结构。 图像不能绝对浮动在输入之上。那需要是相对的。所以Input field 应该是两个孩子（输入和图像）的单个容器。不错的选择是 flexbox，比如：

<div class="input-text / d-flex"> <!-- input style like border, padding,...  -->
  <div class="flex-grow-1"><input ...></div>
  <div class="flex-shrink-1"><svg ...></div>
</div>

Answer 2

您可以使用填充辅助类。

文档：https://tailwindcss.com/docs/padding

示例：https://codepen.io/alexpetergill/pen/8c4c0334d43267319a0e9bcbc1c0cc12

将“pr-10”添加到输入（padding-right）和 p-2（padding）到 SVG 的包装器。

<div
class="flex relative w-500px h-48px group justify-center items-center z-1001 pl-8">
<input
  v-model="input"
  type="text"
  placeholder="Input..."
  class="flex h-48px w-500x px-3 py-3 pr-10 placeholder-gray-600 text-black text-18px flex-none border border-transparent rounded focus:border-gray-400 outline-none"
/>
<span class="flex absolute right-0 bg-transparent rounded text-base text-gray-600 p-2">
<svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"</svg>
</span>