Vue波紋按鈕組件制作

更新時(shí)間：2018年04月30日 13:59:44 投稿：laozhang

本文給大家分享了VUE制作點(diǎn)擊按鈕出現(xiàn)水波紋效果的組件過(guò)程，對(duì)此有需求的朋友可以跟著學(xué)習(xí)下。

先說(shuō)一下用法：

<zk-button class="btn btn-default">默認(rèn)按鈕</zk-button>
<zk-button class="btn btn-default btn-round">默認(rèn)按鈕</zk-button>
<zk-button class="btn btn-default btn-round" :speed="4" :opacity="0.6">定義速度和初始的波浪透明度</zk-button>

原理：

這里用的是canvas + requestAnimationFrame（兼容性可以網(wǎng)上找一下解決方法）繪制的波紋，有些用的是css transform + setTimeout做的，我感覺(jué)不太好。

模板（template）：

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

點(diǎn)擊代碼如下（我已經(jīng)加入詳細(xì)的注釋）

ripple(event) {
 // 清除上次沒(méi)有執(zhí)行的動(dòng)畫
 if (this.timer) {
  window.cancelAnimationFrame(this.timer);
 }
 this.el = event.target;
 // 執(zhí)行初始化
 if (!this.initialized) {
  this.initialized = true;
  this.init(this.el);
 }
 this.radius = 0;
 // 點(diǎn)擊坐標(biāo)原點(diǎn)
 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();
},

這里主要初始化canvas和獲取用戶點(diǎn)擊的位置坐標(biāo)，并開始繪制。

循環(huán)繪制

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;
 // 通過(guò)判斷半徑小于元素寬度或者還有透明度，不斷繪制圓形
 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;
 }
}

總結(jié)：

上面代碼我沒(méi)有復(fù)制完整，大家想看源碼可以下載看一下

這是4月最后一天上班了，5.1要好好休息一下。

您可能感興趣的文章:

相關(guān)文章

vue將html頁(yè)面生成高清晰pdf文件的方法
最近工作中遇到個(gè)需求,需要實(shí)現(xiàn)個(gè)可視化圖表頁(yè)的PDF文件導(dǎo)出,所以下面這篇文章主要給大家介紹了關(guān)于利用vue如何將html頁(yè)面生成高清晰pdf文件的相關(guān)資料,需要的朋友可以參考下
2022-03-03
Vue路由vue-router詳細(xì)講解指南
這篇文章主要介紹了Vue路由vue-router詳細(xì)講解指南，對(duì)vue-router感興趣的同學(xué)，可以參考下
2021-04-04
vue調(diào)用swiper插件步驟教程(最易理解且詳細(xì))
有時(shí)候我們需要在vue中使用輪播組件,如果是在vue組件中引入第三方組件的話,最好通過(guò)npm安裝,從而進(jìn)行統(tǒng)一安裝包管理,下面這篇文章主要給大家介紹了關(guān)于vue調(diào)用swiper插件的相關(guān)資料,需要的朋友可以參考下
2023-04-04
解決vite項(xiàng)目Uncaught Syntaxerror:Unexpected token＞vue項(xiàng)
這篇文章主要介紹了解決vite項(xiàng)目Uncaught Syntaxerror:Unexpected token＞vue項(xiàng)目上線白屏問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue 開發(fā)必須知道的36個(gè)技巧(小結(jié))
這篇文章主要介紹了Vue 開發(fā)必須知道的36個(gè)技巧(小結(jié)),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
vue實(shí)現(xiàn)的封裝全局filter并統(tǒng)一管理操作示例
這篇文章主要介紹了vue實(shí)現(xiàn)的封裝全局filter并統(tǒng)一管理操作,結(jié)合實(shí)例形式詳細(xì)分析了vue封裝全局filter及相關(guān)使用技巧,需要的朋友可以參考下
2020-02-02
Vue 使用超圖SuperMap的實(shí)踐
作為一名剛?cè)腴T計(jì)算機(jī)語(yǔ)言的人來(lái)說(shuō),要想快速完成測(cè)試開發(fā)地圖項(xiàng)目,肯定要接用到SuperMap，本文主要介紹了Vue 使用超圖SuperMap的實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-12-12
vue如何通過(guò)image-conversion實(shí)現(xiàn)圖片壓縮詳解
在Vue項(xiàng)目中上傳大圖片時(shí),可以通過(guò)image-conversion庫(kù)壓縮至指定大小,這篇文章主要介紹了vue如何通過(guò)image-conversion實(shí)現(xiàn)圖片壓縮的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-12-12
Vue3中事件總線的具體使用
本文主要介紹了Vue3中事件總線的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
Vue代理報(bào)錯(cuò)404問(wèn)題及解決(vue配置proxy)
這篇文章主要介紹了Vue代理報(bào)錯(cuò)404問(wèn)題及解決(vue配置proxy)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12