Vueコンポーネント

Vue用のWijmo コンポーネント は、VueテンプレートマークアップでWijmo コントロール を使用できるようにします。 Wijmo Vue コンポーネント は、それが表すWijmo コントロール のラッパーです。コンポーネント は、背後でWijmo コントロール を作成し、controlプロパティを介してコントロールインスタンスへの参照を提供します。コンポーネント を使用すると、Vueテンプレートマークアップで宣言的に コントロール のプロパティとイベントに連結できます。

Wijmo Vueコンポーネントは、名前に「vue2」を含む一連のモジュール（1つのコアライブラリモジュールに対して1つのモジュール）として出荷されています。たとえば、「wijmo.vue2.grid」パッケージは、コアの「wijmo.grid」パッケージのコントロールのコンポーネントを表します。パッケージは別々にインストールすることも、「@mescius/wijmo.vue2.all」グループパッケージを使ってまとめてインストールすることもできます。

npm install @mescius/wijmo.vue2.all

Wijmo npmパッケージの詳細については、npmによるWijmoの参照トピックを参照してください。

その後、ESMの_import_ステートメントを使用してモジュールをインポートできます。たとえば、次のimport文は"wijmo.vue2.grid"モジュールの内容をインポートします。

import '@mescius/wijmo.vue2.grid';

Vue3 プロジェクトでは、wijmo コンポーネントを次の 2 つの方法で使用できます。

カスタムコンポーネントレベルで登録する方法

これは、カスタムコンポーネントレベルで Wijmo コンポーネントとディレクティブを登録するための最も明確な登録方法です。

補助レジスタ機能を利用して登録する方法

指定された Wijmo モジュールのすべてのコンポーネントとディレクティブをアプリケーションレベルで登録します。
多くのコンポーネントが使用され、同時に登録する必要がある場合に便利です。

カスタムコンポーネントレベルで登録する方法

この登録方法は、Wijmoコンポーネントをコンポーネントレベルで登録するために使用されます。たとえば、このコードはWijmoコンポーネントとディレクティブをインポートし、コンポーネントレベルで登録します。

Options API

<template>
<wj-input-number />
 <button v-wjTooltip="’クリックしてください’">Click</button>
</template>
<script>
  import { WjTooltip } from '@mescius/wijmo.vue2.core'; // Tooltipディレクティブをインポートします
  import { WjInputNumber } from '@mescius/wijmo.vue2.input'; // InputNumberコンポーネントをインポートします
  export default {
    components: {
      WjInputNumber, // InputNumberコンポーネントをコンポーネントに登録します
    },
    directives: {
      WjTooltip, // Tooltipディレクティブをコンポーネントに登録します
    },
  }
</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</button>
  <wj-input-number ></wj-input-number>
</template>

補助レジスタ機能を利用して登録する方法

この方法では、Wijmo Vueモジュールをインポートし、そのモジュールに含まれるコンポーネントやディレクティブをアプリケーションレベルで使用することができます。アプリケーション内にWijmoコンポーネントを使用する多くのVueコンポーネントがある場合に便利です。例えば、以下のコードでは、main.jsファイルにコンポーネントを登録し、Appコンポーネントのテンプレートにwj-input-numberコンポーネントとwj-tooltipディレクティブを追加しています。

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>

Wijmo CSSの追加

Wijmoコントロールを正常に表示および動作させるには、Wijmo CSSファイルをアプリケーションにロードする必要があります。

スタイルは @mescius/wijmo.styles npmパッケージに含まれます。主要なCSSファイルは2つあります。

wijmo.css：すべてのWijmoコントロールのスタイルが含まれます。
wijmo-core.css：wijmo.cssの縮小版で、Enterprise専用コントロールのスタイルは含まれません。

アプリケーションのルートコンポーネントファイルにスタイルを読み込むことができます。単一ファイルコンポーネントの.vueファイルを使用する場合は、styleセクションの先頭に次のようなCSS importステートメントを追加します。

