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)畫(huà)
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)，并開(kāi)始繪制。
循環(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 {
// 清除畫(huà)布
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)文章
最近工作中遇到個(gè)需求,需要實(shí)現(xiàn)個(gè)可視化圖表頁(yè)的PDF文件導(dǎo)出,所以下面這篇文章主要給大家介紹了關(guān)于利用vue如何將html頁(yè)面生成高清晰pdf文件的相關(guān)資料,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了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 開(kāi)發(fā)必須知道的36個(gè)技巧(小結(jié))
這篇文章主要介紹了Vue 開(kāi)發(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
作為一名剛?cè)腴T計(jì)算機(jī)語(yǔ)言的人來(lái)說(shuō),要想快速完成測(cè)試開(kāi)發(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中事件總線的具體使用，文中通過(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