vue mathlive

Wrapper Mathlive Vue ให้ส่วนประกอบ Vue ที่ใช้แท็ก <mathlive-mathfield> html

ส่วนประกอบสามารถใช้ในการแก้ไขสูตรโดยใช้ไลบรารี Mathlive ตัวแก้ไขให้ UI ที่มีความสมบูรณ์เข้าถึงได้และแก้ไขได้รวมถึงคีย์บอร์ดเสมือนจริงสำหรับมือถือและสามารถให้เอาต์พุตเป็น Latex, MathML หรือข้อความพูด

เริ่มต้น

ไลบรารี Mathlive ต้องถูกโหลดแยกกัน สิ่งนี้ให้ตัวเลือกในการเลือกไลบรารีเวอร์ชันเฉพาะที่จะใช้โดย wrapper

ถัดไปควรนำเข้าเสื้อคลุมจากนั้นทั้งสองเชื่อมต่อโดยใช้ Vue.use()

หมายเหตุ: ที่เก็บนี้มีตัวอย่างเท่านั้น Vue wrapper บรรจุด้วยไลบรารี Main Mathlive

ข้อควรระวัง : หากคุณได้รับข้อผิดพลาดรันไทม์เมื่อสร้างอินสแตนซ์ส่วนประกอบของ Mathfield และคำเตือนในคอนโซลจาก Vue เกี่ยวกับ "คุณกำลังใช้งานบิลด์ Vue ของรันไทม์เท่านั้น ... " runtimeCompiler: true กับการกำหนดค่า VUE ของคุณ

 < script type =" module " >
  import * as MathLive from "https://unpkg.com/mathlive/dist/mathlive.min.mjs" ;
  import VueMathfield from "https://unpkg.com/mathlive/dist/vue-mathlive.mjs" ;

  Vue . use ( VueMathfield , MathLive ) ;
</ script >

แท็กเริ่มต้นสำหรับ MathFields คือ <mathlive-mathfield> สามารถกำหนดแท็กที่กำหนดเองได้โดยใช้:

 Vue . component ( "custom-tag" , Mathfield ) ;

ส่วนประกอบรองรับแอตทริบิวต์ v-model

เนื้อหาที่เป็นข้อความขององค์ประกอบถูกใช้เป็นค่าเริ่มต้นของตัวแก้ไข

MathField สามารถกำหนดค่าได้โดยใช้แอตทริบิวต์ :options เช่นเพื่อระบุตำแหน่งของไดเรกทอรีฟอนต์ อ่านเพิ่มเติมเกี่ยวกับตัวเลือกที่มีอยู่

 < mathlive-mathfield
  :options =" {smartFence:false} "
  @focus =" ping "
  :on-keystroke =" displayKeystroke "
  v-model =" formula "
>
  f(x)=
</ mathlive-mathfield >

อุปกรณ์ประกอบฉาก

ชื่อ	พิมพ์	คำอธิบาย
value	string	เนื้อหาของ Mathfield แสดงเป็นสายยาง
options	object	ตัวเลือกการกำหนดค่าสำหรับ MathField
onKeystroke	(keystroke:string, ev:Event) => boolean	การโทรกลับเรียกใช้เมื่อกดคีย์ keystroke เป็นสตริงที่อธิบายการกดแป้นพิมพ์ ev เป็นเหตุการณ์แป้นพิมพ์ดั้งเดิม ส่งคืนเท็จเพื่อหยุดการจัดการเหตุการณ์
onMoveOutOf	(string) => boolean	การโทรกลับเรียกใช้เมื่อการนำทางแป้นพิมพ์จะทำให้จุดแทรกออกจากสนามคณิตศาสตร์ อาร์กิวเมนต์ระบุทิศทางของการนำทางไม่ว่าจะ "ส่งต่อ" หรือ "ย้อนหลัง" กลับมาเป็นเท็จเพื่อป้องกันการเคลื่อนไหวจริงเพื่อล้อมรอบไปยังจุดเริ่มต้นของสนาม โดยค่าเริ่มต้นจุดแทรกจะพันรอบ
onTabOutOf	(string) => boolean	การเรียกกลับมาเมื่อกดแท็บ (หรือ shift-tab) จะทำให้จุดแทรกออกจาก Mathfield อาร์กิวเมนต์ระบุทิศทางของการนำทางไม่ว่าจะ "ส่งต่อ" หรือ "ย้อนหลัง" กลับมาเป็นเท็จเพื่อป้องกันการเคลื่อนไหวจริงเพื่อล้อมรอบไปยังจุดเริ่มต้นของสนาม โดยค่าเริ่มต้นจุดแทรกจะพันรอบ

เหตุการณ์

ชื่อ	คำอธิบาย
focus	อินสแตนซ์ของตัวแก้ไขได้รับโฟกัสอินพุต
blur	อินสแตนซ์ของตัวแก้ไขสูญเสียโฟกัสอินพุต
input	เนื้อหาของ Mathfield เปลี่ยนไป พารามิเตอร์ของเหตุการณ์คือค่าใหม่เป็นสตริง
selection-will-change	การเลือก Mathfield กำลังจะเปลี่ยนแปลง
undo-state-will-change	สถานะเลิกทำกำลังจะเปลี่ยนแปลง
undo-state-did-change	รัฐเลิกทำเปลี่ยนไป
virtual-keyboard-toggle	การมองเห็นคีย์บอร์ดเสมือนจริงมีการเปลี่ยนแปลง อาร์กิวเมนต์แรกคือบูลีนที่ระบุว่าตอนนี้คีย์บอร์ดมองเห็นได้หรือไม่ อาร์กิวเมนต์ที่สองคือองค์ประกอบ DOM ที่มีแป้นพิมพ์เสมือน
read-aloud-status	สถานะของการดำเนินการอ่านออกเสียงมีการเปลี่ยนแปลง อาร์กิวเมนต์แรกคือสตริงที่ระบุสถานะใหม่

วิธีการ

ชื่อ	คำอธิบาย
perform(selector:string)	ดำเนินการตามที่ระบุโดยตัวเลือก
hasFocus(): boolean	จริงถ้าคณิตศาสตร์มุ่งเน้น
focus()	ตั้งค่าโฟกัสไปยัง Mathfield
blur()	ลบโฟกัสออกจาก Mathfield
text(format:string): string	ส่งคืนเนื้อหาของ MathField เป็นสตริงในรูปแบบที่ระบุ: "latex" , "latex-expanded" (มาโครน้ำยางทั้งหมดขยายไปสู่คำจำกัดความของพวกเขา) "spoken" , "mathML"
selectedText(format:string): string	ชอบ text() แต่สำหรับการเลือกปัจจุบันเท่านั้น
insert(content:string, options:object)	options.insertionMode = 'replaceSelection' (ค่าเริ่มต้น), 'replaceAll' , 'insertBefore' , 'insertAfter' options.selectionMode - อธิบายว่าการเลือกจะอยู่ที่ไหนหลังจากการแทรก: 'placeholder' : การเลือกจะเป็นตัวยึดตำแหน่งแรกที่มีอยู่ในรายการที่ได้รับการแทรก) (ค่าเริ่มต้น), 'after' 'before' : การเลือกจะเป็นจุดแทรกหลังจากที่ใส่ไว้ ' options.placeholder - สตริงตัวยึดหากจำเป็น options.format - รูปแบบของสตริง s : 'auto' : สตริงถูกตีความว่าเป็นชิ้นส่วนหรือคำสั่ง lauex) (ค่าเริ่มต้น), 'latex' : สตริงถูกตีความอย่างเคร่งครัดเป็นชิ้นส่วน latex options.smartFence - ถ้าเป็นจริงให้โปรโมตรั้วธรรมดาเช่น ( , left...right หรือ mleft...mright options.suppressChangeNotifications - ถ้าเป็นจริงตัวจัดการสำหรับการแจ้งเตือน ContentDidChange และ SelectionDidchange จะไม่ถูกเรียกใช้ ค่าเริ่ม false
keystroke(keys:string, evt:Event)	จำลองผู้ใช้กดชุดค่าผสมคีย์
typedText(text:string)	จำลองผู้ใช้พิมพ์ข้อความบางส่วน
selectionIsCollapsed():boolean	จริงถ้าการเลือกถูกยุบเช่นจุดแทรกเดี่ยว
selectionDepth():number	ส่งคืนความลึกของกลุ่มตัวเลือก หากการเลือกอยู่ที่ระดับรูทจะส่งคืน 0. หากการเลือกเป็นส่วนหนึ่งของตัวเศษของเศษส่วนซึ่งอยู่ที่ระดับรูทส่งคืน 1. โปรดทราบว่าในกรณีนั้นตัวเศษจะเป็น "กลุ่มการเลือก"
selectionAtStart():boolean	กลับมาจริงถ้าการเลือกเริ่มต้นที่จุดเริ่มต้นของกลุ่มการเลือก
selectionAtEnd():boolean	กลับมาจริงหากการเลือกขยายไปถึงจุดสิ้นสุดของกลุ่มการเลือก
select()	เลือกเนื้อหาของ MathField

ตัวเลือก

ตัวเลือกสามารถส่งผ่านไปยัง [ Mathfield.executeCommand() ] {@link mathfield#executeCommand} เพื่อดำเนินการคำสั่งต่างๆ พวกเขายังสามารถเชื่อมโยงกับคีย์ในแป้นพิมพ์เสมือนจริง

ดู {@Tutorial Selectors} สำหรับรายการตัวเลือกทั้งหมด