Comment créer et utiliser le composant de bouton d'ondulation Vue

Cette fois, je vais vous montrer comment créer et utiliser le composant bouton Vue ripple Quelles sont les précautions pour créer et utiliser le composant bouton Vue ripple. cas pratique. Levez-vous et jetez un œil.

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

Résumé :

Je n'ai pas copié le code complet ci-dessus Si vous le souhaitez. voir le code source, vous pouvez le télécharger. Jetez un œil

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 php chinois. site web!

Lecture recommandée :

Comment utiliser Vux dans un projet Vue

Ouverture et fermeture du menu sans JS

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!