el-input 怎么添加鼠标悬浮内容展示

您可以通过使用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-inputsuffix插槽中。如果您想在输入框左边或右边显示提示框,请将placement属性设置为相应的位置(例如,leftright)。

如果要更改提示框的样式或其他属性,可以在el-tooltip组件上使用相应的属性。

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

猜你喜欢

转载自blog.csdn.net/lu6545311/article/details/130378346