前言

最近学vue2的时候发现好像没有基于vue2的一个material design风格的组件库，因为自己对这种风格是特别的喜爱，第一次看到的时候甚至有惊艳的感觉，所以想着自己从零自己去整一个！！今天就先写一个Button吧！！！

搭建环境

安装好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 配置出错 快熄灯了 先这样 明天再说