vue resize text

Vueのサイズ変更テキスト

要素幅に基づいてフォントサイズを自動的にサイズ変更するVUE指令。

フォントサイズを液体またはレスポンシブレイアウトで柔軟にします。

ライブデモ：ブラウザビューポートのサイズを変更して、実行中の効果を確認します

vue.js 3.xについては、vue3 resize-textを参照してください

インストール

NPM経由でインストールします

$ npm install vue-resize-text --save

CDN経由でインストールします

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

グローバル

vueresizetextをグローバルに登録してください：

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

Vue . use ( VueResizeText )

ディレクティブv-resize-text 、任意のコンポーネントで使用できます

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

地元

インポートを使用して、vueresizetextディレクティブをコンポーネントに直接含める：

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

使用法

基本的な使用法

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

指令引数

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

口論	説明	タイプ	デフォルト
比率	フォント比は、テキストを適切にサイズ変更するためのTweekです1よりも大きくなり、フォントが小さくなり、 1よりも少なくなります。フォントを大きくします	番号	1
minfontsize	PXの最小フォントサイズのしきい値	番号/文字列	16pxまたは16
maxfontsize	PXの最大フォントサイズのしきい値	番号/文字列	500pxまたは500
遅れ	ウィンドウの討論時間遅延のサイズが変更されます	番号	200

ライセンス

mit