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

爭論	描述	類型	預設
比率	字體比是使文本正確調整大小的二十個，較大1使字體更小，較少1使字體更大	數字	1
minfontsize	PX中的最小字體大小閾值	數字/字符串	16px或16
MaxFontSize	PX中的最大字體大小閾值	數字/字符串	500px或500
延遲	窗口大小的刪除時間延遲	數字	200

執照

麻省理工學院