vue resize text

Vue cambiar el tamaño del texto

Una directiva VUE que cambia automáticamente el tamaño de la fuente según el ancho del elemento.

Hace que el tamaño de fuente sea flexible en fluido o diseño receptivo.

Demo en vivo: cambiar el tamaño de la ventana gráfica del navegador para ver el efecto en la acción

Para Vue.js 3.x, consulte Vue3-Resize-Text

Instalación

Instalar a través de NPM

$ npm install vue-resize-text --save

Instalar a través de CDN

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

Global

Registre VueresizeText a nivel mundial:

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

Vue . use ( VueResizeText )

La directiva v-resize-text se puede usar en cualquiera de los componentes

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

Local

Incluya la Directiva VueresizeText directamente en su componente utilizando importar:

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

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

Argumento	Descripción	Tipo	Por defecto
relación	La relación de fuente es el tweek para hacer que el texto cambie correctamente, mayor que 1 hace que la fuente sea más pequeña y menos de 1 hace que la fuente sea más grande	Número	1
minfontsize	Umbral mínimo de tamaño de fuente en PX	Número/cadena	16px o 16
MaxFontSize	Umbral máximo de tamaño de fuente en PX	Número/cadena	500px o 500
demora	El retraso de tiempo de debate en el cambio de tamaño de la ventana	Número	200

Licencia

MIT