vue resize text

Vue -Größen -Text

Eine VUE -Richtlinie, die die Schriftgröße automatisch auf der Grundlage der Elementbreite ändern.

Es macht die Schriftgröße auf Flüssigkeits- oder Reaktionslayout flexibel.

Live -Demo: Die Größe des Browser -Ansichtsfensters der Größe, um den Effekt in Aktion zu sehen

Für VUE.js 3.x siehe VUE3-RESIZE-Text

Installation

Installieren Sie über NPM

$ npm install vue-resize-text --save

Installieren Sie über CDN

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

Global

Registrieren Sie den vueresizext weltweit:

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

Vue . use ( VueResizeText )

Richtlinie v-resize-text kann dann in einer der Komponenten verwendet werden

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

Lokal

Fügen Sie die Vuereizetext -Direktive direkt in Ihre Komponente mit dem Import ein:

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

Verwendung

Grundnutzung

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

Richtlinienargumente

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

Argument	Beschreibung	Typ	Standard
Verhältnis	1 1 das Tweek, um den Text ordnungsgemäß zu ändern	Nummer	1
Minfontsize	Minimale Schriftgröße Schwelle in PX	Nummer/Zeichenfolge	16px oder 16
MaxFontsize	Maximale Schriftgröße Schwelle in PX	Nummer/Zeichenfolge	500px oder 500
Verzögerung	Verzögerungszeit für die Debattzeit im Fensteränderungsgrößen	Nummer	200

Lizenz

MIT