Explication détaillée de l'utilisation du composant de bouton d'ondulation de Vue

Cette fois, je vous apporte une explication détaillée de l'utilisation du composant Vue ripple groupe de boutons Quelles sont les précautions lors de l'utilisation du composant Vue ripple bouton. Voici des cas pratiques. , jetons un coup d'oeil.

Permettez-moi d'abord de parler de l'utilisation :

<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>

Principe :

La toile + requestAnimationFrame (pour des raisons de compatibilité, vous pouvez trouver des solutions en ligne). Certaines des ondulations dessinées sont réalisées avec css transform + setTimeout.

Modèle :

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

Le code de clic est le suivant (j'ai ajouté des

commentaires détaillés)

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();
},

Ici, on initialise principalement le toile Et obtenez les coordonnées de localisation du clic de l'utilisateur et commencez à dessiner.

Dessin de boucle

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;
 }
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site PHP chinois !

Lecture recommandée :

Explication détaillée des étapes pour implémenter le plug-in de défilement plein écran dans ES6

vue +vue-router+autorisations d'opération vuex

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!