vue mathlive

MathLive Vue 래퍼는 <mathlive-mathfield> HTML 태그를 구현하는 VUE 구성 요소를 제공합니다.

이 구성 요소는 MathLive 라이브러리를 사용하여 공식을 편집하는 데 사용할 수 있습니다. 편집기는 모바일 용 가상 키보드를 포함하여 풍부하고 액세스 가능한 편집 UI를 제공하며 Latex, MathML 또는 음성 텍스트와 같은 출력을 제공 할 수 있습니다.

시작하기

MathLive 라이브러리는 별도로로드해야합니다. 이를 통해 래퍼가 사용할 특정 버전의 라이브러리를 선택할 수 있습니다.

다음으로 래퍼를 가져와야하고 두 개는 Vue.use() 사용하여 연결해야합니다.

참고 :이 저장소에는 샘플 만 포함되어 있습니다. Vue 래퍼는 메인 Mathlive 라이브러리로 포장되어 있습니다.

주의 : Mathfield 구성 요소를 인스턴스화 할 때 런타임 오류가 발생하고 Vue의 콘솔에서 경고를 "VUE의 런타임 전용 빌드를 사용하고 있습니다 ..." runtimeCompiler: true 하십시오.

 < 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 는 Keystroke를 설명하는 문자열입니다. ev 기본 키보드 이벤트입니다. 이벤트 처리를 중지하려면 False를 반환하십시오
onMoveOutOf	(string) => boolean	키보드 내비게이션이 삽입 지점이 Mathfield를 떠날 때 콜백이 호출되었습니다. 인수는 항법의 방향 (앞으로”또는 "뒤로"를 나타냅니다. 필드의 시작 부분을 감싸는 것이 충실하기 위해 False를 반환하십시오. 기본적으로 삽입 지점이 감싸게됩니다.
onTabOutOf	(string) => boolean	탭 (또는 Shift-TAB)을 누르면 콜백이 호출되면 삽입 지점이 Mathfield를 떠나게됩니다. 인수는 항법의 방향 (앞으로”또는 "뒤로"를 나타냅니다. 필드의 시작 부분을 감싸는 것이 충실하기 위해 False를 반환하십시오. 기본적으로 삽입 지점이 감싸게됩니다.

이벤트

이름	설명
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	Mathfield가 집중하면 사실입니다
focus()	초점을 Mathfield로 설정하십시오
blur()	Mathfield에서 초점을 제거하십시오
text(format:string): string	Mathfield의 내용을 지정된 형식의 문자열로 반환하십시오. "latex" , "latex-expanded" (모든 라텍스 매크로는 정의로 확장 됨), "spoken" , "mathML"
selectedText(format:string): string	text() 와 마찬가지로 현재 선택에 대해서만.
insert(content:string, options:object)	options.insertionMode = 'replaceSelection' (기본값), 'replaceAll' , 'insertBefore' , 'insertAfter' options.selectionMode 삽입 후 선택이 어디에 있는지 설명 'before' . 'after' 'placeholder' : 선택은 삽입 된 항목에서 첫 번째 사용 가능한 자리 표시자가됩니다. options.placeholder - 필요한 경우 자리 표시 자 문자열 options.format - 문자열의 형식 s : 'auto' : 문자열은 라텍스 조각 또는 명령으로 해석됩니다) (기본값), 'latex' : 문자열은 라텍스 조각으로 엄격하게 해석됩니다. options.smartFence 사실 mleft...mright , 평범한 울타리를 홍보 ( left...right options.suppressChangeNotifications true 인 경우 ContentDidChange 및 SelectionDidChange 알림의 핸들러는 호출되지 않습니다. 기본 false .
keystroke(keys:string, evt:Event)	키 조합을 누르는 사용자를 시뮬레이션하십시오
typedText(text:string)	텍스트를 입력하는 사용자를 시뮬레이션합니다.
selectionIsCollapsed():boolean	선택이 붕괴되면, 즉 단일 삽입 지점
selectionDepth():number	선택 그룹의 깊이를 반환하십시오. 선택이 루트 레벨에있는 경우 0을 반환합니다. 선택이 루트 레벨에있는 분자의 일부인 경우 1. 반환 1.이 경우 숫자는 "선택 그룹"이 될 것입니다.
selectionAtStart():boolean	선택 그룹의 시작 부분에서 선택이 시작되면 true 반환
selectionAtEnd():boolean	선택이 선택 그룹의 끝까지 확장되면 true 반환
select()	Mathfield의 내용을 선택하십시오

선택기

선택기는 [ Mathfield.executeCommand() ] {@link mathfield#executeCommand}로 전달 될 수 있습니다. 또한 가상 키보드의 키와 연관 될 수도 있습니다.

모든 선택기 목록은 {@tutorial selectors}를 참조하십시오.