GaugeJS的包装器库

真空计 (vgauge)

A Vue Wrapper to GaugeJS.

GaugeJS的Vue包装器。

View demo 查看演示 View Github 查看Github

正在安装 (Installing)

npm i vgauge --save

or

要么

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

用法 (Usage)

通过导入 (By Importing)

import VGauge from "vgauge";

export default {
  components: {
    VGauge
  },
  data() {
    return {
      value: 35
    };
  }
};

<v-gauge :value="value" />

通过包括 (By Including)

<div id="app">
  <h3>Will not stop at 100</h3>
  <v-gauge :value="x" top></v-gauge>
  <h3>Will stop at 100</h3>
  <v-gauge :value="y" unit="%"></v-gauge>
</div>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      x: 0,
      y: 0
    },
    mounted() {
      setInterval(() => {
        this.x += 4;
      }, 1000);
      setInterval(() => {
        if (this.y < 100) this.y += 5;
      }, 1000);
    }
  });
</script>

道具 (Props)

You can use the following props

您可以使用以下道具

Name	Description	Type	Default
options	GaugeJS render options, check gaugejs API	Object	Basic gaugejs Object
donut	Renders a donut instead of a gauge #3	Boolean	false
height	height of the gauge in pixels	String	200px
unit	unit to show after value	String	''
initialValue	Initial value to display on the Gauge	Number	0
value	Value to display/watch	Number	50
minValue	Min value for the gauge to display	Number	0
maxValue	Max value for the gauge to display	Number	100
decimalPlace	Show decimal place values to which extent	Number	0
top	To have the gauge value on top of the gauge	Boolean	false
gaugeValueClass	Class to apply to gauge value (Must use /deep/ in css selector)	String	*
animationSpeed	Animation speed for gauge	Number	10

名称	描述	类型	默认
选项	GaugeJS渲染选项，检查gaugejs API	目的	基本的gaugejs对象
甜甜圈	呈现一个甜甜圈，而不是＃3	布尔型	假
高度	量规高度(以像素为单位)	串	200像素
单元	价值后显示单位	串	''
初始值	要在量规上显示的初始值	数	0
值	显示/观看的价值	数	50
最小值	量规显示的最小值	数	0
maxValue	量规显示的最大值	数	100
小数位	显示小数位数	数	0
最佳	使仪表值位于仪表顶部	布尔型	假
gaugeValueClass	适用于测量值的类(必须在CSS选择器中使用/ deep / )	串	*
animationSpeed	量规的动画速度	数	10

翻译自: https://vuejsexamples.com/a-wrapper-library-for-gaugejs/