前言
最近學vue2的時候發現好像沒有基于vue2的一個material design風格的組件庫，因為自己對這種風格是特別的喜愛，第一次看到的時候甚至有驚艷的感覺，所以想著自己從零自己去整一個??！今天就先寫一個Button吧！?。?/p>
搭建環境
安裝好vue-cli，node等等一系列的工具后,新建項目
vue init webpack vue-material
然后就開始寫吧:
先上個效果圖
Video_2017-03-21_192619.gif
這就是經典的水波紋效果，第一次看的我都驚呆了??！下面就來講講水波紋到底是怎么弄的吧
思路
就是點擊一個按鈕后，在點擊的位置讓在按鈕內部的一個圓形，從0放大到2倍，注意按鈕設置屬性overflow:hidden.
關鍵點:
動態添加<span class="ripple"></span>
根據鼠標點擊的位置，把圓心到該位置:
動畫:放大效果
清除動態添加的span （這點我做的不是很好。有點小bug）
設置一個按鈕
注意dom結構，按鈕內部的圓形區域是后來動態的添加上去的
<button @click="ripple" ref="btn" class="vm-btn" >
默認按鈕
</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內部的圓形
記住他不是直接加上去的，他是后來動態的加上去的,
動畫就是放大了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動態的添加ripple
看上面點擊事件注冊的是:ripple
methods: {
ripple: function (e){
this.createRipple(e);//創建dom
this.clearRipple(e);//清除dom
},
createRipple: function (e) {
//創建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';
//水波紋中心位置 = 鼠標的位置 - 水波紋的寬高的一半
ripple.style.top = e.offsetY - max / 2 + 'px';
ripple.style.left = e.offsetX - max / 2 + 'px';
//添加動畫
ripple.classList.add('show');
e.target.appendChild(ripple);
},
clearRipple: function (e) {//清除ripple
/**
* 水波紋標簽清除不完全 bug 記錄一下
*/
if (!this.timer) {
this.timer = setTimeout(() => {
e.target.childNodes.forEach(function (self) {
if (self.style)//只有水波紋會刪除
e.target.removeChild(self)
});
this.timer = "";
}, 1000)
}
}
},
完整組件代碼
github地址:https://github.com/BrotherWY/vue2-material
演示地址:http://brotherwang.online:8081/#/
nginx 配置出錯 快熄燈了 先這樣 明天再說
