简体   繁体   中英

How can I make this vue circular progress bar plugin work?

This circular progress bar plugin doesn't seem to be working. When I add this to my code, it says event (in the method progress_end() is defined but not used).
Also, if I remove event as an argument this error comes-
You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions or use the compiler-included build
Please have a look at this link for reference.
https://www.npmjs.com/package/vue2-circle-progress
Could someone help me fix this?

<template>

  <div id="app">
      <vue-circle
        :progress="50"
        :size="100"
        :reverse="false"
        line-cap="round"
        :fill="fill"
        empty-fill="rgba(0, 0, 0, .1)"
        :animation-start-value="0.0"
        :start-angle="0"
        insert-mode="append"
        :thickness="5"
        :show-percent="true"
        @vue-circle-progress="progress"
        @vue-circle-end="progress_end">
      </vue-circle>
  </div> 

</template>

<script>
  import VueCircle from 'vue2-circle-progress'
  export default {
    components: {
      VueCircle
    },
    data(){
      return{
        fill : { gradient: ["red", "green", "blue"] },
      }
    },
    methods:{
      progress(event,progress,stepValue){
        console.log(stepValue);
      },
      progress_end(event){
        console.log("Circle progress end");
      }
    }
  }
</script>


Update
There was an issue in my main.js. I used this code to make it work

  el:'#app',
  components: { App },
  template: "<App/>",
  render:h=>h(App)


I'm sorry I didn't know where the issue was but thank you !

If your project created by @vue/cli, create vue.config.js file and add:

module.exports = {
  runtimeCompiler: true
}

It's not working, because you are passing constant numbers as props, and then just listening on the events.

:progress="50"
:size="100"

But also this 'package' is a huge mess, it will never work properly: author just packaged a Vue app and published it (with JQuery, jeez).

Look for other progress bar package. There are plenty, actively updated.

Edit:
About your runtime only build question, you probably just included Vue as a script like so: https://v2.vuejs.org/v2/guide/installation.html#CDN
This solution is only for prototyping.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM