vue resize text

vue تغيير حجم النص

توجيه VUE الذي يغير حجم الخط تلقائيًا بناءً على عرض العنصر.

يجعل حجم الخط مرنًا على التصميم السائل أو الاستجابة.

العرض التجريبي المباشر: تغيير حجم مُصابيع عرض المتصفح لمعرفة التأثير في العمل

لـ Vue.js 3.x ، انظر إلى نص Vue3

تثبيت

تثبيت عبر 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	الرقم/السلسلة	500 بكسل أو 500
تأخير	تأخير الوقت في تغيير حجم النافذة	رقم	200

رخصة

معهد ماساتشوستس للتكنولوجيا