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-inputのスロットに挿入しますsuffix。ツールチップを入力ボックスの左側または右側に表示する場合は、placementプロパティを対応する位置 (たとえば、leftまたはright) に設定します。

ツールチップのスタイルやその他のプロパティを変更する場合は、el-tooltipコンポーネントの対応するプロパティを使用できます。

この回答がお役に立てば幸いです。まだご質問がある場合はお気軽にお問い合わせください。