<h3 style="text-align:center">点击中心圆查看效果</h3>
<div id="app">
 <colorful-circle :count="count"></colorful-circle>
</div>
<script type="text/x-template" id="circle-template">
  <div class="colorful" 
       :style="{
               width: count * 60 + 'px', 
               height: count * 60 + 'px',
               background: color
               }"
    @click="changeColor"
  >
    <colorful-circle 
         v-if="count > 1" 
         :count="count - 1"
         @colorChange="handleColor"
    ></colorful-circle>
  </div>
</script>

html,body{
  width: 100%;
  height: 100%;
}

.colorful{
  display:flex;
  margin: 0 auto;
  transition: all .3s ease;
  align-items: center;
  justify-content: center;
  min-width 10px;
  border-radius: 50%;
  min-height: 10px;
  border: 1px solid #eaeaea
}

var Color = net.brehaut.Color;

function randomColor() {
    function randomNum(max) {
        return Math.floor(max * Math.random());
    }
    return `rgb(${randomNum(256)},${randomNum(256)},${randomNum(256)})`;
}

Vue.component('colorful-circle', {
  data() {
    return  {
      color: ''
    }
  },
  props: {
    count: Number
  },
  template: '#circle-template',
  mounted() {
    if (this.count === 1) {
      this.changeColor();
    }
  },
  methods: {
    
    handleColor(c) {
      this.color = Color(c).darkenByAmount( .05 );
      setTimeout(() => {
        this.$emit('colorChange', this.color);
      },100);
    },
    changeColor(e) {
      e && e.stopPropagation();
      this.color = randomColor();
      setTimeout(() => {
        this.$emit('colorChange', this.color);
      },100)
    }
  }
})

new Vue({
  el: '#app',
  data: {
    count: 7
  }
})