点击页面随机生成不同颜色的点点

<template>
  <div @click="setRandom($event)">这是about页面
    <span ref="circle" class="circle" :style='style'></span>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        style: {}
      };
    },
    created() {},
    mounted() {},
    beforeRouteEnter(to, from, next) {
      console.log(to)
      console.log(from)
      if (from.name == 'Home') {
        console.log('从Home页面进入')
      } else if (from.name == 'Second') {
        console.log('从second页面进入')
        alert('从second页面进入')
      }
      next()
    },
    methods: {
      setRandom(event) {
        // 设置随机数字
        let random = Math.round(Math.random() * 100);
        // 设置随机颜色
        let color = this.setColor()
        var e = event || window.event;
        let left = e.clientX 
        let top = e.clientY

        var style = {
          width: `${random}px`,
          height: `${random}px`,
          background: `rgb${color}`,
          left:`${left}px`,
          top:`${top}px`
        }
        this.style = style
      },
      setColor() {
        //rgb颜色随机
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        var rgb = '(' + r + ',' + g + ',' + b + ')';
        return rgb;
      }
    }

  };
</script>
<style scoped>
  div {
    width: 1000px;
    height: 1000px;
    position: relative;
  }

  .circle {
    display: block;
    border-radius: 50%;
    position: absolute;
  }
</style>