Vue Components

Vue 버전 2.0.0 이상을 지원합니다 .

Vue 용 Wijmo 컴포넌트를 사용하면 Vue 템플릿 마크업에서 Wijmo 컨트롤을 사용할 수 있습니다. Wijmo Vue 컴포넌트는 Wijmo 컨트롤 을 나타내는 래퍼(wrapper)입니다. Component 는 뒤에서 Wijmo 컨트롤을 만들고 control 속성을 통해 컨트롤 인스턴스에 대한 참조를 제공 합니다. 컴포넌트를 사용하면 Vue 템플리트 마크업에서 컨트롤 속성 및 이벤트에 선언적으로 바인딩 할 수 있습니다 .

Wijmo Vue 구성 요소는 이름에 "vue2"단어가 있는 core 라이브러리 패키지 당 하나의 패키지인 npm 패키지 세트로 제공됩니다. 예를 들어 "wijmo.vue2.grid" 패키지는 핵심 "wijmo.grid" 패키지의 컨트롤 컴포넌트를 나타냅니다. "@grapecity/wijmo.vue2.all" 그룹 패키지를 사용하여 패키지를 개별적으로 또는 함께 설치할 수 있습니다.

npm install @grapecity/wijmo.vue2.all

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

그런 다음 ESM import 문을 사용하여 모듈을 가져올 수 있습니다 . 예를 들어이 import 문은 "wijmo.vue2.grid" 모듈의 내용을 가져옵니다.

import "@grapecity/wijmo.vue2.grid";

Wijmo 컴포넌트 가져 오기

이 설정을 사용하면 Wijmo Vue 모듈을 가져 와서 포함된 컴포넌트를 사용할 수 있습니다. 예를 들어, 이 코드는 wj-flex-grid 컴포넌트를 App 구성 요소의 템플릿에 추가합니다.

<template>
  <wj-flex-grid :items-source="data"></wj-flex-grid>
</template>

<script>
  import Vue from "vue";
  import "@grapecity/wijmo.vue2.grid";
  import { getData } from "./data";

  let App = Vue.extend({
    name: "app",
    data: function () {
      return {
        data: getData(),
      };
    },
  });
</script>

Wijmo Vue 컴포넌트는 전체적으로 등록되므로 @grapecity/wijmo.vue2. * 모듈에서 특정 클래스 또는 변수를 가져올 필요가 없습니다. 이 때문에 from 절 없이 import 문을 사용할 수 있습니다 . 단일 페이지 애플리케이션의 루트 모듈 어딘가에 Wijmo Vue 모듈을 한 번만 가져오면 충분합니다. 모듈을 여러번 가져오는 것도 가능합니다.

Wijmo CSS 추가

Wijmo 컨트롤이 올바르게 보이고 작동하려면 Wijmo CSS 스타일을 응용 프로그램에 로드해야 합니다. 스타일은 @grapecity/wijmo.styles npm 패키지로 제공됩니다. 두 가지 주요 CSS 파일이 있습니다.

wijmo.css- 모든 Wijmo 컨트롤에 대한 스타일 포함
wijmo-core.css- 엔터프라이즈 컨트롤 스타일이 포함되지 않은 wijmo.css의 개별 버전입니다.

응용 프로그램의 루트 구성 요소 파일에 스타일을 로드할 수 있습니다. 단일 파일 컴포넌트 .vue 파일을 사용하는 경우 style 섹션 맨 위에, 다음과 같이 css import 문을 추가 하십시오.

@import "../node_modules/@grapecity/wijmo.styles/wijmo.css";

여기서 파일로의 상대 경로를 지정해야 합니다. 여기에는 node modules 폴더가 포함되어 있습니다.

일반 .js 파일을 사용하는 경우, 파일 시작 부분에 이 ESM import 문을 추가하십시오.

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

Vue 마크업 구문

Wijmo Vue 컴포넌트는 템플리트 마크업에서 일관된 이름 규칙을 사용합니다. 컴포넌트에 사용되는 HTML 요소 및 특성 이름은 다음과 같은 간단한 규칙을 사용하여, 컴포넌트 클래스 및 멤버 이름에서 쉽게 추론할 수 있습니다.

Wijmo 컴포넌트를 나타내는 HTML 요소 이름은 소문자 대시 구문을 사용하여 지정됩니다. 예를 들어, WjInputNumber 컴포넌트는 wj-input-number 로 사용해야 합니다.

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

Wijmo 컴포넌트 속성 및 이벤트를 나타내는 속성의 이름은 소문자 대시도 사용하여 지정됩니다. 이름 앞에 v-bind : 지시문 (또는 ':' 속기)을 붙여야합니다 . v-bind : 지시문을 생략할 수 있는 유일한 예외는 문자열 유형 속성을 문자열 상수에 바인딩 할 때입니다. 예를 들면 다음과 같습니다.

<wj-input-number
    :value="amount" // binding to a component property
    format="n0" // binding to a string constant
    :is-read-only="true" // binding to boolean
    :value-changed="valueChanged"> // event binding
</wj-input-number>

이벤트 바인딩 세부 사항

Wijmo 이벤트 핸들러는 sender 및 event 인자의 두 매개 변수를 가진 함수로 정의됩니다. 컴포넌트 이벤트에 바인드할때, 이 서명이 있는 함수의 이름을 바인딩 소스로 지정해야 합니다. 예를 들면 다음과 같습니다.

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

methods: {
    onValueChanged: function(sender, args) {
        this.amount = sender.value;
    },
    ...
}

"초기화"이벤트

모든 Wijmo Vue 구성 요소에는 컨트롤이 페이지에 추가되고 초기화된 후에 발생하는 "초기화(initialized)"이벤트가 포함됩니다.

이 이벤트를 사용하여 마크업에서 속성을 설정하는 것 외에도, 추가 초기화를 수행할 수 있습니다. 핸들러 함수의 서명은 다른 Wijmo 이벤트 핸들러와 동일합니다. 예를 들면 다음과 같습니다.

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

methods: {
    initGrid: function(grid, args) {
        grid.mergeManager = new CustomMerge(grid);
    },
    ...
}

코드에서 Wijmo 컨트롤 만들기

Vue 용 Wijmo 컴포넌트 는 템플릿 마크업에서 사용하기 위한 것입니다. 코드에서 Wijmo 컨트롤을 만들려면 컴포넌트 대신, 이 core 모듈의 Wijmo 컨트롤 을 사용해야 합니다. core 모듈은 해당 Vue interop 모듈과 이름이 동일하지만 이름에 "vue2" 단어가 없습니다. 예를 들어, 이 코드는 코드에서 FlexGrid 컨트롤을 만듭니다.

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