Vue Components
Vue 2의 지원이 종료되었기 때문에, 지속적인 지원 및 Wijmo와의 호환성을 위해 Vue 3로 전환을 강력히 권장합니다.
2020년 V2 릴리스에서 Wijmo 라이브러리는 Vue 2에서 사용된 동일한 상호 운용 메커니즘을 통해 Vue 3에 대한 베타 지원을 도입했습니다. 다만 Wijmo에 의존하는 기존의 사용자 정의 컴포넌트를 Vue 3 환경에서 원활하게 작동하려면 일부 조정이 필요합니다.
설치
Wijmo Vue 컴포넌트는 npm 패키지로 제공되며, 각 핵심 라이브러리 패키지별로 하나의 패키지로 나뉘어 있습니다. 예를 들어, "wijmo.vue2.grid" 패키지는 "wijmo.grid" 패키지의 컴포넌트를 나타냅니다. 패키지는 개별적으로 설치할 수 있으며, "@mescius/wijmo.vue2.all" 그룹 패키지를 사용하여 모두 함께 설치할 수도 있습니다.
npm install @mescius/wijmo.vue2.allWijmo의 NPM 패키지에 대한 자세한 내용은 해당 주제를 참조해 주세요.
Vue3 프로젝트에서 Wijmo 컴포넌트은 아래 2가지 Vue3 방법에서 사용될 수 있습니다.:
사용자 정의 컴포넌트 수준 등록
사용자 정의 컴포넌트 수준에서 Wijmo 컴포넌트 및 지시문을 등록하기 위한 가장 명확한 방법입니다.
보조 등록 함수 사용
주어진 Wijmo 모듈의 모든 컴포넌트와 지시잘 애플리케이션 수준에서 등록
많은 컴포넌트를 동시에 등록해야 할 때 유용
사용자 정의 컴포넌트 수준 등록
해당 등록 방법은 Wijmo 컴포넌트를 컴포넌트 수준에서 등록하는 데 사용됩니다. 예를 들어, 아래 코드는 Wijmo 컴포넌트와 지시자를 가져와 컴포넌트 수준에서 등록하는 방법을 보여줍니다.
Options API
<template>
<wj-input-number />
<button v-wjTooltip="’Click me’">Click</button>
</template>
<script>
import { WjTooltip } from '@grapecity/wijmo.vue2.core'; // import Wijmo Tooltip directive
import { WjInputNumber } from '@grapecity/wijmo.vue2.input'; // import the Wijmo InputNumber Vue3 component
export default {
components: {
WjInputNumber, // register the InputNumber Component for Vue3 component
},
directives: {
WjTooltip, // register the directive for Vue3 component
},
}
</script>Composition API
<script setup>
import {WjTooltip as vWjTooltip} from "@mescius/wijmo.vue2.core"
import {WjInputNumber} from "@mescius/wijmo.vue2.input"
</script>
<template>
<button v-wjTooltip="'Click me'">Click</button>
<wj-input-number ></wj-input-number>
</template>보조 등록 함수 사용
이 설정을 통해 Wijmo Vue 모듈을 가져와 애플리케이션 수준에서 해당 모듈에 포함된 컴포넌트와 지시자를 사용할 수 있습니다. 이 방법은 애플리케이션 내에서 여러 Vue 컴포넌트가 Wijmo 컴포넌트를 사용하는 경우 유용합니다. 예를 들어, 이 코드는 main.js 파일에서 컴포넌트를 등록하고, wj-input-number와 wj-tooltip 지시자 컴포넌트를 App 컴포넌트의 템플릿에 추가하는 방법을 보여줍니다.
main.js
import { createApp } from 'vue'
import App from './App.vue'
import '@mescius/wijmo.styles/wijmo.css';
import { registerCore} from "@mescius/wijmo.vue2.core";
import { registerInput } from "@mescius/wijmo.vue2.input";
let app = createApp(App);
registerCore(app);
registerInput(app);
app.mount('#app');
App.vue:app.vue
<template>
<button v-wjTooltip="'Click me'">Click</button>
<wj-input-number ></wj-input-number>
</template>Vue 모듈에서 registerModuleName을 한 번만 가져오면 되며, 이상적으로는 단일 페이지 애플리케이션(SPA)의 root 모듈에서 가져오는 것이 좋습니다.
Wijmo CSS 추가하기
Wijmo 컨트롤이 올바르게 보이고 작동하려면 Wijmo CSS 스타일을 응용 프로그램에 로드해야 합니다. 스타일은 @mescius/wijmo.styles npm 패키지로 제공됩니다.
wijmo.css - 모든 Wijmo 컨트롤에 대한 스타일 포함
응용 프로그램의 루트 구성 요소 파일에 스타일을 로드할 수 있습니다. 단일 파일 컴포넌트 .vue 파일을 사용하는 경우 style 섹션 맨 위에 다음과 같이 css import 문을 추가 하십시오.
import "@mescius/wijmo.styles/wijmo.css";Vue 마크업 구문
Wijmo Vue 컴포넌트는 템플리트 마크업에서 일관된 이름 규칙을 사용합니다. 컴포넌트에 사용되는 HTML 요소 및 특성 이름은 다음과 같은 간단한 규칙을 사용하여, 컴포넌트 클래스 및 멤버 이름에서 쉽게 추론할 수 있습니다.
Wijmo 컴포넌트를 나타내는 HTML 요소 이름은 소문자 대시 구문을 사용하여 지정됩니다. 예를 들어, WjInputNumber 컴포넌트는 wj-input-number 로 사용해야 합니다.
보조 등록 방법을 사용할 때는 소문자 대시(-) 문법을 사용할 수 있습니다.
<wj-input-number :value="amount"></wj-input-number>보조 등록 방식에서 컴포넌트를 camelCase로 작성하려면, 모듈에서 컴포넌트를 가져와 해당 컴포넌트를 명시적으로 등록하면 됩니다.
import {registerInput,WjInputNumber} from "@mescius/wijmo.vue2.input"
let app = createApp(App);
// register the Wijmo Components
app.component('WjInputNumber',WjInputNumber);
app.mount('#app');`app.vue
<WjInputNumber></WjInputNumber>보조 등록 방법 : 프로젝트에서 사용할 각 컴포넌트를 명시적으로 지정
사용자 정의 컴포넌트 등록 방법 : 소문자 대시(-) 문법과 camelCase 문법 모두를 사용하여 컴포넌트를 지정
Vue 3에서는 속성, 이벤트, 속성 이름에 대해 엄격한 규칙이 적용되지 않습니다. 따라서 Wijmo 컴포넌트의 속성 및 이벤트를 camelCase와 소문자 대시(-) 문법으로 모두 지정할 수 있습니다.
이름은 v-bind: 지시어(또는 그 축약형인 :)를 앞에 붙여야 합니다. 문자열 타입 속성을 문자열 상수에 바인딩할 때는 v-bind: 지시어를 생략할 수 있습니다. 이를 일방향 바인딩이라고 하며, 속성의 값을 설정하거나 이벤트 핸들러를 지정할 때 사용됩니다.
양방향 바인딩은 v-model 지시어를 사용하여 구현됩니다. v-model 을 사용하면 폼 입력과 컴포넌트 데이터 간의 양방향 바인딩을 생성할 수 있습니다. v-model 을 사용하면 Vue가 자동으로 데이터 속성 업데이트와 입력 요소의 값을 처리합니다.
<wj-input-number
v-model:value="amount" // two-way binding to a component property
format="n0" // binding to a string constant
:is-read-only="true" // binding to boolean
:valueChanged="valueChanged"> // event binding
</wj-input-number>이벤트 바인딩 세부 사항
Wijmo 이벤트 핸들러는 sender 및 event 인자의 두 매개 변수를 가진 함수로 정의됩니다. 컴포넌트 이벤트에 바인드할때, 이 서명이 있는 함수의 이름을 바인딩 소스로 지정해야 합니다. 예를 들면 다음과 같습니다.
Wijmo 이벤트 핸들러는 두 개의 매개변수를 가진 함수로 정의됩니다: sender와 event 인자. 컴포넌트 이벤트에 바인딩할 때는 이 시그니처를 가진 함수의 이름을 바인딩 소스로 지정해야 합니다.
Options API
<template>
<wj-input-number
:value="amount"
:value-changed="onValueChanged">
</wj-input-number>
</template>
<script>
...
let App = {
...
methods: {
onValueChanged: function(sender, args) {
this.amount = sender.value;
},
...
};
...
</script>Composition API
<script setup>
import {ref} from "vue"
const amount = ref(100) // variables
//methods and event handler methods
function valueChanged(sender,args){
amount.value = sender.value;
}
</script>
<template>
<button v-wjTooltip="'Click me'">Click</button>
<wj-input-number :value="amount" :valueChanged="valueChanged"></wj-input-number>
</template>"초기화"이벤트
모든 Wijmo Vue 구성 요소에는 컨트롤이 페이지에 추가되고 초기화된 후에 발생하는 "초기화(initialized)"이벤트가 포함됩니다.
이 이벤트를 사용하여 마크업에서 속성을 설정하는 것 외에도, 추가 초기화를 수행할 수 있습니다. 핸들러 함수의 서명은 다른 Wijmo 이벤트 핸들러와 동일합니다. 예를 들면 다음과 같습니다.
Options API
<template>
<wj-flex-grid :initialized="initGrid">
</wj-flex-grid>
</template>
<script>
...
let App = {
...
methods: {
initGrid: function(grid, args) {
grid.mergeManager = new CustomMerge(grid);
},
...
};
...
</script>Composition API
<script setup>
function initGrid(sender, args){
//your code
}
</script>
<template>
<wj-flex-grid :initialized="initGrid"></wj-flex-grid>
</template>코드에서 Wijmo 컨트롤 만들기
Vue 용 Wijmo 컴포넌트 는 템플릿 마크업에서 사용하기 위한 것입니다. 코드에서 Wijmo 컨트롤을 만들려면 컴포넌트 대신, 이 core 모듈의 Wijmo 컨트롤 을 사용해야 합니다. core 모듈은 해당 Vue interop 모듈과 이름이 동일하지만 이름에 "vue2" 단어가 없습니다. 예를 들어, 이 코드는 코드에서 FlexGrid 컨트롤을 만듭니다.
import { FlexGrid } from "@mescius/wijmo.grid";
let flex = new FlexGrid("#host_element");