vue resize text

Vue redimensione o texto

Uma diretiva Vue que redimensiona automaticamente o tamanho da fonte com base na largura do elemento.

Torna o tamanho da fonte flexível em layout fluido ou responsivo.

Demonstração ao vivo: redimensione a viewport do navegador para ver o efeito em ação

Para Vue.js 3.x, consulte o texto VUE3-RESIZE

Instalação

Instale via npm

$ npm install vue-resize-text --save

Instale via CDN

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

Global

Registre VueResizetext globalmente:

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

Vue . use ( VueResizeText )

Diretiva v-resize-text então pode ser usada em qualquer um dos componentes

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

Local

Inclua a diretiva VueResizeText diretamente no seu componente usando importação:

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

Uso

Uso básico

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

Argumentos diretivos

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

Argumento	Descrição	Tipo	Padrão
razão	A taxa de fonte é o tweek para tornar o texto redimensionado corretamente, maior que 1 torna a fonte menor e menos que 1 torne a fonte maior	Número	1
minfontsize	Limite mínimo de tamanho de fonte em px	Número/string	16px ou 16
MaxFontSize	Limite máximo de tamanho de fonte em px	Número/string	500px ou 500
atraso	Atraso de tempo de desbaste na janela redimensiona	Número	200

Licença

Mit