有人可以解释如何使用插件 vuejs-progress-bar答案

【问题标题】：Could someone explain how to use the plugin vuejs-progress-bar有人可以解释如何使用插件 vuejs-progress-bar
【发布时间】：2020-06-05 07:07:53
【问题描述】：

我是 vue.js 的新手。
我想使用插件vuejs-progress-bar ，但不明白选项结构是如何工作的。如何在脚本标签的导出默认值中实现它？
它会抛出一个错误，说选项没有在实例上定义，但如果我尝试将其设置为属性，则会在渲染期间引用。我该如何使用它？

编辑：我试过这样

<template lang="html">
  <div class="">
    <progress-bar
    :options="options"
    :value="value"
    />
  </div>
</template>

<script>
export default {
  name:"ProgressBar",
  options: {
  text: {
    color: '#FFFFFF',
    shadowEnable: true,
    shadowColor: '#000000',
    fontSize: 14,
    fontFamily: 'Helvetica',
    dynamicPosition: false,
    hideText: false
  },
  progress: {
    color: '#2dbd2d',
    backgroundColor: '#C0C0C0'
  },
  layout: {
    height: 35,
    width: 140,
    verticalTextAlign: 61,
    horizontalTextAlign: 43,
    zeroOffset: 0,
    strokeWidth: 30,
    progressPadding: 0,
    type: 'line'
  }
}
}
</script>

<style lang="css" scoped>
</style>

【问题讨论】：

你能给我们看一些代码吗
把它放在你组件的data中。
我已经添加了编辑后的代码，请看一下。抱歉，我是 StackOverflow 的新手。

标签： javascript vue.js progress-bar

【解决方案1】：

把它放在你组件的data属性中：

export default {
  name:"ProgressBar",
    data: function () {
        return {
            options: {
                text: {
                    color: '#FFFFFF',
                    shadowEnable: true,
                    shadowColor: '#000000',
                    fontSize: 14,
                    fontFamily: 'Helvetica',
                    dynamicPosition: false,
                    hideText: false
                },
                progress: {
                    color: '#2dbd2d',
                    backgroundColor: '#C0C0C0'
                },
                layout: {
                    height: 35,
                    width: 140,
                    verticalTextAlign: 61,
                    horizontalTextAlign: 43,
                    zeroOffset: 0,
                    strokeWidth: 30,
                    progressPadding: 0,
                    type: 'line'
                }
            }
        }
    }
}
</script>

【讨论】：