vue mathlive

El envoltorio de vue MathLive proporciona un componente VUE que implementa una etiqueta <mathlive-mathfield> html.

El componente se puede usar para editar fórmulas utilizando la biblioteca MathLive. El editor proporciona una interfaz de usuario rica, accesible y de edición, incluidos los teclados virtuales para dispositivos móviles, y puede proporcionar la salida como látex, matemático o texto hablado.

Empezando

La biblioteca MathLive debe cargarse por separado. Esto le da la opción de elegir una versión específica de la biblioteca para ser utilizada por el envoltorio.

A continuación, el envoltorio debe importarse, luego los dos conectados usando Vue.use()

Nota: Este repositorio solo contiene la muestra. El envoltorio Vue está empaquetado con la biblioteca principal de MathLive.

PRECAUCIÓN : si recibe errores de tiempo de ejecución al instancias de un componente de Mathfield y una advertencia en la consola de Vue sobre "Está utilizando la construcción de tiempo de ejecución de Vue ..." Asegúrese de agregar runtimeCompiler: true a su configuración de 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 etiqueta predeterminada para MathFields es <mathlive-mathfield> Se puede definir una etiqueta personalizada usando:

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

El componente admite el atributo v-model .

El contenido textual del elemento se usa como el valor inicial del editor.

Mathfield se puede configurar utilizando el atributo :options , por ejemplo, para especificar la ubicación del directorio de fuentes. Lea más sobre las opciones disponibles.

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

Accesorios

Nombre	Tipo	Descripción
value	string	El contenido de Mathfield, representado como una cadena de látex.
options	object	Opciones de configuración para Mathfield.
onKeystroke	(keystroke:string, ev:Event) => boolean	Se invoca una devolución de llamada cuando se presiona una tecla. keystroke es una cadena que describe la tecla de tecla, ev es el evento de teclado nativo. Devolver falso para dejar de manejar el evento
onMoveOutOf	(string) => boolean	Una devolución de llamada invocada cuando la navegación del teclado causaría que el punto de inserción abandone el campo de matemáticas. El argumento indica la dirección de la navegación, ya sea "hacia adelante" o "hacia atrás". Devuelve False para evitar el movimiento, verdadero para envolver hasta el comienzo del campo. Por defecto, el punto de inserción se concretará.
onTabOutOf	(string) => boolean	Una devolución de llamada invocada al presionar la pestaña (o la tabla de control) haría que el punto de inserción abandone el campo de matemáticas. El argumento indica la dirección de la navegación, ya sea "hacia adelante" o "hacia atrás". Devuelve False para evitar el movimiento, verdadero para envolver hasta el comienzo del campo. Por defecto, el punto de inserción se concretará.

Eventos

Nombre	Descripción
focus	La instancia del editor obtuvo el enfoque de entrada.
blur	La instancia del editor perdió el enfoque de entrada.
input	El contenido de Mathfield ha cambiado. El parámetro del evento es el nuevo valor como cadena
selection-will-change	La selección de Mathfield está a punto de cambiar
undo-state-will-change	El estado de deshacer está a punto de cambiar
undo-state-did-change	El estado de deshacer ha cambiado
virtual-keyboard-toggle	La visibilidad del teclado virtual ha cambiado. El primer argumento es un booleano que indica si el teclado ahora es visible. El segundo argumento es un elemento DOM que contiene el teclado virtual.
read-aloud-status	El estado de la operación de lectura en voz alta ha cambiado. El primer argumento es una cadena que indica el nuevo estado.

Métodos

Nombre	Descripción
perform(selector:string)	Realizar una acción, como lo indica el selector.
hasFocus(): boolean	Cierto si el campo matemático está enfocado
focus()	Establezca el foco en el campo de matemáticas
blur()	Eliminar el enfoque del campo de matemáticas
text(format:string): string	Devuelva el contenido del campo Mathfield como una cadena en el formato especificado: "latex" , "latex-expanded" (todas las macros de látex se expanden a su definición), "spoken" , "mathML"
selectedText(format:string): string	Como text() , pero solo para la selección actual.
insert(content:string, options:object)	options.insertionMode = 'replaceSelection' (predeterminado), 'replaceAll' , 'insertBefore' , 'insertAfter' options.selectionMode : describe dónde será la selección después de la inserción: 'placeholder' : la selección será el primer marcador de posición disponible en el elemento que se ha insertado) (predeterminado), 'after' : la selección será un punto de inserción después del elemento que se ha insertado, 'before' : la selección será un punto de inserción antes del elemento que se ha sido insertado) o 'El ítem' (el elemento que se ha insertado). options.placeholder : la cadena de marcador de posición, si es necesario options.format : el formato de las cadenas s : 'auto' : la cadena se interpreta como un fragmento o comando de látex) (predeterminado), 'latex' : la cadena se interpreta estrictamente como un fragmento de látex options.smartFence - Si es verdadero, promueve las vallas simples, por ejemplo ( , como left...right o mleft...mright options.suppressChangeNotifications : si es verdadero, los controladores para las notificaciones ContentDidChange y SelectionDidChange no se invocarán. false predeterminado.
keystroke(keys:string, evt:Event)	Simular un usuario presionando una combinación de teclas
typedText(text:string)	Simule un usuario escribiendo algún texto.
selectionIsCollapsed():boolean	VERDADERO Si la selección se derrumba, es decir, punto de inserción único
selectionDepth():number	Devolver la profundidad del grupo de selección. Si la selección está en el nivel de raíz, devuelve 0. Si la selección es una parte del numerador de una fracción que está en el nivel de la raíz, regrese 1. Tenga en cuenta que en ese caso, el numerador sería el "grupo de selección"
selectionAtStart():boolean	Devolver verdadero si la selección comienza al comienzo del grupo de selección
selectionAtEnd():boolean	Devolver verdadero si la selección se extiende al final del grupo de selección
select()	Seleccione el contenido de Mathfield

Selectores

Los selectores se pueden pasar a [ Mathfield.executeCommand() ] {@Link Mathfield#Executecommand} para ejecutar varios comandos. También se pueden asociar con teclas en el teclado virtual.

Consulte {@Tutorial Selectors} para obtener una lista de todos los selectores.