JSFiddle - React, Tailwind, and code Playground

by tanjw

HTML

<script src="//cdn.jsdelivr.net/vue/0.12.10/vue.js"></script>
<script src="//rawgit.com/vuejs/vue-router/dev/dist/vue-router.js"></script>
<link href="//cdn.bootcss.com/iview/2.0.0-rc.9/styles/iview.css" rel="stylesheet" type="text/css">
<script src="//cdn.bootcss.com/vue/2.2.6/vue.js"></script>
<script src="//cdn.bootcss.com/vue-resource/1.2.1/vue-resource.min.js"></script>
<script src="//cdn.bootcss.com/iview/2.0.0-rc.9/iview.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/2.3.1/vue-router.min.js"></script>

<div id="container">
<i-circle :percent="percent" >
       
         <Icon v-if="percent == 100" type="ios-checkmark-empty" size="60" style="color:#5cb85c"></Icon>
        <span v-else style="font-size:24px">{{ percent }}%</span>
    </i-circle>
    <Button-group size="large">
        <i-Button icon="ios-plus-empty" @click="add"></i-Button>
        <i-Button icon="ios-minus-empty" @click="minus"></i-Button>
    </Button-group>
</div>

JavaScript

new Vue({

  el: '#container',
  data : {
            
                percent: 0
          
        },
        computed: {
            color () {
                let color = '#2db7f5';
                if (this.percent >= 100) {
                this.percent = 100;
                    color = '#5cb85c';
                }
                return color;
            }
        },
        methods: {
            add () {
                if (this.percent >= 100) {
                		
                    return false;
                }
                this.percent += 10.22;
                if(this.percent >=100){
                this.percent =100;
                }
            },
            minus () {
                if (this.percent <= 0) {
                
                    return false;
                }
                this.percent -= 10.22;
                if (this.percent <= 0) {
                
                    this.percent =0;
                }
            }
        }
});