vue mathlive

Pembungkus Mathlive Vue menyediakan komponen VUE yang mengimplementasikan tag HTML <mathlive-mathfield> .

Komponen dapat digunakan untuk mengedit rumus menggunakan Perpustakaan MathLive. Editor menyediakan UI yang kaya, mudah diakses, mengedit, termasuk keyboard virtual untuk ponsel, dan dapat memberikan output sebagai lateks, mathml atau teks lisan.

Memulai

Perpustakaan MathLive harus dimuat secara terpisah. Ini memberikan opsi untuk memilih versi perpustakaan tertentu yang akan digunakan oleh pembungkus.

Selanjutnya, pembungkus harus diimpor, lalu keduanya terhubung menggunakan Vue.use()

Catatan: Repositori ini hanya berisi sampel. Pembungkus Vue dikemas dengan Perpustakaan Mathlive utama.

PERHATIAN : Jika Anda mendapatkan kesalahan runtime saat instantiating komponen Mathfield dan peringatan di konsol dari Vue tentang "Anda menggunakan runtime-only build Vue ..." Pastikan untuk menambahkan runtimeCompiler: true dengan konfigurasi VUE Anda.

 < 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 >

Tag default untuk MathFields adalah <mathlive-mathfield> Tag khusus dapat didefinisikan menggunakan:

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

Komponen mendukung atribut v-model .

Konten tekstual elemen digunakan sebagai nilai awal editor.

Mathfield dapat dikonfigurasi menggunakan :options , misalnya untuk menentukan lokasi direktori font. Baca lebih lanjut tentang opsi yang tersedia.

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

Alat peraga

Nama	Jenis	Keterangan
value	string	Konten Mathfield, diwakili sebagai string lateks.
options	object	Opsi Konfigurasi untuk Mathfield.
onKeystroke	(keystroke:string, ev:Event) => boolean	Panggilan balik yang dipanggil saat tombol ditekan. keystroke adalah string yang menggambarkan keystroke, ev adalah acara keyboard asli. Kembali Salah untuk Berhenti Menangani Acara
onMoveOutOf	(string) => boolean	Panggilan balik yang dipanggil ketika navigasi keyboard akan menyebabkan titik penyisipan meninggalkan Mathfield. Argumen menunjukkan arah navigasi, baik "maju" atau "mundur". Kembalikan false untuk mencegah langkah, benar untuk membungkus ke awal lapangan. Secara default, titik penyisipan akan membungkus.
onTabOutOf	(string) => boolean	Callback yang dipanggil saat menekan tab (atau shift-tab) akan menyebabkan titik penyisipan meninggalkan Mathfield. Argumen menunjukkan arah navigasi, baik "maju" atau "mundur". Kembalikan false untuk mencegah langkah, benar untuk membungkus ke awal lapangan. Secara default, titik penyisipan akan membungkus.

Acara

Nama	Keterangan
focus	Contoh editor memperoleh fokus input.
blur	Contoh editor kehilangan fokus input.
input	Isi Mathfield telah berubah. Parameter acara adalah nilai baru sebagai string
selection-will-change	Pilihan Mathfield akan berubah
undo-state-will-change	Negara undo akan akan berubah
undo-state-did-change	Negara undo telah berubah
virtual-keyboard-toggle	Visibilitas keyboard virtual telah berubah. Argumen pertama adalah boolean yang menunjukkan jika keyboard sekarang terlihat. Argumen kedua adalah elemen DOM yang berisi keyboard virtual.
read-aloud-status	Status operasi baca keras telah berubah. Argumen pertama adalah string yang menunjukkan status baru.

Metode

Nama	Keterangan
perform(selector:string)	Lakukan tindakan, seperti yang ditunjukkan oleh pemilih.
hasFocus(): boolean	Benar jika Mathfield fokus
focus()	Tetapkan fokus ke Mathfield
blur()	Hapus fokus dari Mathfield
text(format:string): string	Kembalikan konten Mathfield sebagai string dalam format yang ditentukan: "latex" , "latex-expanded" (semua makro lateks diperluas ke definisi mereka), "spoken" , "mathML"
selectedText(format:string): string	Seperti text() , tetapi hanya untuk seleksi saat ini.
insert(content:string, options:object)	options.insertionMode = 'replaceSelection' (default), 'replaceAll' , 'insertBefore' , 'insertAfter' options.selectionMode - Menjelaskan di mana pemilihan akan terjadi setelah penyisipan: 'placeholder' : Seleksi akan menjadi penampung pertama yang tersedia dalam item yang telah dimasukkan) (default), 'after' : Pilihan akan menjadi titik penyisipan setelah item yang telah dimasukkan atau 'before' : Pilihan akan menjadi titik penyisipan sebelum item yang telah dimasukkan) atau 'item' (Pilihan akan disisipkan. options.placeholder - String placeholder, jika perlu options.format - format string s : 'auto' : String ditafsirkan sebagai fragmen atau perintah lateks) (default), 'latex' : string ditafsirkan secara ketat sebagai fragmen lateks options.smartFence - jika benar, promosikan pagar polos, misalnya ( , sebagai left...right atau mleft...mright options.suppressChangeNotifications - Jika benar, penangan untuk pemberitahuan ContentDidChange dan SelectionDidChange tidak akan dipanggil. false default.
keystroke(keys:string, evt:Event)	Mensimulasikan pengguna yang menekan kombinasi kunci
typedText(text:string)	Simulasi pengguna mengetik beberapa teks.
selectionIsCollapsed():boolean	Benar jika pilihannya runtuh, IE Single Insertion Point
selectionDepth():number	Kembalikan kedalaman grup seleksi. Jika seleksi berada pada level root, pengembalian 0. Jika seleksi adalah bagian dari pembilang fraksi yang berada di level root, kembalikan 1. Perhatikan bahwa dalam hal ini, pembilang akan menjadi "grup seleksi"
selectionAtStart():boolean	Kembalikan true jika seleksi dimulai pada awal grup seleksi
selectionAtEnd():boolean	Kembalikan true jika seleksi meluas ke akhir grup seleksi
select()	Pilih konten Mathfield

Pemilih

Selector dapat diteruskan ke [ Mathfield.executeCommand() ] {@Link Mathfield#ExecuteCommand} untuk mengeksekusi berbagai perintah. Mereka juga dapat dikaitkan dengan kunci keyboard virtual.

Lihat {@tutorial selector} untuk daftar semua pemilih.