Vue 波紋按鈕元件

2022-02-06 05:30:50 字數 1429 閱讀 9572

效果圖：

先說一下用法：

class="


btn btn-default


">預設按鈕


class="


btn btn-default btn-round


">預設按鈕


class="


btn btn-default btn-round


" :speed="


4" :opacity="


0.6">定義速度和初始的波浪透明度
原理：這裡用的是canvas + requestanimationframe（相容性可以網上找一下解決方法） 繪製的波紋，有些用的是css transform + settimeout做的，我感覺不太好。

模板（template）：

<


template


>


<


button 


class


="zk-btn"


>


<


canvas 


class


="zk-ripple"


@click


="ripple"


>


canvas


>


<


slot


>


slot


>


button


>


template


>
點選**如下（我已經加入詳細的注釋）

ripple(event) 


this.el =event.target;


//執行初始化


if (!this


.initialized) 


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


},
這裡主要初始化canvas和獲取使用者點選的位置座標，並開始繪製。

迴圈繪製

draw()  


else


}
總結：這是4月最後一天上班了，5.1要好好休息一下。

vue 表單驗證按鈕事件交由父元件觸發

vue 表單驗證按鈕事件交由父元件觸發，不直接再子元件上操作的方法 子元件 內容部分 子元件js部分 export default rulecustom methods else handlereset name 父元件 子元件 父元件js部分 import modalcontent from 子元...

vue中元件按鈕是否被選中的監聽

首先從antdv的案例中得到了選擇框的寫法 新增障礙物 編輯障礙物 清除附加物 如上所示，我們加乙個ref來獲取元件的屬性。vue3中ref的使用與vue2有所不同 const abc ref null console.log abc 通過觀察控制台，我們得到乙個屬性值statevalue可以按鈕值...

jQuery Mobile 元件 之 按鈕

接下來的幾篇文章中會對jqm的元件逐一介紹，不過筆者用的版本是1.3.x，可能會與最新的1.4有比較大的差異。先來說說jqm中的按鈕元件吧，按鈕是頁面中最常見的一種元件了，jqm提供了樣式豐富的按鈕，使用者體驗非常不錯。現在就來具體說明一下jqm中的按鈕吧。在具體說明按鈕的用法之前，我們先來說明一下...