博客

您可以通过使用

el-tooltip

组件的

content

属性将提示框附加到

el-input

中。然后，您可以添加一个文本框和图标，当鼠标悬停在这些元素上时，提示框就会显示。

以下是示例代码：

<template>
  <div>
    <el-input v-model="inputValue"
              :placehoder="placeholder"
              suffix-icon="el-icon-question"
              @mouseover.native="showTooltip = true"
              @mouseout.native="showTooltip = false">
      <template #suffix>
        <el-tooltip placement="top" content="这是提示内容" :disabled="!showTooltip" :offset="[0, 8]">
          <i class="el-icon-question"></i>
        </el-tooltip>
      </template>
    </el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      placeholder: '请输入内容',
      showTooltip: false
    }
  },
}
</script>

在这个示例中，我们为

el-input

添加了

@mouseover.native

和

@mouseout.native

事件侦听器，以便在用户鼠标悬停和移开时显示和隐藏提示框。

提示框使用

el-tooltip

组件，并将其插入到

el-input

的

suffix

插槽中。如果您想在输入框左边或右边显示提示框，请将

placement

属性设置为相应的位置（例如，

left

或

right

）。

如果要更改提示框的样式或其他属性，可以在

el-tooltip

组件上使用相应的属性。

希望这个答案对您有所帮助，如果还有问题，请随时询问。