ホバープロンプトにはvue2+elementuiを使用する

Vue2+elementui のホバープロンプトは、外部と内部に分かれています。内部のものは el-tooltip を使用し、外部のものは mouseover と mouseout を使用してプロンプトボックスを表示および非表示にします (2 つのイベントは調整する必要があり、イベントは beforedestroy で破棄する必要があります)。

<テンプレート>
  <div class="hello">
<!-- <el-tooltip placement="top"> -->

    <!-- <div slot="content">外部 1<br />外部 2</div> -->
    <ol class="list-wrap" @mouseover.stop="mouseover" @mouseout.stop="mouseout">
      <li v-for="サイト内のサイト"
          :key="サイトID">
        <el-tooltip placement="top">
          <div slot="content">複数行の情報<br />2 行目の情報</div>
          <span>スパン</span>
        </el-tooltip>
      </li>
    </ol>
    <div v-if="isShow">ol のプロンプト情報</div>
     <!-- </el-tooltip> -->
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'HelloWorld',
  データ （） {
    戻る {
      isShow: false、
      サイト: [
        { id: 'sfdsfsd'、名前: 'Runoob' },
        { id: 'sfdsfdfdsd'、名前: 'Google' },
        { id: 'sfdssdffsd'、名前: 'Taobao' }
      ]、
      メッセージ: 'Vue.js アプリへようこそ'
    }
  },
  メソッド: {
    マウスオーバー（e）{
      if (e.target.tagName === 'OL') {
        this.isShow = true
        console.log('enter', e.target.tagName)
      }
    },
    マウスアウト（e）{
      if (e.target.tagName === 'OL') {
        console.log('leave', e.target.tagName)
        this.isShow = false
      }
    }
  }
}
</スクリプト>

<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイルスコープ>
.リストラップ{
  背景色: #42b983;
}
h1,
h2 {
  フォントの太さ: 標準;
}
ul {
  リストスタイルタイプ: なし;
  パディング: 0;
}
li {
  表示: インラインブロック;
  マージン: 0 10px;
}
{
  色: #42b983;
}
</スタイル>

表示効果は以下のとおりです。

外部にホバー:

スパンの内側にホバー:

拡張: 単純なホバープロンプトテキスト（1行または複数行）の場合は、::hover疑似要素を使用して実装できますが、HTMLの属性値をプロンプト値として使用する場合は、\Aを追加しても行が折り返されません。

これで、ホバープロンプトに vue2+elementui を使用する方法についての記事は終了です。vue2 要素ホバープロンプトに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: