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

执照

麻省理工学院