vue resize text

Vue ปรับขนาดข้อความ

คำสั่ง Vue ซึ่งปรับขนาดตัวอักษรโดยอัตโนมัติตามความกว้างขององค์ประกอบ

มันทำให้ขนาดตัวอักษรมีความยืดหยุ่นในรูปแบบของเหลวหรือการตอบสนอง

Live Demo: ปรับขนาด Viewport ของเบราว์เซอร์เพื่อดูผลกระทบในการดำเนินการ

สำหรับ vue.js 3.x ดูข้อความ vue3-resize-resize

การติดตั้ง

ติดตั้งผ่าน 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 )

Directive 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
ล่าช้า	การหน่วงเวลา debound เมื่อปรับขนาดหน้าต่าง	ตัวเลข	200

ใบอนุญาต

มิกซ์