Vue3에서 Wijmo 사용하기
Wijmo 컴포넌트는 Vue 템플릿 마크업에서 Wijmo 컨트롤을 사용할 수 있게 해줍니다. Wijmo Vue 컴포넌트는 해당하는 Wijmo 컨트롤을 감싸는 역할을 합니다. 컴포넌트는 백그라운드에서 Wijmo 컨트롤을 생성하고, 해당 컨트롤 인스턴스에 대한 참조를 control 속성을 통해 제공합니다. 또한, 컴포넌트는 Vue 템플릿 마크업에서 선언적으로 컨트롤 속성과 이벤트에 바인딩할 수 있도록 합니다
참고 npm을 통해 설치하는 것 외에도 Wijmo Dev Kit를 다운로드할 것을 권장합니다. 개발 키트에는 수백 개의 샘플 소스 코드, 참조 앱 등이 포함되어 있습니다.
이 가이드는 Wijmo의 FlexGrid 컴포넌트를 사용하여 Vue 3에서 DataGrid를 빠르게 생성하는 방법을 안내합니다.
설치
Wijmo Vue3 컴포넌트는 npm 패키지로 제공되며, 각 핵심 라이브러리 패키지별로 하나의 패키지로 나뉩니다. 예를 들어, "wijmo.vue2.grid" 패키지는 "wijmo.grid" 패키지의 컴포넌트를 나타냅니다. 패키지는 개별적으로 설치할 수 있으며, "@mescius/wijmo.vue2.all" 그룹 패키지를 사용하여 모두 함께 설치할 수도 있습니다.
npm install @mescius/wijmo.vue2.allWijmo의 NPM 패키지에 대한 자세한 내용은 이 주제 를 참조해주세요.
Composition API와 함께 Wijmo 컴포넌트 가져오기
Vue3 프로젝트에서 Wijmo 컴포넌트는 다음 두 가지 방식으로 사용할 수 있습니다:
사용자 정의 컴포넌트 레벨 등록
보조 등록 함수 사용
이 설정을 통해 Wijmo Vue 모듈을 가져와 해당 모듈에 포함된 컴포넌트를 사용할 수 있습니다. 예시로 아래 코드는 wj-flex-grid 컴포넌트를 App 컴포넌트의 템플릿에 추가하는 방법을 보여줍니다:
사용자 정의 컴포넌트 레벨 등록
해당 등록 방법은 Wijmo 컴포넌트와 지시자를 컴포넌트 수준에서 등록하는 방식입니다. 예를 들어, 아래 코드는 Wijmo 컴포넌트와 지시자를 가져와서 컴포넌트 수준에서 등록하는 방법을 보여줍니다.
<script setup>
import { ref } from 'vue';
import { WjTooltip as vWjTooltip} from '@mescius/wijmo.vue2.core'; //import directive
import { WjInputNumber } from '@mescius/wijmo.vue2.input'; //import component
const count = ref(3) // variables
</script>
<template>
<button v-wjTooltip="'Just a string'">
Paragraph with a string tooltip.
</button>
<br>
<wj-input-number v-model:value="count"></wj-input-number><br>
</template>보조 등록 함수 사용
해당 설정을 통해 Wijmo Vue 모듈을 가져와 애플리케이션 수준에서 해당 모듈에 포함된 컴포넌트와 지시자를 사용할 수 있습니다.
이 방법은 애플리케이션 내에서 여러 Vue 컴포넌트가 Wijmo 컴포넌트를 사용할 때 유용합니다. 예를 들어, 아래 코드는 wj-flex-grid 컴포넌트를 App 컴포넌트의 템플릿에 추가하는 방법을 보여줍니다.
main.js
import { createApp } from 'vue'
import App from './App.vue'
import '@mescius/wijmo.styles/wijmo.css';
import {registerGrid} from "@mescius/wijmo.vue2.grid"
let app = createApp(App);
registerGrid(app);
app.mount('#app') app.vue
<script setup>
import { ref } from 'vue'
// variables
const data = ref(getData())
//methods
function getData() {
var data = [];
var countries= "US,Japan,India,Italy,UK".split(",");
for (let i = 0; i < 5; i++) {
data.push({
id: i+1,
country: countries[i%countries.length],
sales: Math.random() * 1000,
downloads: Math.random() * 1000
});
}
return data;
}
</script>
<template>
<wj-flex-grid :itemsSource="data"></wj-flex-grid>
</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 정보
Vue 애플리케이션에서 Wijmo 사용에 대한 자세한 정보는 Vue 구성 요소 주제를 참조하십시오.