vue resize text

vue 크기를 조정합니다

요소 폭에 따라 글꼴 크기를 자동으로 크기로 조정하는 VUE 지시문.

유체 또는 반응 형 레이아웃에서 글꼴 크기를 유연하게 만듭니다.

라이브 데모 : 브라우저 뷰포트 크기를 조정하여 효과를 확인하십시오.

vue.js 3.x의 경우 vue3-Resize-Text를 참조하십시오

설치

NPM을 통해 설치하십시오

$ npm install vue-resize-text --save

CDN을 통해 설치하십시오

 < script src =" https://unpkg.com/vue " > </ script >
< script src =" https://unpkg.com/vue-resize-text " > </ script > 

글로벌

전 세계적으로 vueresizetext 등록 :

 import Vue from 'Vue' ;
import VueResizeText from 'vue-resize-text' ;

Vue . use ( VueResizeText )

Directive v-resize-text 모든 구성 요소에서 사용할 수 있습니다.

 < template >
  < div v-resize-text > Hello Vue </ div >
</ template > 

현지의

가져 오기를 사용하여 Vueresizetext 지시문을 구성 요소에 직접 포함시킵니다.

 < template >
  < div v-resize-text > Hello Vue </ div >
</ template >
< script >
import ResizeText from 'vue-resize-text'
export default {
 directives : {
    ResizeText
 }
}
</ script >

용법

기본 사용

 < template >
  < div >
    < div v-resize-text =" {ratio:1.3, minFontSize: '30px', maxFontSize: '100px', delay: 200} " > Hello Vue </ div >
  </ div >
</ template >

< script >
  import ResizeText from 'vue-resize-text'
  export default {
    directives : {
        ResizeText
     }
  } ;
</ script >

지침 주장

v-resize-text="{ratio:1.5, minFontSize: '30px', maxFontSize: '100px', delay: 200}"

논쟁	설명	유형	기본
비율	1 비율은 텍스트를 제대로 크기있게 조정하는 트위크 1 .	숫자	1
Minfontsize	PX의 최소 글꼴 크기 임계 값	번호/문자열	16px 또는 16
maxfontsize	px의 최대 글꼴 크기 임계 값	번호/문자열	500px 또는 500
지연	창 크기 조정의 쇠약 한 시간 지연	숫자	200

특허

MIT