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

Лицензия

Грань