vue mathlive

O Wrapper Mathlive Vue fornece um componente Vue que implementa uma tag HTML <mathlive-mathfield> .

O componente pode ser usado para editar fórmulas usando a Biblioteca Mathlive. O editor fornece uma interface do usuário rica, acessível e de edição, incluindo teclados virtuais para dispositivos móveis, e pode fornecer a saída como látex, matemática ou texto falado.

Começando

A biblioteca Mathlive deve ser carregada separadamente. Isso oferece a opção de escolher uma versão específica da biblioteca a ser usada pelo invólucro.

Em seguida, o invólucro deve ser importado e os dois conectados usando Vue.use()

Nota: Este repositório contém apenas a amostra. O invólucro Vue é embalado com a principal biblioteca Mathlive.

CUIDADO : Se você estiver recebendo erros de tempo de execução ao instantar um componente Mathfield e um aviso no console da Vue sobre "Você está usando a construção apenas de tempo de execução do VUE ..." Certifique-se de adicionar runtimeCompiler: true à sua configuração 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 >

A tag padrão para Mathfields é <mathlive-mathfield> Uma tag personalizada pode ser definida usando:

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

O componente suporta o atributo v-model .

O conteúdo textual do elemento é usado como o valor inicial do editor.

O MathField pode ser configurado usando o atributo :options , por exemplo, para especificar a localização do diretório Fontes. Leia mais sobre as opções disponíveis.

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

Adereços

Nome	Tipo	Descrição
value	string	O conteúdo do Mathfield, representado como uma string de látex.
options	object	Opções de configuração para o Mathfield.
onKeystroke	(keystroke:string, ev:Event) => boolean	Um retorno de chamada chamado quando uma tecla é pressionada. keystroke é uma string que descreve o pressionamento de teclas, ev é o evento de teclado nativo. Retorne falso para parar de lidar com o evento
onMoveOutOf	(string) => boolean	Um retorno de chamada invocado quando a navegação no teclado faria com que o ponto de inserção saia do Mathfield. O argumento indica a direção da navegação, "para a frente" ou "para trás". Retorne false para evitar a mudança, fiel para envolver o início do campo. Por padrão, o ponto de inserção será envolvido.
onTabOutOf	(string) => boolean	Um retorno de chamada invocado ao pressionar a guia (ou shift-tab) faria com que o ponto de inserção saia do Mathfield. O argumento indica a direção da navegação, "para a frente" ou "para trás". Retorne false para evitar a mudança, fiel para envolver o início do campo. Por padrão, o ponto de inserção será envolvido.

Eventos

Nome	Descrição
focus	A instância do editor ganhou o foco de entrada.
blur	A instância do editor perdeu o foco de entrada.
input	O conteúdo do campo Mathfield mudou. O parâmetro do evento é o novo valor como uma string
selection-will-change	A seleção do campo Mathfield está prestes a mudar
undo-state-will-change	O estado de desfazer está prestes a mudar
undo-state-did-change	O estado de desfazer mudou
virtual-keyboard-toggle	A visibilidade do teclado virtual mudou. O primeiro argumento é um booleano indicando se o teclado agora está visível. O segundo argumento é um elemento DOM que contém o teclado virtual.
read-aloud-status	O status da operação de leitura em voz alta mudou. O primeiro argumento é uma string indicando o novo status.

Métodos

Nome	Descrição
perform(selector:string)	Execute uma ação, conforme indicado pelo seletor.
hasFocus(): boolean	Verdadeiro se o campo de matemática estiver focado
focus()	Defina o foco para o Mathfield
blur()	Remova o foco do campo Mathfield
text(format:string): string	Retorne o conteúdo do campo Mathfield como uma string no formato especificado: "latex" , "latex-expanded" (todas as macros do látex são expandidas para sua definição), "spoken" , "mathML"
selectedText(format:string): string	Como text() , mas apenas para a seleção atual.
insert(content:string, options:object)	options.insertionMode = 'replaceSelection' (padrão), 'replaceAll' , 'insertBefore' , 'insertAfter' options.selectionMode - Describes where the selection will be after the insertion: 'placeholder' : the selection will be the first available placeholder in the item that has been inserted) (default), 'after' : the selection will be an insertion point after the item that has been inserted, 'before' : the selection will be an insertion point before the item that has been inserted) or 'item' (the item that was inserted will be selecionado). options.placeholder - a sequência de espaço reservado, se necessário options.format - O formato da String s : 'auto' : A String é interpretada como um fragmento ou comando de látex) (padrão), 'latex' : a string é interpretada estritamente como um fragmento de látex options.smartFence - Se verdadeiro, promova cercas simples, por exemplo ( , como left...right ou mleft...mright options.suppressChangeNotifications - Se verdadeiro, os manipuladores para as notificações do ContentDidChange e SelectionDidChange não serão invocados. Padrão false .
keystroke(keys:string, evt:Event)	Simular um usuário pressionando uma combinação de teclas
typedText(text:string)	Simular um usuário digitando algum texto.
selectionIsCollapsed():boolean	Verdadeiro se a seleção for desmoronada, ou seja, um único ponto de inserção
selectionDepth():number	Retorne a profundidade do grupo de seleção. Se a seleção estiver no nível da raiz, retornará 0. Se a seleção for uma parte do numerador de uma fração que está no nível da raiz, retorne 1. Observe que, nesse caso, o numerador seria o "grupo de seleção"
selectionAtStart():boolean	Retorne true se a seleção começar no início do grupo de seleção
selectionAtEnd():boolean	Retorne true se a seleção se estender ao final do grupo de seleção
select()	Selecione o conteúdo do Mathfield

Seletores

Os seletores podem ser transmitidos para [ Mathfield.executeCommand() ] {@link Mathfield#executEcommand} para executar vários comandos. Eles também podem ser associados a chaves no teclado virtual.

Consulte {@tutorial Selectors} para obter uma lista de todos os seletores.