vue resize text

Vue redimensionner le texte

Une directive VUE qui redimensionne automatiquement la taille de la police en fonction de la largeur des éléments.

Il rend la taille de la police flexible sur le fluide ou la disposition réactive.

Demo en direct: redimensionnez la fenêtre de navigateur pour voir l'effet en action

Pour vue.js 3.x Voir le texte Vue3-Resize-Text

Installation

Installer via NPM

$ npm install vue-resize-text --save

Installer via CDN

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

Mondial

Enregistrez VuereSizeText à l'échelle mondiale:

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

Vue . use ( VueResizeText )

Directive v-resize-text peut alors être utilisée dans n'importe quel composant

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

Locale

Incluez directement la directive VuereSizeText dans votre composant à l'aide d'importation:

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

Usage

Utilisation de base

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

Arguments directifs

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

Argument	Description	Taper	Défaut
rapport	Le rapport de police est le tweek pour faire en sorte que le texte redimensionne correctement, plus que 1 rend la police plus petite et moins 1 agrandir la police	Nombre	1
minfontize	Seuil minimum de taille de police dans PX	Numéro / chaîne	16px ou 16
maxfontize	Seuil maximum de taille de police dans PX	Numéro / chaîne	500px ou 500
retard	Délai de débitement sur le redimensionnement de la fenêtre	Nombre	200

Licence

Mit