v5.20191.606
|

wijmo.vue2.gauge Module

Wijmo interop module for Vue 2.

This module provides Vue 2 components that encapsulate Wijmo controls.

To use it, your application must include references to the Vue 2 framework (RC6 or later), as well as the regular Wijmo CSS and js files.

To add Wijmo controls to Vue pages, include the appropriate tags in your HTML files. For example, the code below adds an InputNumber control to a Vue page:

<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 event handler
// update "sales" value to match the InputNumber value
function salesChanged(sender, eventArgs) {
  this.sales = sender.value;
}

The example illustrates the following important points:

  1. Wijmo controls have tag names that start with the "wj" prefix, followed by the control name using lower-case and hyphen separators.
  2. The tag attribute names match the control's properties and events.
  3. Colons before attribute names indicate the attribute value should be interpreted as JavaScript expressions (e.g. :min="0").
  4. Event handlers are specified the same way as regular properties (e.g. :value-changed="salesChanged").
  5. In Vue2, all bindings are one-way. In the example above, the "salesChanged" event handler is responsible for updating the value of the "sales" property in the model. This is a change from Vue 1, where two-way bindings could be created by adding the ".sync" suffix to any attribute.

All Wijmo Vue components include an "initialized" event that is raised after the control has been added to the page and initialized. You can use this event to perform additional initialization in addition to setting properties in markup. For example:

<wj-flex-grid :initialized="initGrid">
</wj-flex-grid>
// Vue application
var app = new Vue({
  el: '#app',
  methods: {
    initGrid: function(s, e) {
      // assign a custom MergeManager to the grid
      s.mergeManager = new CustomMergeManager(s);
    }
  }
});

Variables

WjBulletGraph

WjBulletGraph: any

Vue component that encapsulates the wijmo.gauge.BulletGraph control.

WjLinearGauge

WjLinearGauge: any

Vue component that encapsulates the wijmo.gauge.LinearGauge control.

The example below shows how to instantiate and initialize a wijmo.gauge.LinearGauge control using Vue markup:

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

The code min, max, step, and isReadOnly properties to define the range of the gauge and to allow users to edit its value. Next, it binds the gauge's value property to a sales variable in the controller.

Then it sets the format, thumbSize, and showRanges properties to define the appearance of the gauge. Finally, the markup sets the thickness of the face and pointer ranges, and extra ranges that will control the color of the value range depending on the gauge's current value.

WjRadialGauge

WjRadialGauge: any

Vue component that encapsulates the wijmo.gauge.RadialGauge control.

The example below shows how to instantiate and initialize a wijmo.gauge.RadialGauge control using Vue markup:

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

The code min, max, step, and isReadOnly properties to define the range of the gauge and to allow users to edit its value. Next, it binds the gauge's value property to a sales variable in the controller.

Then it sets the format, thumbSize, and showRanges properties to define the appearance of the gauge. Finally, the markup sets the thickness of the face and pointer ranges, and extra ranges that will control the color of the value range depending on the gauge's current value.

WjRange

WjRange: any

Vue component that represents a wijmo.gauge.Range in one of the following components: wijmo.vue2.gauge.WjLinearGauge , wijmo.vue2.gauge.WjBulletGraph or wijmo.vue2.gauge.WjRadialGauge.