How to make and use Vue ripple button component

This time I will show you how to make and use Vue ripplebutton component, what are the notes for making and using Vue ripple button component, the following is a practical case, one Get up and take a look.

Let me talk about the usage first:

<zk-button class="btn btn-default">默认按钮</zk-button>
<zk-button class="btn btn-default btn-round">默认按钮</zk-button>
<zk-button class="btn btn-default btn-round" :speed="4" :opacity="0.6">定义速度和初始的波浪透明度</zk-button>

Principle:

What is used here is canvas requestAnimationFrame (For compatibility, you can find solutions online.) Some of the ripples drawn are made with css transform setTimeout, which I don’t feel good about.

Template:

<template>
 <button class="zk-btn">
  <canvas class="zk-ripple" @click="ripple"></canvas>
  <slot></slot>
 </button>
</template>

The click code is as follows (I have added detailed comments)

ripple(event) {
 // 清除上次没有执行的动画
 if (this.timer) {
  window.cancelAnimationFrame(this.timer);
 }
 this.el = event.target;
 // 执行初始化
 if (!this.initialized) {
  this.initialized = true;
  this.init(this.el);
 }
 this.radius = 0;
 // 点击坐标原点
 this.origin.x = event.offsetX;
 this.origin.y = event.offsetY;
 this.context.clearRect(0, 0, this.el.width, this.el.height);
 this.el.style.opacity = this.opacity;
 this.draw();
},

Here mainly initializes the canvas and obtains user clicks position coordinates and start drawing.

Loop drawing

draw() {
 this.context.beginPath();
 // 绘制波纹
 this.context.arc(this.origin.x, this.origin.y, this.radius, 0, 2 * Math.PI, false);
 this.context.fillStyle = this.color;
 this.context.fill();
 // 定义下次的绘制半径和透明度
 this.radius += this.speed;
 this.el.style.opacity -= this.speedOpacity;
 // 通过判断半径小于元素宽度或者还有透明度，不断绘制圆形
 if (this.radius < this.el.width || this.el.style.opacity > 0) {
  this.timer = window.requestAnimationFrame(this.draw);
 } else {
  // 清除画布
  this.context.clearRect(0, 0, this.el.width, this.el.height);
  this.el.style.opacity = 0;
 }
}

Summary:

I did not copy the complete code above. If you want to see the source code, you can download it and take a look.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use Vux in a Vue project

Opening and closing the menu without JS

The above is the detailed content of How to make and use Vue ripple button component. For more information, please follow other related articles on the PHP Chinese website!