vue mathlive

Le wrapper MathLive Vue fournit un composant Vue qui implémente une balise HTML <mathlive-mathfield> .

Le composant peut être utilisé pour modifier des formules à l'aide de la bibliothèque MathLive. L'éditeur fournit une interface utilisateur riche et accessible et accessible, y compris les claviers virtuels pour mobile, et peut fournir la sortie en latex, mathml ou texte parlé.

Commencer

La bibliothèque Mathlive doit être chargée séparément. Cela donne la possibilité de choisir une version spécifique de la bibliothèque à utiliser par l'emballage.

Ensuite, l'emballage doit être importé, puis les deux connectés à l'aide de Vue.use()

Remarque: Ce référentiel ne contient que l'échantillon. Le wrapper Vue est emballé avec la principale bibliothèque Mathlive.

ATTENTION : Si vous obtenez des erreurs d'exécution lors de l'instanciation d'un composant MathField et d'un avertissement dans la console de Vue sur "Vous utilisez la version d'exécution uniquement de Vue ..." Assurez-vous d'ajouter runtimeCompiler: true à votre configuration 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 >

La balise par défaut pour MathFields est <mathlive-mathfield> Une balise personnalisée peut être définie en utilisant:

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

Le composant prend en charge l'attribut v-model

Le contenu textuel de l'élément est utilisé comme valeur initiale de l'éditeur.

Le Mathfield peut être configuré à l'aide de l'attribut :options , par exemple pour spécifier l'emplacement du répertoire des polices. En savoir plus sur les options disponibles.

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

Accessoires

Nom	Taper	Description
value	string	Le contenu du Mathfield, représenté comme une chaîne de latex.
options	object	Options de configuration pour le Mathfield.
onKeystroke	(keystroke:string, ev:Event) => boolean	Un rappel invoqué lorsqu'une touche est enfoncée. keystroke est une chaîne décrivant la touche, ev est l'événement du clavier natif. Retourne false pour arrêter la gestion de l'événement
onMoveOutOf	(string) => boolean	Un rappel invoqué lorsque la navigation au clavier entraînerait le point d'insertion qui quitterait le Mathfield. L'argument indique la direction de la navigation, "en avant" ou "arrière". Retour false pour empêcher le mouvement, fidèle à s'enrouler jusqu'au début du terrain. Par défaut, le point d'insertion s'enroulera.
onTabOutOf	(string) => boolean	Un rappel invoqué lors de l'appuyer sur l'onglet (ou le tab de décalage) entraînerait le point d'insertion qui quitterait le Mathfield. L'argument indique la direction de la navigation, "en avant" ou "arrière". Retour false pour empêcher le mouvement, fidèle à s'enrouler jusqu'au début du terrain. Par défaut, le point d'insertion s'enroulera.

Événements

Nom	Description
focus	L'instance de l'éditeur a gagné la mise au point d'entrée.
blur	L'instance de l'éditeur a perdu la mise au point d'entrée.
input	Le contenu du Mathfield a changé. Le paramètre de l'événement est la nouvelle valeur en tant que chaîne
selection-will-change	La sélection du Mathfield est sur le point de changer
undo-state-will-change	L'état d'annulation est sur le point de changer
undo-state-did-change	L'état d'annulation a changé
virtual-keyboard-toggle	La visibilité du clavier virtuel a changé. Le premier argument est un booléen indiquant si le clavier est désormais visible. Le deuxième argument est un élément DOM contenant le clavier virtuel.
read-aloud-status	L'état de l'opération Read à haute voix a changé. Le premier argument est une chaîne indiquant le nouvel statut.

Méthodes

Nom	Description
perform(selector:string)	Effectuez une action, comme indiqué par le sélecteur.
hasFocus(): boolean	Vrai si le Mathfield est concentré
focus()	Définir l'attention sur le Mathfield
blur()	Supprimer l'attention du Mathfield
text(format:string): string	Renvoyez le contenu du Mathfield en tant que chaîne dans le format spécifié: "latex" , "latex-expanded" (toutes les macros de latex sont élargies à leur définition), "spoken" , "mathML"
selectedText(format:string): string	Comme text() , mais uniquement pour la sélection actuelle.
insert(content:string, options:object)	options.insertionMode = 'replaceSelection' (Default), 'replaceAll' , 'insertBefore' , 'insertAfter' options.selectionMode - Décrit où la sélection sera après l'insertion: 'placeholder' : La sélection sera le premier espace réservé disponible dans l'élément qui a été inséré) (par défaut), 'after' 'before' la sélection sera un point d'insertion après l'élément qui a été inséré) ou' (l'élément qui sera inserté). options.placeholder - la chaîne d'espace réservé, si nécessaire options.format - le format de la chaîne s : 'auto' : la chaîne est interprétée comme un fragment ou commande de latex) (par défaut), 'latex' : la chaîne est interprétée strictement comme un fragment de latex options.smartFence - Si vrai, faites la promotion de clôtures simples, par exemple ( , comme left...right ou mleft...mright options.suppressChangeNotifications - Si vrai, les gestionnaires des notifications ContentDidChange et SelectionDidChange ne seront pas invoquées. Par défaut false .
keystroke(keys:string, evt:Event)	Simuler un utilisateur en appuyant sur une combinaison de touches
typedText(text:string)	Simulez un utilisateur tapant du texte.
selectionIsCollapsed():boolean	Vrai si la sélection est effondrée, c'est-à-dire un seul point d'insertion
selectionDepth():number	Retournez la profondeur du groupe de sélection. Si la sélection est au niveau racine, renvoie 0. Si la sélection est une partie du numérateur d'une fraction qui est au niveau racine, renvoyez 1. Notez que dans ce cas, le numérateur serait le "groupe de sélection"
selectionAtStart():boolean	Retour True si la sélection commence au début du groupe de sélection
selectionAtEnd():boolean	Retour True si la sélection s'étend jusqu'à la fin du groupe de sélection
select()	Sélectionnez le contenu du Mathfield

Sélecteurs

Les sélecteurs peuvent être transmis à [ Mathfield.executeCommand() ] {@ Link Mathfield # ExecuteCommand} Pour exécuter diverses commandes. Ils peuvent également être associés à des touches dans le clavier virtuel.

Voir {@tutorial Selectors} pour une liste de tous les sélecteurs.