Vuejs2 Vue.js 3.2.1下的Gauge.js组件未创建

“您好，我正在尝试让一个简单的gauge.js在Vue.js v3.2.1下工作。文档引用get总是返回null，因此装载的函数永远不会完成。这应该是一件简单的事情，但我担心我在某些地方缺少知识，因为我是Vue.js的新手，找不到任何帮助。”

从'Gauge.js'导入{Gauge}
导出默认值
{
名称：“vcGaugeJs”，
道具：
{
值：{type:Number，默认值：0}，
//选项：{type:Object，默认值：（）=>（{}）}
},
数据（）
{
返回
{
规格：零
}
},
挂载：函数（）
{   
this.initGauge（）；
},
观察：
{
值：函数（val）
{   
此.仪表组（val）；
},
},
更新：函数（）
{
如果（this.gauge==null）
{
this.initGauge（）；
}
},
方法：
{
初始规范（）
{
让选项=
{
角度：0，//规弧的跨度
线宽：0.35，//线宽
半径刻度：1，//相对半径
指针：
{
长度：0.53，///相对于仪表半径
冲程宽度：0.057，//厚度
颜色：'#000000'//填充颜色
},
limitMax:false，//如果为false，则如果value>maxValue，则最大值会自动增加
limitMin:false，//如果为true，则仪表的最小值将固定
colorStart:“#6F6EA0”，//颜色
colorStop:“#C0C0DB”//只需尝试一下即可
strokeColor:“#EEEEEE”，//查看哪些最适合您
generateGradient：是的，
highDpiSupport:true//高分辨率支持
}
var target=此。$refs.foo；
if（target==null）
{
console.log（“Null target ref！”）；
}
其他的
{
this.gauge=新仪表（this.$refs.foo）；
this.gauge.maxValue=3000；//设置最大仪表值
this.gauge.setMinValue（0）；//首选setter而不是gauge.minValue=0
this.gauge.animationSpeed=62；//设置动画速度（默认值为32）
this.gauge.set（1700）；//设置实际值
this.gauge.setOptions（opts）；//创建gauge！
}
}
},  

}

下面是我的看法：

如果查看，可以看到当调用

created（）

钩子时，组件的模板/渲染函数尚未编译

因此，在您的情况下，您应该能够在

mounted

hook on

vm.$el

上实例化仪表，并将其作为画布元素

mounted（）{
this.initGauge（）；
},
方法：{
initGauge（）{
让opts={/*选项*/}
this.gauge=新仪表（this.$el）.setOptions（opts）；
this.gauge.maxValue=3000；//设置最大仪表值
this.gauge.setMinValue（0）；//首选setter而不是gauge.minValue=0
this.gauge.animationSpeed=62；//设置动画速度（默认值为32）
this.gauge.set（1700）；//设置实际值
}
}

<template >
    <canvas ref="foo"></canvas>
</template>

<script>
import { Gauge } from 'gauge.js'

export default 
{
name: 'vcGaugeJs',
props: 
{
    value: {type: Number, default: 0},
    //options: { type: Object, default: () => ({}) }
},

data() 
{
      return 
  {
       gauge: null
      }
},

mounted: function () 
{   
this.initGauge();
},
  watch: 
  {
    value: function (val) 
{   
    this.gauge.set(val);
    },
  },



updated: function()
{
if (this.gauge == null)
{
    this.initGauge();
}
 },



  methods:
{
    initGauge () 
    {
        let opts = 
    {
        angle: 0, // The span of the gauge arc
        lineWidth: 0.35, // The line thickness
        radiusScale: 1, // Relative radius
        pointer: 
        {
            length: 0.53, // // Relative to gauge radius
            strokeWidth: 0.057, // The thickness
            color: '#000000' // Fill color
        },
        limitMax: false,     // If false, max value increases automatically if value > maxValue
        limitMin: false,     // If true, the min value of the gauge will be fixed
        colorStart: '#6F6EA0',   // Colors
        colorStop: '#C0C0DB',    // just experiment with them
        strokeColor: '#EEEEEE',  // to see which ones work best for you
        generateGradient: true,
        highDpiSupport: true     // High resolution support
    }

    var target = this.$refs.foo;
    if (target == null)
    {
        console.log ("Null target ref!");
    }
    else
    {
        this.gauge = new Gauge(this.$refs.foo);
        this.gauge.maxValue = 3000; // set max gauge value
        this.gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0
        this.gauge.animationSpeed = 62; // set animation speed (32 is default value)
        this.gauge.set(1700); // set actual value
        this.gauge.setOptions(opts); // create gauge!
    }
}
},