[]
데모 테마 디자이너 도움말 API
다른 샘플 다운로드
(Showing Draft Content)

Vue 컴포넌트

Wijmo Vue 컴포넌트는 각각 별도의 npm 패키지로 제공됩니다. 각 npm 패키지 이름은 해당 기본 컨트롤 이름에 "vue2"가 추가된 형태입니다.

예를 들어, "wijmo.vue2.grid" 패키지는 기본 라이브러리 "wijmo.grid"에 대한 Vue 컴포넌트를 제공합니다.


Vue 설치하기

필요한 컴포넌트만 설치하거나, "wijmo.vue2.all" 패키지를 사용하여 전체를 한 번에 설치할 수 있습니다:

npm install @mescius/wijmo.vue2.all

Wijmo의 NPM 패키지에 대한 자세한 내용은 해당 주제를 참조해 주세요.


Vue 프로젝트에서 Wijmo 컴포넌트 사용 방법

Vue 프로젝트에서는 Wijmo 컴포넌트를 두 가지 방법으로 사용할 수 있습니다:

  • 사용자 정의 컴포넌트 레벨 등록(Custom Component-Level Registration)

  • 보조 등록 함수(Auxiliary Register Functions)


사용자 정의 컴포넌트 레벨 등록

가장 간단한 방법은 컴포넌트 레벨에서 Wijmo 컴포넌트와 디렉티브를 등록하는 것입니다.

Vue에서는 Composition API 또는 Options API를 사용하여 Wijmo 컴포넌트를 통합할 수 있습니다.

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>

Options API

<template>
  <wj-input-number/>
  <button v-wjTooltip="'Click me'">Click</button>
</template>

<script>
import { WjTooltip } from '@mescius/wijmo.vue2.core';
import { WjInputNumber } from '@mescius/wijmo.vue2.input';

export default {
  components: {
    WjInputNumber,
  },
  directives: {
    WjTooltip,
  },
}
</script>


보조 등록 함수 사용

보조 등록 함수는 특정 Wijmo 모듈의 모든 컴포넌트 및 디렉티브를 한 번에 등록할 수 있도록 도와줍니다.

여러 컴포넌트를 등록해야 할 때 설정을 간소화할 수 있어 유용합니다.

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';

const data = ref(getData());

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>

type=info

※ 보조 등록 함수(registerInput, registerGrid 등)는 SPA(싱글 페이지 애플리케이션) 루트 모듈(main.js)에서 한 번만 호출하면 됩니다.


Wijmo CSS 추가하기

Wijmo 스타일은 @mescius/wijmo.styles npm 패키지에 포함되어 있으며, 다음과 같은 두 가지 CSS 파일이 있습니다:

  • wijmo.css: 모든 컨트롤 스타일 포함

  • wijmo-core.css: Enterprise 컨트롤 스타일을 제외한 축약 버전

Vue 애플리케이션에서는 다음 방법 중 하나로 스타일을 추가할 수 있습니다:

  • App.vue 파일 또는 루트 Vue 컴포넌트에 import

  • main.js 파일 상단에 import (Composition API + 전역 등록 시 추천)

import "@mescius/wijmo.styles/wijmo.css";

Vue 템플릿 문법

Wijmo Vue 컴포넌트는 일관된 명명 규칙을 따릅니다:

  • HTML 엘리먼트 이름: 소문자와 대시(-) 사용 → 예: <wj-input-number>

  • 속성, 이벤트 이름: camelCase 또는 lower-case-dash 모두 허용

예시:

<wj-input-number :value="amount"></wj-input-number>

또는 컴포넌트를 camelCase로 등록해 사용:

main.js

import { WjInputNumber, WjInputColor } from "@mescius/wijmo.vue2.input";

let app = createApp(App);
app.component('WjInputNumber', WjInputNumber)
   .component('WjInputColor', WjInputColor);
app.mount('#app');

App.vue

<WjInputNumber></WjInputNumber>
<WjInputColor></WjInputColor>


바인딩 방법

  • 단방향 바인딩: v-bind: 또는 : 접두사 사용

  • 양방향 바인딩: v-model 사용

예시:

<wj-input-number 
  v-model:value="amount"    // 양방향 바인딩
  format="n0"               // 문자열 상수 바인딩
  :is-read-only="true"      // 불리언 바인딩
  :valueChanged="valueChanged"> // 이벤트 바인딩
</wj-input-number>


이벤트 핸들러 세부 사항

Wijmo 이벤트 핸들러는 sender와 eventArgs 두 매개변수를 받습니다.

Vue 사용 방식에 따라 작성 방법이 조금 다릅니다.

Options API 예시

<template>
  <wj-input-number :value="amount" :value-changed="onValueChanged"></wj-input-number>
</template>

<script>
export default {
  methods: {
    onValueChanged(sender, args) {
      this.amount = sender.value;
    }
  }
}
</script>


Composition API 예시

<script setup>
import { ref } from 'vue';

const amount = ref(100);

function valueChanged(sender, args) {
  amount.value = sender.value;
}
</script>

<template>
  <wj-input-number :value="amount" :valueChanged="valueChanged"></wj-input-number>
</template>


"초기화(initialized)"이벤트

모든 Wijmo Vue 컴포넌트에는 initialized 이벤트가 있습니다.

이 이벤트는 컨트롤이 페이지에 추가되고 초기화된 후 발생합니다.

추가 초기화 작업이 필요할 때 사용할 수 있습니다.

Options API

<template>
  <wj-flex-grid :initialized="initGrid"></wj-flex-grid>
</template>

<script>
export default {
  methods: {
    initGrid(grid, args) {
      grid.mergeManager = new CustomMerge(grid);
    }
  }
}
</script>

Composition API

<script setup>
function initGrid(sender, args) {
  // 추가 설정
}
</script>

<template>
  <wj-flex-grid :initialized="initGrid"></wj-flex-grid>
</template>


코드에서 Wijmo 컨트롤 만들기

Wijmo Vue 컴포넌트는 템플릿 마크업에서 사용하도록 설계되었습니다.

코드로 컨트롤을 직접 생성해야 하는 경우에는 Vue 컴포넌트가 아닌, 기본 Wijmo 모듈을 사용해야 합니다.

예를 들어 FlexGrid를 코드로 생성하려면 아래와 같습니다.:

import { FlexGrid } from '@mescius/wijmo.grid';
let flex = new FlexGrid('#host_element');