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

选项

修改

• 延迟：显示延迟
• light：使用光效，默认：半透明
• 溢出：使用溢出模式
• multiple：使用多行模式（需要设置元素的line-height > offsetHeight ）

属性

• title-placement： String位置上/右/下/左（-start，-end），默认：顶部
• 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 >