vue resize text

Vue mengubah ukuran teks

Petunjuk Vue yang secara otomatis mengubah ukuran font berdasarkan lebar elemen.

Itu membuat font-ukuran fleksibel pada tata letak cairan atau responsif.

Demo Langsung: Ubah Ubah Ukuran Browser Viewport untuk melihat efeknya dalam tindakan

Untuk vue.js 3.x lihat vue3-ressize-text

Instalasi

Instal melalui NPM

$ npm install vue-resize-text --save

Instal melalui CDN

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

Global

Daftar Vueresizetext secara global:

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

Vue . use ( VueResizeText )

Arahan v-resize-text kemudian dapat digunakan dalam komponen apa pun

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

Lokal

Sertakan arahan vueresizetext langsung ke dalam komponen Anda menggunakan impor:

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

Penggunaan

Penggunaan dasar

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

Argumen arahan

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

Argumen	Keterangan	Jenis	Bawaan
perbandingan	Rasio font adalah tweek untuk membuat ukuran teks dengan benar, lebih besar dari 1 membuat font lebih kecil dan kurang dari 1 membuat font lebih besar	Nomor	1
Minfontsize	Ambang batas font minimum di px	Nomor/String	16px atau 16
MAXFONTSIZE	Ambang batas ukuran font maksimum di PX	Nomor/String	500px atau 500
menunda	Debound Time Delay di Window Ubaran	Nomor	200

Lisensi

Mit