v title

v-title

VUE的工具提示文本。

在線示例：https：//yujinpan.github.io/v-title

現在發布了新版本2.0，已刪除了所需的包裝element-ui和tooltip.js ，Tooltip.js已棄用，並且新版本tippy.js添加了更多功能，因此v-title刪除了許多DOM HARPHLES 。

用法

安裝

 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
  }
} ;

選項

修改

• 延遲：顯示延遲
• 光：使用光效果，默認：半透明
• 溢出：使用溢出模式
• 多個：使用多線模式（需要設置元素的line-height > offsetHeight ）

屬性

• 標題置換： String放置頂部/右/底部/左/左（-start，-end），默認值：top
• title-delay時間： Number顯示延遲時間，默認值：'200'
• 標題最大寬度： 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 >