v title

v タイトル

Vue のツールチップ テキスト。

オンラインの例: https://yujinpan.github.io/v-title

現在、新しいバージョン 2.0 がリリースされ、必要なパッケージelement-uiとtooltip.jsが削除され、tooltip.js は非推奨となり、新しいバージョンのtippy.jsではさらに多くの機能が追加されたため、 v-titleによって多くの dom ハンドルが削除されました。

使用法

インストール

 npm install --save v-title

グローバル登録

 import Vue from 'vue' ;
import VTitle from 'v-title' ;

Vue . use ( VTitle ) ;

コンポーネント内登録

 import VTitle from 'v-title' ;

export default {
  directives : {
    VTitle
  }
} ;

オプション

変更します

• 遅延: 遅延を表示
• ライト: ライト効果を使用、デフォルト: 半透明
• オーバーフロー: オーバーフロー モードを使用する
• multiple: 複数行モードを使用します(要素のline-height > offsetHeightを設定する必要があります)

属性

• title-placement: String配置 top/right/bottom/left(-start, -end)、デフォルト: top
• title-delay-time: 遅延時間を示すNumber 、デフォルト: '200'
• title-max-width: Numberツールヒントの最大幅、デフォルト: なし

完全な例

< template >
  < p v-title = " title " >hover me!</ p >

  <!-- modify: light -->
  < p v-title.light = " title " >hover me!</ p >

  <!-- modify: delay -->
  < p v-title.delay = " title " >hover me!</ p >

  <!-- attr: title-delay-time -->
  < p v-title.delay = " title " title-delay-time = " 1000 " >hover me!</ p >

  <!-- attr: title-max-width -->
  < p v-title = " title " title-max-width = " 100 " >hover me!</ p >

  <!-- modify: overflow -->
  < p v-title.overflow = " title " >hover me!</ p >

  <!-- modify: overflow.multiple -->
  < p v-title.overflow.multiple = " title " >hover me!</ p >

  <!-- attr: title-placement -->
  < p v-title = " title " title-placement = " bottom " >
    top(-start, -end), right(-start, -end), bottom(-start, -end),
    left(-start, -end)，default: top
  </ p >
</ template >

< script >
import VTitle from ' v-title ' ;

export default {
  directives : {
    VTitle
  },
  data () {
    return {
      title : ' ABCDEFGABCDEFGABCDEFGABCDEFGABCDEFGABCDEFG ' ,
    };
  }
};
</ script >

< style lang="scss">
// custom className
.tippy-content {
  font-size : 20 px ;
}
</ style >