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 >