前言
最近學(xué)vue2的時(shí)候發(fā)現(xiàn)好像沒(méi)有基于vue2的一個(gè)material design風(fēng)格的組件庫(kù)，因?yàn)樽约簩?duì)這種風(fēng)格是特別的喜愛(ài)，第一次看到的時(shí)候甚至有驚艷的感覺(jué)，所以想著自己從零自己去整一個(gè)?。〗裉炀拖葘懸粋€(gè)Button吧?。?！
搭建環(huán)境
安裝好vue-cli，node等等一系列的工具后,新建項(xiàng)目
vue init webpack vue-material
然后就開始寫吧:
先上個(gè)效果圖
這就是經(jīng)典的水波紋效果，第一次看的我都驚呆了??！下面就來(lái)講講水波紋到底是怎么弄的吧
思路
就是點(diǎn)擊一個(gè)按鈕后，在點(diǎn)擊的位置讓在按鈕內(nèi)部的一個(gè)圓形，從0放大到2倍，注意按鈕設(shè)置屬性overflow:hidden.
關(guān)鍵點(diǎn):
動(dòng)態(tài)添加<span class="ripple"></span>
根據(jù)鼠標(biāo)點(diǎn)擊的位置，把圓心到該位置:
動(dòng)畫:放大效果
清除動(dòng)態(tài)添加的span （這點(diǎn)我做的不是很好。有點(diǎn)小bug）
設(shè)置一個(gè)按鈕
注意dom結(jié)構(gòu)，按鈕內(nèi)部的圓形區(qū)域是后來(lái)動(dòng)態(tài)的添加上去的
<button @click="ripple" ref="btn" class="vm-btn" >
默認(rèn)按鈕
</button>
button
position relative
display: inline-block;
white-space: nowrap;
cursor: pointer;
border: none
outline: none;
margin: 0;
padding: 8px 25px;
font-size: 14px;
overflow hidden
background: gray
color：white
button內(nèi)部的圓形
記住他不是直接加上去的，他是后來(lái)動(dòng)態(tài)的加上去的,
動(dòng)畫就是放大了1倍
<span class="ripple"></span>
.ripple
position: absolute;
border-radius: 100%;
transform: scale(0);
pointer-events: none;
.show
animation: ripple .75s ease-out forwards;
@keyframes ripple
to
transform: scale(2);
opacity 0
js動(dòng)態(tài)的添加ripple
看上面點(diǎn)擊事件注冊(cè)的是:ripple
methods: {
ripple: function (e){
this.createRipple(e);//創(chuàng)建dom
this.clearRipple(e);//清除dom
},
createRipple: function (e) {
//創(chuàng)建ripple
const ripple = document.createElement('span');
ripple.className = 'ripple';
const btn = this.$refs.btn;
//獲取按鈕寬高最大的作為水波紋的寬、高
const max = Math.max(btn.clientWidth, btn.clientHeight);
ripple.style.height = ripple.style.width = max + 'px';
//水波紋中心位置 = 鼠標(biāo)的位置 - 水波紋的寬高的一半
ripple.style.top = e.offsetY - max / 2 + 'px';
ripple.style.left = e.offsetX - max / 2 + 'px';
//添加動(dòng)畫
ripple.classList.add('show');
e.target.appendChild(ripple);
},
clearRipple: function (e) {//清除ripple
/**
* 水波紋標(biāo)簽清除不完全 bug 記錄一下
*/
if (!this.timer) {
this.timer = setTimeout(() => {
e.target.childNodes.forEach(function (self) {
if (self.style)//只有水波紋會(huì)刪除
e.target.removeChild(self)
});
this.timer = "";
}, 1000)
}
}
},
完整組件代碼
github地址:https://github.com/BrotherWY/vue2-material
演示地址:http://brotherwang.online:8081/#/
nginx 配置出錯(cuò) 快熄燈了 先這樣 明天再說(shuō)