@import '../node_modules/@mescius/wijmo.styles/wijmo.css';

ここでは、CSSファイルへの相対パスを_node_modules_フォルダーを含めて指定する必要があることに注意してください。

通常の.jsファイルを使用する場合は、ファイルの先頭に次のESMインポートステートメントを追加します。

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

Vueマークアップ構文

Wijmo Vueコンポーネントは、テンプレートマークアップで一貫した命名規則を使用します。コンポーネントに使用されるHTMLの要素名と属性名は、次の単純な規則を使用してコンポーネントクラスとメンバー名から簡単に推測できます。

Wijmoコンポーネントを表すHTML要素名は、小文字ハイフン構文を使用して指定されます。たとえば、WjInputNumberコンポーネントは、wj-input-numberのように記述する必要があります。

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

補助登録付きでキャメルケースでコンポーネントを書くには、モジュールからコンポーネントをインポートし、コンポーネント内で指定します。

main.js

import {registerInput,WjInputNumber} from "@mescius/wijmo.vue2.input"
let app = createApp(App);
// Wijmoコンポーネントを登録します
app.component('WjInputNumber',WjInputNumber);
app.mount('#app');

app.vue

<WjInputNumber></WjInputNumber>

Vue3 では、属性、プロパティ、イベントの命名に厳密な規則は適用されません。つまり、Wijmo コンポーネントのプロパティとイベントは、キャメルケースと小文字のダッシュを使用しても指定できます。

名前の前には、v-bind: ディレクティブ（またはその省略形 ':'）を付けなければなりません。v-bind:ディレクティブを省略できる唯一の例外は、文字列型のプロパティを文字列定数にバインドする場合です。これは一方向バインディングと呼ばれ、プロパティの値やイベントハンドラを設定するために使用されます。

双方向バインディングはv-modelディレクティブを使って実現します。これにより、フォーム入力とコンポーネント・データの間に双方向バインディングを作成することができます。v-model を使用すると、Vue は data プロパティと入力要素の値の更新を自動的に処理します。

<wj-input-number
    v-model:value="amount" // プロパティへの双方向バインディング
    format="n0" // 文字列定数へのバインディング
    :is-read-only="true" // boolean値へのバインディング
    :valueChanged="valueChanged"> // イベントバインディング
</wj-input-number>

イベントバインディングの詳細

Wijmo イベントハンドラーは、送信元とイベント引数の 2 つのパラメーターを持つ関数として定義されます。コンポーネントイベントにバインドする場合は、このシグネチャを持つ関数の名前をバインディングソースとして指定する必要があります。

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) 
//イベントハンドラーを設定します。
function valueChanged(sender,args){
   amount.value = sender.value;
}
</script>
<template>
  <button v-wjTooltip="'クリックしてください'">Click</button>
  <wj-input-number :value="amount" :valueChanged="valueChanged"></wj-input-number>
</template>

「initialized」イベント

すべての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){
  //処理を設定します。
}
</script>
<template>
  <wj-flex-grid :initialized="initGrid"></wj-flex-grid>
</template>

コードでのWijmoコントロールの作成

Vue用のWijmo コンポーネント は、テンプレートマークアップで使用されます。コードでWijmoコントロールを作成する場合は、コンポーネントではなく、その目的で用意されているコアモジュールのWijmo コントロール を使用する必要があります。コアモジュールの名前は、対応するVue相互運用モジュール名から「vue2」を省略した名前と同じです。たとえば、次のコードは、コードでFlexGridコントロールを作成します。

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

Vueコンポーネント

カスタムコンポーネントレベルで登録する方法

Options API

Composition API

補助レジスタ機能を利用して登録する方法

main.js

app.vue

Wijmo CSSの追加

Vueマークアップ構文

イベント バインディングの詳細

Options API

Composition API

「initialized」イベント

Options API

Composition API

コードでのWijmoコントロールの作成

イベントバインディングの詳細