vue js css点击水波样式

1. div 按钮

click事件方法不能带括号 () !

	  <div
        class="ripple"
        @click="touchstart"
      >
        <router-link to="/">首页router-link>
      div>

2. click 方法 获取鼠标点击位置

 e.offsetX // 获取相对 x坐标
 e.offsetY // 获取相对 y坐标

    touchstart(event) {
     
      var style = document.createElement("style");
      style.innerHTML = `.ripple::after{top:${
       event.offsetY - 50}px;left:${
       
        event.offsetX - 100
      }px;}`;
      document.head.appendChild(style);
    },

4. css 样式

    .ripple {
     
      position: relative;
      //隐藏溢出的径向渐变背景
      overflow: hidden;
      width: 200;
      height: 100;
    }

    .ripple:after {
     
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      pointer-events: none;
      //设置径向渐变
      background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
      background-repeat: no-repeat;
      background-position: 50%;
      transform: scale(10, 10);
      opacity: 0;
      transition: transform 0.3s, opacity 0.5s;
    }

    .ripple:active:after {
     
      transform: scale(0, 0);
      opacity: 0.3;
      //设置初始状态
      transition: 0s;
    }