vue mathlive

Обертка Mathlive Vue предоставляет компонент VUE, который реализует тег <mathlive-mathfield> HTML.

Компонент можно использовать для редактирования формул с использованием библиотеки MathLive. Редактор предоставляет богатый, доступный пользовательский интерфейс, в том числе виртуальные клавиатуры для мобильных устройств, и может предоставить выходные данные в виде Latex, MathML или разговорного текста.

Начиная

Библиотека Mathlive должна быть загружена отдельно. Это дает возможность выбрать определенную версию библиотеки, которая будет использоваться оберткой.

Далее, обертка должна быть импортирована, затем два подключены с помощью Vue.use()

Примечание. Этот репозиторий содержит только образец. Обертка Vue упакована с основной библиотекой Mathlive.

Осторожно : если вы получаете ошибки во время выполнения при создании компонента математического проживания и предупреждения в консоли от 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	Обратный вызов, вызванный при нажатии вкладки (или смены), приведет к тому, что точка вставки покинет математику. Аргумент указывает на направление навигации, либо «вперед», либо «назад». Верните ложь, чтобы предотвратить ход, верный, чтобы обернуть вокруг начала поля. По умолчанию точка вставки будет обернуться.

События

Имя	Описание
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	Вернуть содержание математического профиля в качестве строки в указанном формате: "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' : строка интерпретируется как фрагмент или команда латекса) (по умолчанию), 'latex' : строка интерпретируется строго как фрагмент латекса options.smartFence - если истина, пропагандируйте простые заборы, например ( , как left...right или mleft...mright options.suppressChangeNotifications - Если True, обработчики для уведомлений ContentDidchange и SelectionDidChange не будут вызваны. По умолчанию false .
keystroke(keys:string, evt:Event)	Моделируйте пользователь, нажимающий комбинацию клавиш
typedText(text:string)	Моделируйте пользователь, вводящий текст.
selectionIsCollapsed():boolean	Верно, если выбор обрушивается, то есть единственная точка вставки
selectionDepth():number	Вернуть глубину группы отбора. Если выбор находится на корневом уровне, возвращает 0. Если выбор является частью числителя фракции, которая находится на корневом уровне, верните 1. Обратите внимание, что в этом случае числитель будет «группой выбора»
selectionAtStart():boolean	Вернуть True, если выбор начинается в начале группы отбора
selectionAtEnd():boolean	Верните True, если выбор простирается до конца группы отбора
select()	Выберите содержание математического проживания

Селекторы

Селекторы могут быть переданы в [ Mathfield.executeCommand() ] {@link mathfield#executecommand} для выполнения различных команд. Они также могут быть связаны с ключами в виртуальной клавиатуре.

См. {@Tutorial Selectors} для списка всех селекторов.