So erstellen und verwenden Sie die Vue-Ripple-Button-Komponente

Dieses Mal zeige ich Ihnen, wie Sie die Vue-Ripple--Button-Komponente erstellen und verwenden Praktischer Koffer. Stehen Sie auf und werfen Sie einen Blick darauf.

Lassen Sie uns zunächst über die Verwendung sprechen:

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

Prinzip:

Hier wird

Leinwand + requestAnimationFrame (aus Kompatibilitätsgründen finden Sie Lösungen online) Einige der gezeichneten Wellen werden mit CSS-Transformation + setTimeout erstellt, was mir nicht gut tut.

Vorlage:

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

Der Klickcode lautet wie folgt (ich habe detaillierte

Kommentare hinzugefügt

)

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

Hier wird hauptsächlich die Leinwand initialisiert und der Benutzer abgerufen Klicken Sie auf Positionskoordinaten und beginnen Sie mit dem Zeichnen.

Schleifenzeichnung

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

Zusammenfassung:

Ich habe den vollständigen Code oben nicht kopiert. Wenn Sie ihn sehen möchten Quellcode, Sie können ihn herunterladen und einen Blick darauf werfen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

So verwenden Sie Vux in einem Vue-Projekt

Öffnen und Schließen des Menüs ohne JS

Das obige ist der detaillierte Inhalt vonSo erstellen und verwenden Sie die Vue-Ripple-Button-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!