5.20193.637
wijmo.vue2.gauge Wijmo API モジュール

wijmo.vue2.gauge モジュール

Vue 2用のWijmo相互運用モジュール。

このモジュールは、Wijmoコントロールをカプセル化したVue 2コンポーネントを提供します。

これを使用するには、Vue 2フレームワーク(RC6以上)への参照、 および 通常のWijmo CSSファイルとjsファイルをアプリケーションに含める必要があります。

VueページにWijmoコントロールを追加するには、 HTMLファイルに適切なタグを含めます。 たとえば、次のコードは、 Vueページに InputNumber コントロールを追加します。

<wj-input-number
format="c2"
placeholder="Sales"
:value="sales"
:value-changed="salesChanged"
:min="0"
:max="10000"
:step="100"
:is-required="false">
</wj-input-number>
// Wijmoイベントハンドラ
// InputNumber値と比較する"sales"値を更新します 
function salesChanged(sender, eventArgs) {
this.sales = sender.value;
}

この例は、次の重要なポイントを示しています。

  1. Wijmoコントロールのタグ名は、"wj"プリフィックスで始まり、 その後に 英小文字とハイフン区切り文字を使用したコントロール名が続きます。
  2. タグ属性名は、コントロールのプロパティやイベントと同じです。
  3. 属性名の前のコロンは、属性値がJavaScript式として 解釈されることを示します ( :min="0"など)。
  4. イベントハンドラは、通常のプロパティと同様に指定します ( :value-changed="salesChanged"など)。
  5. Vue2では、すべての連結が一方向です。上の例では、"salesChanged" イベントハンドラは、 モデル内の"sales"プロパティの値を更新します。 これはVue 1からの変更点です。 Vue 1では、どのような属性にでも ".sync"サフィックスを追加することで、双方向連結を作成できます。

すべてのWijmo Vueコンポーネントには、"initialized"イベントがあります。 これは、コントロールがページに追加されて初期化された後に発生します。 このイベントを使用して、マークアップでプロパティを設定するほかに、 追加的な初期化を実行できます。次に例を示します。

<wj-flex-grid :initialized="initGrid">
</wj-flex-grid>
// Vue アプリケーション
var app = new Vue({
el: '#app',
methods: {
    initGrid: function(s, e) {
    // グリッドにカスタムMergeManagerを割り当てます
    s.mergeManager = new CustomMergeManager(s);
    }
}
});

変数

WjBulletGraph

WjBulletGraph: any

wijmo.gauge.BulletGraph コントロールをカプセル化するVueコンポーネント。

WjLinearGauge

WjLinearGauge: any

wijmo.gauge.LinearGauge コントロールをカプセル化するVueコンポーネント。

次の例は、Vueマークアップで wijmo.gauge.LinearGauge コントロールをインスタンス化して初期化する方法を示します。

<wj-linear-gauge
    :min="0" :max="1000" :step="50" :is-read-only="false"
    format="c0" :thumb-size="20"
    :show-ranges="false"
    :value="sales"
    :value-changed="salesChanged">
    <wj-range wj-property="face" :thickness="0.5">
    </wj-range>
    <wj-range wj-property="pointer" :thickness="0.5">
    </wj-range>
    <wj-range :min="0" :max="333" color="red">
    </wj-range>
    <wj-range :min="333" :max="666" color="gold">
    </wj-range>
    <wj-range :min="666" :max="1000" color="green">
    </wj-range>
</wj-linear-gauge>

このコードは、 minmaxstepisReadOnly の各プロパティを設定して、 ゲージの範囲を定義し、ユーザーがゲージの値を編集できるようにします。 次に、ゲージの value プロパティをコントローラーの sales 変数に連結します。

次に、 formatthumbSizeshowRanges の各プロパティを設定して、ゲージの外観を定義します。 最後に、 このマークアップは、 face 範囲と pointer 範囲の太さを設定し、 ゲージの現在の値に応じて value 範囲の色を制御するために、いくつかの範囲を設定します。

WjRadialGauge

WjRadialGauge: any

wijmo.gauge.RadialGauge コントロールをカプセル化するVueコンポーネント。

次の例は、Vueマークアップで wijmo.gauge.RadialGauge コントロールをインスタンス化して初期化する方法を示します。

<wj-radial-gauge
    :min="0" :max="1000" :step="50" :is-read-only="false"
format="c0" :thumb-size="12" :show-text="Value"
    :show-ranges="false"
    :value="sales"
    :value-changed="salesChanged">
    <wj-range wj-property="face" :thickness="0.5">
    </wj-range>
    <wj-range wj-property="pointer" :thickness="0.5">
    </wj-range>
    <wj-range :min="0" :max="333" color="red">
    </wj-range>
    <wj-range :min="333" :max="666" color="gold">
    </wj-range>
    <wj-range :min="666" :max="1000" color="green">
    </wj-range>
</wj-radial-gauge>

このコードは、 minmaxstepisReadOnly の各プロパティを設定して、 ゲージの範囲を定義し、ユーザーがゲージの値を編集できるようにします。 次に、ゲージの value プロパティをコントローラーの sales 変数に連結します。

次に、 formatthumbSizeshowRanges の各プロパティを設定して、ゲージの外観を定義します。 最後に、 このマークアップは、 face 範囲と pointer 範囲の太さを設定し、 ゲージの現在の値に応じて value 範囲の色を制御するために、いくつかの範囲を設定します。

WjRange

WjRange: any

次のコンポーネントのいずれかに wijmo.gauge.Range を表すVueコンポーネント。 wijmo.vue2.gauge.WjLinearGaugewijmo.vue2.gauge.WjBulletGraph 、 またはwijmo.vue2.gauge.WjRadialGauge